Typescript学习笔记

ts数据类型

1,boolean

var flag:boolean=true

2,number

var num:number=123

3,数组类型

var arr1:number[]=[1,2,3]
var arr2:Array<number>=[1,2,3]
var arr3:any[]=[1,"2",true]

4,string

var string:string="1212"

5,元祖类型（tuple）

let arr:[number,string]=[1,"2"]

6,枚举类型

enum Flag1{success=1,error=2}
let s:Flag1=Flag1.success;
console.log(s)   //1

enum Flaf2{blue,red};
let s:Flag2=Flag2.red;
console.log(s)   //1 如果为赋值，则为下标

7,任意类型 es5中未指定的类型（object）

var num:any=123/'123'/true

8, null和undefined

var num:undefined;
console.log(num)   //不报错

var num:number;
console.log(num)  //报错

9,void没有任何类型

function(){
    console.log('此函数没有任何返回值')
}

10,never类型（不常用）

11,函数定义

函数声明
function getInfo(name:string,age:number):string{
    return name+'--'+age
}

匿名函数
var getInfo=function(name:string,age:number):string{
     return name+'--'+age
}

//可选参数
function getInfo(name:string,age?:number){

}

//默认参数
function getInfo(name:string,age:number=20){

}

//剩余参数
function getInfo(...result:number[]){

}
console.log(getInfo([1,2,3,4]))

//函数重载  详见百度

//匿名函数（同es6）

12,TS中类的定义

//es5
    function Persion(name){
        this.name=name;
        this.run=function(){
            alert(this.name)
        }

    }

//ts中

class Persion{
    name:string;   //省略public
    constructor(name:string){  //构造函数，实例化的时候会处罚的方法
        this.name=name
    }

    run():void{
        alert(this.name)
    }
}

13,ts中类的继承

class Person{
    name:string,
    constructor(name:string){
        this.name=name
    }
    run():void{
        alert(this.name)
    }

class Web extends Person{
    constructor(name){
        super(name)   //初始化父类的构造函数
        }
    }
}

//父类和子类有同样的方法则会调用子类的方法

14,修饰符

• public：公有，在类和子类，类外都能访问
• protected：保护，在类，子类中都能访问
• provate：私有，在类中可以访问，子类和类外都不能访问

15,TS中的静态属性和静态方法

• 先来了解一下ES5中的静态属性和静态方法

function Persion(age){
    this.age=age;   //实例属性
    this.run=function(){
        //实例方法
    }
}
Persion.name='xxx';  //静态属性
Persion.play=function(){
    //静态方法
}
//在jq中会用到
function $(element){
    return new Base(element)

}
function Base(element){
    this.el=document.getElementBy(element);
    this.css=function(attr,value){
        this.el.style.attr=value
    }
}
//对应jq方法：$("button").css("color",'red')

• ts中的静态属性和静态方法

class Person{
    name:string;
    static age:number=12;
    constructor(name:string,age:number){
        this.name=name;
        this.age=age;
    },
    run():void{
        alert(this.name)
    }
    static play():number{   //静态方法
        return Persion.age
    }
}
console.log(Person.age)  //12
console.log(Persion.play())

16,多态：父类定义一个方法不去实现，让继承他的子类去实现，不同的子类有不同的实现方法(多态属于继承)

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+'吃鱼'
    }
}

17，抽象方法和抽象类

• 抽象类:提供其他类继承的基类，不能够被实例化
• 用abstract关键字定义抽象类和抽象方法，抽象类中的抽象方法不包含具体实现并且必须在派生类中实现
• abstract抽象方法必须放在抽象类里

// 抽象类和抽象方法用来定义标准，标准animal这个类要求她的子类必须包含eat方法

abstract class Animal{
    name:string:name;
    constructor(name:string){
        this.name=name;
    }
    abstract eat():any;// 抽象方法只能出现在抽象类中
}

new Animal  //错误写法，不能够被实例化

class Dog extend Animal{
    constructor()
}

18,接口

定义

接口是一种规范的定义，他定义了行为和动作的规范，在程序设计里面接口起到一种限制和规范的作用，接口定义了某一批类所需要遵守的规范，接口不关心这些类的内部状态数据，也不关心这些类里方法的实现细节，她只规定这批类里必须提供某些方法，提供这些方法的类就可以满足实际需要，typescript中的接口类似于java，同时还增加了更灵活的接口类型，包括属性函数可索引和类等

---

• 属性接口（对json的约束）

// TS中定义方法传入参数

function printLabel(labelInfo:{label:string}){
   console.log('print label')
}

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

interface FullName{   //传入的参数有且必须是firstName和secondName
   firstName:string;
   secondName:string;
   thirdName?:string;   //接口可选属性，可传可不传

}
function printName(name:FullName){
   //必须传入对象 firstName secondName
   console.log(name.firstName)
}

• 举个例子ajax

inerface Config{
    type:string;
    url:string;
    data?:string;
    dataType:string;
}
function ajax(config:Config){
    var xhr=new XMLHttpRequest();
    xhr.open(config.type,config.url,true);
    xhr.send(config.data);
    xhr.onreadystatechange=function(){
        if(xhr.readyState==4&&xhr.status==200){
            console.log('成功')
        }
    }
}

• 函数类型接口：对方法传入的参数以及返回值进行约束 批量约束

//加密的函数类型接口
    interface encrypt{
        (key:string, :string):string;
    }

    var md5:encrypt=function(key:string,value:string){  //传入的参数格式复合上面接口的约束
        //模拟操作
        return key+value
    }

    console.log(md5('name',"张三")),


    var sha1:encrypt=function(key:string,value:string){
        return key+'---'+value
    }

    console.log(sha1('李四',"212"))

• 可索引接口，数组、对象的约束（不常用）

//ts中定义数组的方式
var arr:number[]=[1221,21212];

---

//可索引接口写法一 对数组的约束
interface UserArr{
    [index:number]:string
}

var arr:UserArr=["12121",'212121'];
console.log(arr[0])   //'12121'

//可索引接口写法二   对对象的约束
interface UserObj{
    [index:string]:string
}

var arr:UserObj={name:"zhangsan',age:"213"};

• 类类型接口：对类的约束 和抽象类有点类似

interface Animal{
//整合属性类型接口和方法类型借口
    name:'string',
    eat(str:string):void;   
}

class Dog implements Animal{
    name:string;
    constructor(name:string){
        this.name=name;
    }
    eat():void{
        console.log(this.name+"吃粮食")
    }
}

var d=new Dog("小黑")；
d.eat();  //小黑吃粮食

19，接口的扩展、接口的继承

interface Animal{
    eat():void;
}

//人继承Animal的接口
interface Persion 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 Persion{   //父类所有规范都要实现
    //  public name:string;
     constructor(name:string){
         super(name)
     }
        eat(){
            console.log(this.name+"--"+"喜欢吃馒头")
        }  
        work(){
        console.log(this.name+"写代码")
    }  
 }

20，泛型

• 泛型的定义
• 泛型函数
• 泛型类
• 泛型接口

/*
泛型，软件工程中，我们不仅要创建一致的定义良好的API，同时也要考虑可重用性。组建不仅能够支持当前的数据类型，同事也能支持未来的数据类型，这在创建大型系统时为你提供了十分灵活的功能。

在像C#和JAVA这样的语言中，可以使用泛型来创建可重用的组建，一个组件可以支持多种类型的数据。这样用户就可以以自己的数据类型来使用组件。

通俗理解，泛型就是解决类 接口 方法的复用性 以及对不特定数据类型的支持
*/

//只能返回string类型的数据

function getData(value:string):string{
    return value;
}

function getData1(value:number):number{
        return value;
}

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

//定义一个泛型  T表示泛型，具体什么类型是调用这个方法的时候决定的
function getData<T>(value:T):T{   //也可以指定返回any类型
        return value;
}

getData<number>(123);  //限制传入的参数是number，则返回的参数也必须是number 


//泛型类：比如有个最小堆的算法，需要同时支持返回数字和字符串两种类型，通过类的泛型来实现

class MinClass{
    publc list:number[]=[];
    add(num:number){
        this.list.push(num)
    }
    min(){
           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; 
    }
}
//上面的类是只能返回number

//定义一个类的泛型
class MinClass<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; 
    }
}

//实例化类，并且制定了类的T代表的类型是number
var m1=new MinClass<number>();
m1.add(1);
m1.add(3);
m1.add(2);

alert(m1.min());


//泛型接口

interface ConfigFn{
    <T>(value:T):T;
}

var getData:ConfigFn=function<T>(value:T):T{
    return value;
}

getData<string>("张三")