TypeScript类

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› TypeScript›TypeScript教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

一，静态属性

TS中实例不能访问静态属性，只能通过类访问，但是Java中是可以访问的。

let d:Dog = new Dog("wangwang");
console.log(Husky.food)
console.log(Dog.food)
console.log(d.food) //Property 'food' is a static member of type 'Dog'

二，抽象类

ES中没有抽象类，TS扩展了。抽象类可以抽离出事物的共性，有利于代码复用。

只能被继承，不能实例化的类。

abstract class Animal{
    //抽象类中可以有具体实现了的方法，实现方法的复用
    eat(){
        console.log('eat');
    }
    //抽象类中不指定方法的具体实现，抽象方法
    abstract sleep(): void
}

// let animal = new Animal() //无法创建抽象类的实例。
class Dog2 extends Animal{
    constructor(name:string){
        super();
        this.name = name;
    }
    name:string;
    run(){}
    sleep(){
        console.log("Dog sleep")
    }
}

let dog2 = new Dog2("wangwang");
dog2.eat();
dog2.sleep();

抽象类和多态，运行时绑定

class Cat extends Animal{
    sleep(){
        console.log("Cat sleep")
    }
}

let cat = new Cat();
let animals:Animal[]=[dog2,cat];
animals.forEach(i=>{
    i.sleep()
})

通过返回this实现链式调用，在继承中也适用

//链式调用 this类型
class WorkFlow{
    step1(){
        return this;
    }
    step2(){
        return this;
    }
}

new WorkFlow().step1().step2()

class MyFlow extends WorkFlow{
    next(){
        return this;
    }
}
new MyFlow().next().step1().next().step2()

三，接口

接口继承接口，接口的继承可以抽离出可重用的接口，也可以将多个接口合并成一个接口

interface Human{
    name:string;
    eat():void;
}

class Asian implements Human{
    constructor(name:string){
        this.name=name
    }
    name:string
    eat(){

    }
}
//接口的继承 
interface Man extends Human{
    run():void
}

interface Child{
    cry():void
}

interface Boy extends Man, Child{}

let boy:Boy ={
    name:'',
    run(){},
    eat(){},
    cry(){}
}

总结：

ts类中只能继承一个父类
ts类中可以实现多少接口，使用（，）号分隔
ts接口中可以继承多个接口，使用（，）号分隔

接口继承多个接口的前提是不能有冲突，即被继承的接口互相之间的属性和方法定义不能冲突。

接口继承类，相当于把类的成员都抽象出来，只有类的结构，没有具体实现

//接口继承类
class Auto{
    state =1
    // private state2 = 0
}

interface AutoInterface extends Auto{

}

//实现AutoInterface只需要有state
class C implements AutoInterface{
    state =1;
}
//Auto的子类也可以实现AutoInterface接口
class Bus extends Auto implements AutoInterface{

}

//接口在抽离类的成员的时候不仅抽离了公共成员而且抽离了私有成员，受保护成员

接口直接相互继承，实现接口复用
类之间相互继承，实现方法和属性复用
接口只能约束类的共有成员
接口从类抽离的时候，可以抽离出共有成员，私有成员和受保护的成员

四，泛型

希望一个函数或者一个类可有支持多种数据类型，有很大的灵活性。

泛型；不预先确定的数据类型，具体的类型在使用的时候才能确定。

1，泛型函数

// function log(value:any):any{
//     console.log(value);
//     return value;
// }

//用泛型定义函数
//保证输入参数和返回值是一致的
function log<T>(value:T):T{
    console.log(value);
    return value;
}

log<string[]>(['a','b','c']);
log(['a','b'])

//用泛型定义函数类型
type Log = <T>(value:T)=>T

let myLog:Log = log //实现直接指定为上面的log函数

2，泛型接口

interface Log<T>{
    (value:T):T
}

let myLog :Log<number>=log //必须指定泛型的类型
myLog(1)

interface Log<T=string>{ //可以指定泛型默认类型为string
    (value:T):T
}

3，泛型类

//泛型类
class LogClass<T>{
    // static count:T; //泛型不能用在静态成员上 //提示静态成员不能引用类型参数
    run(value:T){
        console.log(value);
        return value;
    }
}

//实例化的时候传入类型
let logClass = new LogClass<number>();
logClass.run(1)
// logClass.run('a') //报错，不能把'a'赋值给number类型
//实例化的时候不传入类型参数
let logClass2 = new LogClass(); 
logClass2.run({a:1}) //参数可以是任意类型

4，泛型约束

下面log会提示类型T上没有Length属性，怎样解决这个问题？

用泛型约束

//泛型约束

//预定义一个接口,有length属性
interface Length{
    length:number
}

//让T去继承接口Length，表示T受到了一定的约束
function Log<T extends Length>(value:T):T{
    console.log(value,value.length);
    return value;
}

Log([1,2]) //数组有Length属性
Log('abc') //字符串有Length属性
log({length:3}) //对象有length属性