makerli
首页> 文章列表> Typescript学习
最新文章
快速搜索
可以根据标题或者摘要关键字搜索
推荐文章
Typescript学习
Typescript学习
Typescript学习-MakerLi

第一章:介绍与安装

一、Typescript介绍

  1. TypeScript是由微软开发的一款开源的编程语言。
  2. TypeScript是 Javascript的超集，遵循最新的ES6、Es5规范。TypeScript扩展了JavaScript的语法。
  3. TypeScript更像后端java、C#这样的面向对象语言，可以让js开发大型企业项目。
  4. 谷歌也在大力支持Typescript的推广，谷歌的angular2.x+就是基于Typescript语法。
  5. 最新的vue 、 React 也可以集成TypeScript。
  6. Nodejs框架 Nestjs、midway 中用的就是 TypeScript语法。

二、Typescript的安装与编译

  • npm install -g typescript
  • cnpm install -g typescript
  • yarn global add typescript

验证安装成功

tsc -v

三、自动编译

  • 生成配置文件 tsc --init
  • 修改outDir输出目录
  • 在ide里面 终端 任务 选择监视.json文件

第二章:Typescript的数据类型

布尔类型（boolean)

数字类型（number）

字符串类型(string)

数组类型（array)

第一种定义方式：
 let arr:number[]=[1,2,3,4,5];
let arr:string[]=["1","2"];
第二种定义方法
let arr:Array=[1,2,3,4];

元组类型(tuple)

let arr:[string,number,boolean]=["ts",3,18,true];

枚举类型(enum)

enum Flag
enum Flag{success=1,error=-1};
let f:Flag=Flag.success;
标识状态
如果不标识，则是索引值
如果有标识，则顺序

任意类型(any）

任意类型的用处：

和ES5类似

给obeject赋值时，可用any

null 和undefinedvoid类型

void一般用于方法没有返回值

never类型

never表示从不会出现的值

第三章、函数的定义

一、函数的申明

function run(){
return 'run';
}

二、匿名函数

var run2=function(){
retuen 'run2';
}

三、函数的传参

3.1有返回值

function getInfo(name:string,age:number):string{
return name+age;
}

3.2没有返回值

function getInfo(name:string,age:number):void{
alert(name+age);
}

3.3方法可选参数

function getInfo(name:string,age?:number):string{
return name+age;
}

3.4默认参数

function getInfo(name:string,age:number=30):string{
return name+age;
}

3.5剩余参数

function getInfo(...res:nmber[]):void{
alert(res.join(','));
}

3.6函数重载

function getInfo(name:string):string{}
function getInfo(age:number):string{}
function getInfo(str:string):any{
if(typeof str=='string'){
	return '这是'+name;
}else{
return ‘年龄’+str}
}

第四章、Typescript的类

1、最简单的类

    function Person(){
      this.name='张三';
      this.age=20;
    }
    var p=new Person();
    alert(p.name);

2、构造函数和原型链里面增加方法

    function Person(){
      this.name='张三'; /*属性*/
      this.age=20;
      this.run=function(){
        alert(this.name+'在运动');
      }

    }
    //原型链上面的属性会被多个实例共享  构造函数不会
    Person.prototype.sex="男";
    Person.prototype.work=function(){
      alert(this.name+'在工作');
    }
    var p=new Person();
    p.work();

3、类里面的静态方法

    function Person(){
      this.name='张三'; /*属性*/
      this.age=20;
      this.run=function(){ /*实例方法*/

        alert(this.name+'在运动');
      }
    }
    Person.getInfo=function(){
      alert('我是静态方法');
    }
    //原型链上面的属性会被多个实例共享  构造函数不会
    Person.prototype.sex="男";
    Person.prototype.work=function(){
      alert(this.name+'在工作');
    }
    var p=new Person();   
    p.work();
    //调用静态方法
    Person.getInfo();

4、es5里面的继承  对象冒充实现继承

    function Person(){
      this.name='张三'; /*属性*/
      this.age=20;
      this.run=function(){ /*实例方法*/
        alert(this.name+'在运动');
      }
    }    
    Person.prototype.sex="男";
    Person.prototype.work=function(){
       alert(this.name+'在工作');
    }
    //Web类 继承Person类  原型链+对象冒充的组合继承模式
    function Web(){
      Person.call(this);  /*对象冒充实现继承*/
    }
    var w=new Web();
    // w.run(); //对象冒充可以继承构造函数里面的属性和方法
    w.work(); //对象冒充可以继承构造函数里面的属性和方法  但是没法继承原型链上面的属性和方法

5、es5里面的继承  原型链实现继承

    function Person(){
      this.name='张三'; /*属性*/
      this.age=20;
      this.run=function(){ /*实例方法*/
        alert(this.name+'在运动');
      }
    }    
    Person.prototype.sex="男";
    Person.prototype.work=function(){
       alert(this.name+'在工作');
    }
    //Web类 继承Person类  原型链+对象冒充的组合继承模式
    function Web(){   
    }
    Web.prototype=new Person();  //原型链实现继承
    var w=new Web();
    //原型链实现继承:可以继承构造函数里面的属性和方法 也可以继承原型链上面的属性和方法
    //w.run();
    w.work();

6、原型链+对象冒充的组合继承模式

 function Person(name,age){
      this.name=name; /*属性*/
      this.age=age;
      this.run=function(){ /*实例方法*/
        alert(this.name+'在运动');
      }
  }    
  Person.prototype.sex="男";
  Person.prototype.work=function(){
      alert(this.name+'在工作');
  }
  function Web(name,age){
    Person.call(this,name,age);  //对象冒充继承  实例化子类可以给父类传参
  }
  Web.prototype=new Person();
  var w=new Web('赵四',20);  //实例化子类的时候没法给父类传参
  // w.run();
  w.work();
  // var w1=new Web('王五',22);

7、原型链+对象冒充继承的另一种方式

  function Person(name,age){
      this.name=name; /*属性*/
      this.age=age;
      this.run=function(){ /*实例方法*/
        alert(this.name+'在运动');
      }
  }    
  Person.prototype.sex="男";
  Person.prototype.work=function(){
      alert(this.name+'在工作');
  }    
  function Web(name,age){
    Person.call(this,name,age);  //对象冒充继承 可以继承构造函数里面的属性和方法、实例化子类可以给父类传参
  }
  Web.prototype=Person.prototype;
  var w=new Web('赵四',20);  //实例化子类的时候没法给父类传参
   w.run();
  // w.work();
  // var w1=new Web('王五',22);

第五章、typeScript中的类

1、类的定义

  class Person{
        name:string; 
        constructor(name:string){  //构造函数   实例化类的时候触发的方法
            this.name=name;
        }
        getName():string{
            return this.name;
        }
        setName(name:string):void{
            this.name=name;
        }
    }
    var p=new Person('张三');
    alert(p.getName());
    p.setName('李四');
    alert(p.getName());

2、继承 extends、 super

  class Person{
       name:string;
       constructor(name:string){
         this.name=name;
       }
       run():string{
        return this.name+'在运动'
      }
    }
  class Web extends Person{
     constructor(name:string){
   super(name); /*初始化父类的构造函数*/
      }
      run():string{
    return this.name+'在运动-子类'
      }
     work(){
       alert(this.name+'在工作')
     }
    }
     var w=new Web('李四');
     alert(w.run());//先在子类里面找，如果没有再去父类找

3、类里面的修饰符 

    public :公有          在当前类里面、 子类  、类外面都可以访问
    protected：保护类型    在当前类里面、子类里面可以访问 ，在类外部没法访问
    private ：私有         在当前类里面可以访问，子类、类外部都没法访问

4、静态属性与静态方法

ES5的静态方法

 function Person(){
        this.run1=function(){
        }
    }
    Person.name='哈哈哈';
    Person.run2=function(){  //静态方法
    }
    var p=new Person();
    Person.run2(); //静态方法的调用不需要实例化

ts的静态方法

   class Per{
        public name:string;
        public age:number=20;
        static sex="男";//静态属性
        constructor(name:string) {
                this.name=name;
        }
        run(){  /*实例方法*/
            alert(this.name+'在运动')
        }
        work(){
            alert(this.name+'在工作')
        }
        static print(){  /*静态方法  里面没法直接调用类里面的属性*/
            alert('print方法'+Per.sex);
        }
    }
    // var p=new Per('张三');
    // p.run();
    Per.print();
    alert(Per.sex);

多态:父类定义一个方法不去实现，让继承它的子类去实现  每一个子类有不同的表现

class Animal {
    name:string;
    constructor(name:string) {
        this.name=name;
    }
    eat(){   //具体吃什么?继承它的子类去实现 ，每一个子类的表现不一样
        console.log('吃的方法')
    }
}
class Dog extends Animal{
    constructor(name:string){
        super(name)
    }
    eat(){
        return this.name+'吃粮食'
    }
}
class Cat extends Animal{
    constructor(name:string){
        super(name)
    }
    eat(){
        return this.name+'吃老鼠'
    }
}

ypescript中的抽象类：它是提供其他类继承的基类，不能直接被实例化。

用abstract关键字定义抽象类和抽象方法，抽象类中的抽象方法不包含具体实现并且必须在派生类中实现。

abstract抽象方法只能放在抽象类里面

抽象类和抽象方法用来定义标准 。   标准：Animal 这个类要求它的子类必须包含eat方法

abstract class Animal{
    public name:string;
    constructor(name:string){
        this.name=name;
    }
    abstract eat():any;  //抽象方法不包含具体实现并且必须在派生类中实现。
    run(){
        console.log('其他方法可以不实现')
    }
}
class Dog extends Animal{
    //抽象类的子类必须实现抽象类里面的抽象方法
    constructor(name:any){
        super(name)
    }
    eat(){
        console.log(this.name+'吃粮食')
    }
}
var d=new Dog('小花花');
d.eat();
class Cat extends Animal{
    //抽象类的子类必须实现抽象类里面的抽象方法
    constructor(name:any){
        super(name)
    }
    run(){}
    eat(){
        console.log(this.name+'吃老鼠')
    }
}
var c=new Cat('小花猫');
c.eat();

第六章、typeScript的接口

1.属性接口

ts中定义方法传入参数        

function printLabel(label:string):void {
            console.log('printLabel');
        }
        printLabel('hahah');

ts中自定义方法传入参数,对json进行约束

        function printLabel(labelInfo:{label:string}):void {
            console.log('printLabel');
        }
        printLabel('hahah'); //错误写法
        printLabel({name:'张三'});  //错误的写法
        printLabel({label:'张三'});  //正确的写法

对批量方法传入参数进行约束

         interface FullName{
            firstName:string;   //注意;结束
            secondName:string;
        }
        function printName(name:FullName){
            // 必须传入对象  firstName  secondName
            console.log(name.firstName+'--'+name.secondName);
        }
        // printName('1213');  //错误
        var obj={   /*传入的参数必须包含 firstName  secondName*/
            age:20,
            firstName:'张',
            secondName:'三'
        };
        printName(obj);

可选属性

   interface FullName{
        firstName:string;
        secondName?:string;
    }
    function getName(name:FullName){
        console.log(name)
    }  
    getName({               
        firstName:'firstName'
    })

加密的函数类型接口

interface encrypt{
    (key:string,value:string):string;
}
var md5:encrypt=function(key:string,value:string):string{
        //模拟操作
        return key+value;
}
console.log(md5('name','zhangsan'));
var sha1:encrypt=function(key:string,value:string):string{
    //模拟操作
    return key+'----'+value;
}
console.log(sha1('name','lisi'));

可索引接口：数组、对象的约束

 interface UserArr{
     [index:number]:string
}
var arr:UserArr=['aaa','bbb'];/*正确*/
      console.log(arr[0]);
 var arr:UserArr=[123,'bbb'];  /*错误*/
    console.log(arr[0]);

类类型接口:对类的约束

interface Animal {
    name: string;
    eat(str: string): void;
}
class Dog implements Animal {
    name: string;
    constructor(name: string) {
        this.name = name;
    }
    eat() {
        console.log(this.name + '吃粮食')
    }
}
var d = new Dog('小黑');
d.eat();
class Cat implements Animal {
    name: string;
    constructor(name: string) {
        this.name = name;
    }
    eat(food: string) {
        console.log(this.name + '吃' + food);
    }
}
var c = new Cat('小花');
c.eat('老鼠');

接口可以继承接口

 interface Animal{
        eat():void;
    }
    interface Person extends Animal{
        work():void;
    }
    class Web implements Person{
        public name:string;
        constructor(name:string){
            this.name=name;
        }
        eat(){
            console.log(this.name+'喜欢吃馒头')
        }
        work(){
            console.log(this.name+'写代码');
        }  
    }
    var w=new Web('小李');
    w.eat();
类中的接口继承
interface Animal {
    eat(): void;
}
interface Person extends Animal {
    work(): void;
}
class Programmer {
    public name: string;
    constructor(name: string) {
        this.name = name;
    }
    coding(code: string) {
        console.log(this.name + code)
    }
}
class Web extends Programmer implements Person {
    constructor(name: string) {
        super(name)
    }
    eat() {


        console.log(this.name + '喜欢吃馒头')
    }
    work() {


        console.log(this.name + '写代码');
    }


}
var w = new Web('小李');
w.coding('写ts代码');

泛型：可以支持不特定的数据类型   要求：传入的参数和返回的参数一致

function getData<T>(value: T): T {
    return value;
}
getData<number>(123);
getData<string>('1214231');
getData<number>('2112');       /*错误的写法*/
function getData<T>(value: T): any {
    return '2145214214';
}
getData<number>(123);  //参数必须是number
getData<string>('这是一个泛型');

泛型类

class MinClas<T>{
    public list: T[] = [];
    add(value: T): void {
        this.list.push(value);
    }
    min(): T {
        var minNum = this.list[0];
        for (var i = 0; i < this.list.length; i++) {
            if (minNum > this.list[i]) {
                minNum = this.list[i];
            }
        }
        return minNum;
    }
}
var m1 = new MinClas<number>();   /*实例化类 并且制定了类的T代表的类型是number*/
m1.add(11);
m1.add(3);
m1.add(2);
alert(m1.min())
var m2 = new MinClas<string>();   /*实例化类 并且制定了类的T代表的类型是string*/
m2.add('c');
m2.add('a');
m2.add('v');
alert(m2.min())