typescript-- interface

接口

类似于对象类型字面量，接口类型也能够表示恣意的对象类型，但是接口类型能够给对象类型定名以及定义类型参数。接口类型无法表示原始类型。
接口声明只存在于编译阶段，在编译以后的JavaScript中不包含任何接口。
接口声明

示例

1. interface InterfaceName {
2.     TypeMember;
3.     TypeMember;
4.     ...
5. }

复制代码

属性签名

示例

1. PropertyName: Type;

复制代码

1. interface Point {
2.     x:number;
3.     y:number;
4. }

复制代码

调用签名

示例

1. (ParameterList): Type

复制代码

1. interface ErrorConstructor {
2.     (message?: string):Error;
3. }

复制代码

构造签名

示例

1. new (ParameterList): Type

复制代码

1. interface ErrorConstructor {
2.     new (message?: string): Error;
3. }   

复制代码

方法签名

示例

1. PropertyName(ParameterList):Type
2. PropertyName: {(ParamterList): Type}
3. PropertyName: (ParameterList) => Type

复制代码

1. interface Document {
2.     getElementById(elementId: string): HTMLElement | null;
3. }
4. interface A {
5.     f(x: string):string // 方法签名
6. }
7. interface B {
8.     f: {(x:boolean):string} // 属性签名和对象类型字面量
9. }
10. interface C {
11.     f: (x: boolean) => string; // 属性签名和函数类型字面量
12. }
13. const f = 'f'
14. interface D {
15.     [f](x:boolean):string // 方法签名中的属性名可以为可计算属性名
16. }

复制代码

索引签名

字符串索引签名的语法

1. [IndexName: string]:Type // IndexName必须为属性值

复制代码

1. interface A {
2.     [prop: string]: number
3. }

复制代码

一个接口中最多可以定义一个字符串索引签名，字符串索引签名会约束对象类型种种那个所有属性的类型

1. interface A {
2.     [prop:string]: number;
3.     a:number;
4.     b:0;
5.     c:1 | 2
6. }

复制代码

数值索引签名

1. [IndexName: number]: Type; //IndexName必须为数值

复制代码

1. interface A {
2.     [prop:number]: string
3. }
4. const obj: A = ['a','b','c']
5. obj[0]// string

复制代码

若接口中同时存在字符串索引和数值索引签名，数值索引签名必须能够赋值给字符串索引签名的类型，在JavaScript中，对象的属性名只能是字符串(Symbol)，虽然JavaScript也会允许数字等其他值为对象的索引，但是终极会转换为字符串类型。

1. interface A {
2.     [prop:string]: number;
3.     [prop: number]: 0 | 1;
4. }
5. //交换字符串索引签名和数值索引签名的类型，则会产生编译错误
6. interface B {
7.     [prop: string]: 0 | 1;
8.     [prop:number]: number //编译错误
9. }

复制代码

可选属性与方法

默认环境下，接口中属性签名和方法签名定义的对象属性都是必选的。

1. interface Foo{
2.     x: string
3.     y(): number
4. }
5. const a: Foo = {x: 'hi'} // 缺少属性y
6. const b: Foo = {y(){return 0}} // 缺少属性x
7. const c: Foo = {
8.     x: 'hi',
9.     y() {return 0}   
10. }

复制代码

1. interface Foo{
2.     x?: string;
3.     y?: number;
4. }

复制代码

假如接口中定义了重在方法，所有重载的方法签名必须同时为必选或者是可选的。

1. interface Foo{
2.     a(): void;
3.     a(x:boolean):boolean;
4.     b?():void;
5.     b?(x:boolean):boolean;
6. }
7. interface Bar {
8.     a(): void;
9.     a?(x:boolean):boolean
10.     // 编译错误，重载签名必须为全部为必选的或者可选的。
11. }

复制代码

只读属性与方法

1. interface A {
2.     readonly a: string;
3.     readonly [prop: string]: string;
4.     readonly [prop: string]: string;
5. }

复制代码

若接口中定义了只读的索引签名，那么接口类型中的所有属性都是只读属性。

1. interface A {
2.     readonly [prop: string] : number;
3. }
4. const a: A = {x: 0}

复制代码

假如接口中及定义了只读索引签名，又定义了非只读的属性签名，那么非制度的属性签名定义的属性依然是非制度的，除此之外，所有的属性都是只读的
接口的继承

接口可以继承其他的对象类型。

1. interface Shape {
2.     name: string
3. }
4. interface Circle extends Shape {
5.     radius: number
6. }

复制代码

一个接口可以同时继承多个接口，父接口名之间使用逗号分隔

1. interface Style {
2.     color: string
3. }
4. interface Shape {
5.     name： string
6. }
7. interface Circle extends Style, Shape {
8.     radius: number
9. }

复制代码

• 假如子接口和父接口之间存在着同名的类型成员，那么子接口中的属性成员具有更高的优先级。
  
• 假如仅是多个父接口之间存在同名的类型成员，而子接口自己没有该同名类型成员，那么父接口中同名类型成员的类型必须是完全相同的
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。