美文网首页
TS基础(五)接口

TS基础(五)接口

作者: Viewwei | 来源:发表于2020-12-22 18:56 被阅读0次

TS中接口是用来定义对象的类型。TS中接口和泛型属于十分重要的类型。
在面向对象语言中,接口它是对行为的抽象,行动由类(Class)去实现(Implement),一个类可以实现多个接口

接口(interface)定义对象的类型

interface Person {
    name: string;
    age: number;
}

let tom: Person = {
    name: 'Tom',
    age: 25
};

使用接口定义对象的时候,定义的类型比接口少是不允许的,多一些属性也是不允许的

interface Person {
    name: string;
    age: number;
}

let tom: Person = {
    name: 'Tom'
};

// index.ts(6,5): error TS2322: Type '{ name: string; }' is not assignable to type 'Person'.
//   Property 'age' is missing in type '{ name: string; }'.

interface Person {
    name: string;
    age: number;
}

let tom: Person = {
    name: 'Tom',
    age: 25,
    gender: 'male'
};

同时接口允许使用可选参数,即在参数后面加上?,表示这个参数可以没有

interface Person {
    name: string;
    age?: number;
}

let tom: Person = {
    name: 'Tom',
    age: 25
};

有时候,需要一个接口允许有任意的属性,可以使用以下方法

interface Person {
    name: string;
    age?: number;
    [propName: string]: any;
}

let tom: Person = {
    name: 'Tom',
    gender: 'male'
};

使用 [propName: string] 定义了任意属性取 string 类型的值。
注意:一旦定义了任意属性,那么确定属性和可选属性的类型必须是它类型的子类.一般情况下,可以设置任意属性的值类型设置为任意类型(any)

interface Person {
    name: string;
    age?: number;
    [propName: string]: string;
}

let tom: Person = {
    name: 'Tom',
    age: 25,
    gender: 'male'
};

// index.ts(3,5): error TS2411: Property 'age' of type 'number' is not assignable to string index type 'string'.
// index.ts(7,5): error TS2322: Type '{ [x: string]: string | number; name: string; age: number; gender: string; }' is not assignable to type 'Person'.
//   Index signatures are incompatible.
//     Type 'string | number' is not assignable to type 'string'.
//       Type 'number' is not assignable to type 'string'.

接口也可以使用修饰符号修饰。readonly 代表只读属性

interface Person {
    readonly id: number;
    name: string;
    age?: number;
    [propName: string]: any;
}

let tom: Person = {
    id: 89757,
    name: 'Tom',
    gender: 'male'
};

tom.id = 9527;

// index.ts(14,5): error TS2540: Cannot assign to 'id' because it is a constant or a read-only property.

注意:只读的约束发生在给对象第一次赋值的时候,而不是只读属性赋值的时候

interface Person {
    readonly id: number;
    name: string;
    age?: number;
    [propName: string]: any;
}

let tom: Person = {
//已经赋值过
    name: 'Tom',
    gender: 'male'
};

tom.id = 89757; //重复赋值

// index.ts(8,5): error TS2322: Type '{ name: string; gender: string; }' is not assignable to type 'Person'.
//   Property 'id' is missing in type '{ name: string; gender: string; }'.
// index.ts(13,5): error TS2540: Cannot assign to 'id' because it is a constant or a read-only property.

约束类型构造类型,使用new来约束

new():A :表示接受一个构造参数

 class  AnimalA {
        constructor(public name:string) {
            
        }
    }
    interface withAnimal {
        new (c:string):AnimalA //表示该接口中必须需要一个构造函数
    }
    function createAnimal(clzz:withAnimal,name:string){
        return new clzz(name)
    }
    createAnimal(AnimalA,"zw")

相关文章

网友评论

      本文标题:TS基础(五)接口

      本文链接:https://www.haomeiwen.com/subject/klqdnktx.html