TypeScript的入门与放弃(4)之 接口

132 阅读2分钟

啥子是接口呢!咦,我只在java中写过接口。在TypeScript中接口是一系列抽象方法的声明,是一些方法特征的集合,这些方法都应该是抽象的,需要由具体的类去实现,然后第三方就可以通过这组抽象方法调用,让具体的类执行具体的方法。

1. 接口的使用

interface Person {
    name: string;
    age: number; 
} 
let ms: Person = {
    name: 'ms', 
    age: 26 
};

定义的变量比接口少了一些属性是不允许的,多一些属性也是不允许的,赋值的时候,变量的形状必须和接口的形状保持一致

2. 接口的只读属性

interface Person { 
    readonly name: string;
    age?: number;
}
let ms: Person = {
    name: 'ms', 
    age: 26 
};
ms.name = '123'//无法分配到 "name" ,因为它是只读属性

2. 任意属性

有时候我们希望一个接口中除了包含必选和可选属性之外,还允许有其他的任意属性,这时我们可以使用 索引签名 的形式来满足上述要求

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

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

一旦定义了任意属性,那么确定属性和可选属性的类型都必须是它的类型的子集

interface Person {
    name: string;
    age?: number;//类型“number | undefined”的属性“age”不能赋给“string”索引类型“string”。
    [propName: string]: string;
}

let ms: Person = { 
    name: 'ms',
    age: 25,
    gender: 'male'
};
//不能将类型“{ name: string; age: number; gender: string; }”分配给类型//“Person”。
//属性“age”与索引签名不兼容。
//不能将类型“number”分配给类型“string”。

所以做出调整一个接口中只能定义一个任意属性。如果接口中有多个类型的属性,则可以在任意属性中使用联合类型

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

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