是什么？
TODO
用法
先看个简单的🌰
interface Student {
name: string;
}
function getStudent(student: Student) {
console.log(student.name);
}
getStudent({ name: 'meili'});
getStudent({ name: 'meili', sex: 'nv'}); 有额外的参数时，编译会报错。
在这个🌰中，定义了Student接口和getStudent方法，规定getStudent方法的参数符合student接口规范。
有额外的参数时编译会报错.png
类型：
1.可选属性(?)：当一些属性只有在某些条件下存在时，就会用到可选属性。
interface Student {
name: string;
sex?: string;
}
getStudent({ name: 'meili', sex: 'nv'}); // 此时编译不再报错
使用可选属性的好处：能预定义可能存在的属性；可以捕获引用了不存在的属性时的错误。
2.只读属性(readonly)：只能在对象刚刚创建的时候修改其值。
interface Student {
readonly name: string;
}
let stu: Student = { name: 'meili'};
stu.name = 'ltt'; // 会报错
可通过ReadonlyArray<T>创建不可修改的数组：
let a: number[] = [1, 2, 3];
let b: ReadonlyArray<number> = a;
b[0] = 0; // 报错
修改不可变数组的元素报错.png
readonly与const的应用场景：不可变属性用
readonly，不可变变量用const。
3.额外的属性检查
在开头的🌰中，因为传了额外的参数，所以导致编译报错，所以怎么避开额外属性的检查呢？
- 类型断言：
interface Student {
name: string;
}
function getStudent(student: Student) {
console.log(student.name);
}
getStudent({ name: 'meili', age: 0.5 } as Student) // 使用as类型断言避开额外属性检查
- 字符串索引签名（推介）：前提是我们确定这个对象具有作为特殊用途的额外属性。
interface Student {
name: string;
sex?:string;
[propName: string] : any;
}
function getStudent(student: Student) {
console.log(student.sex);
}
getStudent({ name: 'meili', age: 12 }); // age为额外属性
- 将对象赋值给变量
interface Student {
name: string;
}
let stu = {name: 'lily', age: 12};
getStudent(stu);
大多数额外类型检查的错误是bug，所以大多数时候我们是不需要绕开额外类型检查的。
思考：避开额外类型检查和可选类型该怎么抉择？
4.函数类型：首先我们需要给接口定义一个调用签名
interface SearchFunc {
(source: string, subString: string): boolean;
}
使用函数类型：
interface SearchFunc {
(source: string, subString: string): boolean;
}
let mySearch: SearchFunc;
mySearch = function(source: string, subString: string): boolean { // function(src, subStr) {
let num = source.indexOf(subString);
return num > -1;
}
mySearch('abcd', 'abc');
函数的参数名不必与接口中定义的参数名一致，只要对应位置上的类型能匹配的上即可；
函数参数类型和返回值类型不是必须指定的，ts系统会做类型推断。
5.可索引的类型：用来描述通过索引得倒的类型
索引签名：描述了对象索引的类型，和索引得到的返回值类型
interface StringArray {
[index: number]: string;
}
ts支持两种索引签名：数字索引和字符串索引。也可同时使用两种索引。
- 数字索引：
interface StringArray {
[index: number]: string;
}
let strArr: StringArray = ['a', 'b'];
let str: string = strArr[0];
- 字符串索引：
interface StringArray2 {
[x: string]: number;
}
...待补充
字符串索引签名能过很好的描述dictionary模式，会确保所有属性与返回值类型相匹配。
interface NumberDictionary {
[index: string]: number;
length: number; // 可以，length是number类型
name: string // 错误，`name`的类型与索引类型返回值的类型不匹配
}
6.类类型：接口描述了类的公共部分，不会帮你检查类是否具有某些私有成员。而类具有两个类型：静态部分的类型和实例的类型，当一个类去实现一个接口时（会报错），只对其实例部分进行检查，而constructor属于静态部分，不在检查的范围内。
interface ClockConstructor {
new (hour: number, minute: number);
}
class BClock implements ClockConstructor {
constructor(h: number, m: number) {};
}
报错.png
用类去实现类类型接口如⬇️：直接操作类的静态部分
interface ClockConstructor {
new (hour: number, minute: number): ClockInterface;
}
interface ClockInterface {
tick();
}
function createClock(clock: ClockConstructor, h: number, m: number): ClockInterface {
return new clock(h, m);
}
class AClock implements ClockInterface {
constructor(h: number, m: number) {}
tick() {
console.log('tick');
}
}
let clock = createClock(AClock, 12, 0);
思考：AClock类实现ClockInterface接口后，为什么符合ClockConstructor接口类型。
7.继承接口：接口可以继承接口，一个接口可继承多个接口。这就可以将一个接口中的成员赋值到另一个接口中。
interface Shape {
width: number;
}
interface rectangle {
color: string;
}
interface Square extends Shape, rectangle {
area: number;
}
let square = <Square>{};
square.width = 10;
square.color = 'red';
square.area = 100;
8.混合类型：当你希望一个对象同时具有多种类型，就可以定义一个混合类型的接口。
interface Counter {
(start: number): string;
interval: number;
reset(): void;
}
function getCounter(): Counter {
let counter = <Counter>function (start: number){ };
counter.interval = 123;
counter.reset = function (){ };
return counter;
}
let countor = getCounter();
countor(10);
countor.reset();
countor.interval = 10;
9.接口继承类：当接口继承一个类类型时，它会继承类的成员但不包括实现，接口同样会继承到private和protected成员，这意味着当你继承了一个包含private和protected成员的类时，这个接口类型只能由该类或其子类实现。
网友评论