[TypeScript][文档]接口
一、理解
接口类似于一种规则,用来约束传递参数的一方(实参)和使用参数的一方(形参)
对于函数实参,必须符合接口的规则:包含相应名称和类型的数据
而对于形参一方,则只能使用接口中定义了的字段了,
即对于函数而言,只能“看见”接口中定义好的属性,而传递过来的实参也必须包含这些属性,这样就形成了一种“规则”或者“约束”。
interface LabelledValue { label: string; } function printLabel(labelledObj: LabelledValue) { console.log(labelledObj.label); console.log(labelledObj.size); // 错误,只能使用接口中存在的属性,即label } let myObj = {size: 10, label: "Size 10 Object"}; // 对于多出来的属性size我们不关心,只要myObj实现了接口里面的属性就可以了 printLabel(myObj);
二、接口属性
1.可选属性
interface SquareConfig { color?: string; width?: number; }
2.只读属性
赋值后就不能改变其值
interface Point { readonly x: number; readonly y: number; } let p1: Point = { x: 10, y: 20 }; p1.x = 5; // 报错,不能再赋值了
【补充】:ReadonlyArray<T>
类型——只读数组
let a: number[] = [1, 2, 3, 4];
let ro: ReadonlyArray<number> = a;
3.额外属性检查——仅对 对象字面量
对象字面量会被特殊对待而且会经过 额外属性检查,当将它们赋值给变量或作为参数传递的时候。 如果一个对象字面量存在任何“目标类型”不包含的属性时,你会得到一个错误。
也就是说,对象字面量必须和接口的结构分毫不差,不能多,也不能少。
三、函数类型接口
相当于定义函数的规则:参数个数和类型,返回值类型(参数名称不必相同)
interface SearchFunc { (source: string, subString: string): boolean; } let mySearch: SearchFunc; mySearch = function(source: string, subString: string) { let result = source.search(subString); return result > -1; }
四、可索引类型接口
定义一种可索引的类型数据的规则:索引的类型,值的类型
interface StringArray {
[index: number]: string;
}
let myArray: StringArray;
myArray = ["Bob", "Fred"];
五、类类型接口
用来明确的强制一个类去符合某种契约——公共属性,公共方法
interface ClockInterface { currentTime: Date; setTime(d: Date); } class Clock implements ClockInterface { currentTime: Date; setTime(d: Date) { this.currentTime = d; } constructor(h: number, m: number) { } }
【疑】类实例的接口未搞懂?
六、继承
1.继承接口
interface Shape { color: string; } interface PenStroke { penWidth: number; } interface Square extends Shape, PenStroke { sideLength: number; } let square = <Square>{}; square.color = "blue"; square.sideLength = 10; square.penWidth = 5.0;
2.继承类
当接口继承了一个类类型时,它会继承类的成员但不包括其实现。 就好像接口声明了所有类中存在的成员,但并没有提供具体实现一样。 接口同样会继承到类的private和protected成员。 这意味着当你创建了一个接口继承了一个拥有私有或受保护的成员的类时,这个接口类型只能被这个类或其子类所实现(implement)
class Control { private state: any; } interface SelectableControl extends Control { select(): void; } class Button extends Control implements SelectableControl { select() { } } class TextBox extends Control { select() { } } // 错误:“Image”类型缺少“state”属性。 class Image implements SelectableControl { select() { } }