typescript-接口

简介

接口的作用是为值的结构类型命名，关键字是interface，

可选属性

1、可选属性名字定义后加一个问号（?）符号

2、可选属性对可能存在的属性进行预定义

只读属性

1、属性名前用readonly来指定只读属性。

2、只读属性只能在对象刚创建时进行值得初始化，后期是不可修改的。

3、ReadonlyArray类型的数组不能赋值给其他的变量，可以使用类型断言as重写后再进行赋值，如下所示

let otherArr = readonlyArr as number[];

4、readonly和const的区别，作为变量使用const，做为属性使用readonly.

额外属性检查

1、如果赋值过程中对象出现了接口中不存在的属性则会报错。

2、如果想要传递额外的属性有三种方法如下：

（1）as类型断言，实例如下：

interface theInterface{
    item1: number
}

function myFn(obj:theInterface): void{
    //...
}
myFn({ item1: 100, item2: 0.5 } as theInterface);

（2）字符串索引签名，实例如下：

interface theInterface{
    item1: number；
    [propName:string]:any;  //我是字符串索引签名
}

function myFn(obj:theInterface): void{
    //...
}
myFn({ item1: 100, item2: 0.5 });

（3）将要赋的对象赋值给一个变量，用变量再去赋值，实例如下：

interface theInterface{
    item1: number；
    [propName:string]:any;  //我是字符串索引签名
}

function myFn(obj:theInterface): void{
    //...
}

let theobj = { item1: 100, item2: 0.5 };
myFn(theobj);

函数类型

1、函数类型接口语法如下:

interface SearchFunc { 
    (source: string, subString: string): boolean; 
}

2、函数定义的参数名不需要和接口里定义的名字相匹配，只要保证在调用函数时对应位置上的参数类型一致即可。为方便习惯保持一致，省的乍一看出现“我在哪里”的情况。

3、函数定义时可以不用指定参数类型，因为函数被赋值给了已经指定接口的变量，typescript类型系统会推断出来。返回值也可以不指定，可以通过返回值类型进行推断。不习惯这种不受掌控的情况，没有安全感，习惯将参数、返回值类型都指定。

可索引的类型

1、索引签名：可以是字符串和数字。

2、同一个索引签名分别对应两种不同的索引签名类型可以同时存在，只是数字索引的返回值必须是字符串索引返回值类型的子类型，是因为javascript会将number转换为string再去索引。

3、索引签名类型存在时，已存在同类型属性的返回值必须是索引签名返回值的子类型。

4、可以将索引签名设置为只读，可以防止给索引赋值。

类类型

实现接口

1、接口可以用来明确强制一个类符合接口定义的结构类型。

2、接口中定义方法，必须在类里实现它（即类里必须有接口中定义的同名、同参数、同返回值得函数），使用implements关键字。

3、接口描述的是类的公共部分，不会检查类是否具有某些私有成员。

类的静态部分与实例部分

1、一个类包括静态部分和实例部分，构造函数属于类的静态部分。

2、当一个类实现了一个接口时，只对其实例部分进行类型检查。

继承接口

1、一个接口可以通过继承从另一个接口里复制成员，实现接口重用。继承关键字是extends。

2、一个接口可以继承多个接口，多个接口之间使用逗号（,）分隔。

混合类型

1、一个对象可以同时作为函数和对象使用，并带有额外的属性，如下方所示：

interface Counter { 
    (start: number): string; 
    interval: number; 
    reset(): void; 
}

使用JavaScript第三方库是会用到这种类型，目前还没遇到，后期有实践过的实例会继续补充。

接口继承类

1、接口继承一个类类型时，只继承类的成员但不包括其实现，接口会继承到类的private和protected成员。只不过继承了有这些成员的接口只能被这个类的子类所实现。

参考地址

https://www.tslang.cn/docs/handbook/interfaces.html