有关接口概念之前的 javascript 新方向中我们提及到了 javascript 作为一门动态语言本身没有接口的概念。但是接口好处是不言而喻,javascript 要是想干大事就少不了接口。在 javascript 中接口是定义。
我们的第一个接口,函数 printLabel 接受参数,对参数有一定要求,也就是参数对象需要有 label 属性。当然传入的对象参数可以除了有 label 属性也可以有其他属性,但是必须至少有一个 label 属性。
第一个接口
function printLabel(labelledObj: { label: string }) { console.log(labelledObj.label); }let myObj = {size: 10, label: "Size 10 Object"}; printLabel(myObj);
我们定义 interface 接口 LabelledValue ,主要来定义一个数据结构,然后将参数类型定义为 LabelledValue ,这样就确保 printLabel 函数接受参数为一个至少具有 label 属性的对象。这样显式定义一个具有 label 的对象。
interface LabelledValue { label: string; }function printLabel(labelledObj: LabelledValue) { console.log(labelledObj.label); }let myObj = {size: 10, label: "Size 10 Object"}; printLabel(myObj);
可选属性
当然我们定义接口,有时候没有必要实现每一个属性,
这里定义的 SquareConfig 接口与之前定义接口区别不大,不过在属性名称后面多了 ? 来表示该属性为可选属性。
interface SquareConfig { color?: string; width?: number; }function createSquare(config: SquareConfig): {color: string; area: number} { let newSquare = {color: "white", area: 100}; if (config.color) { newSquare.color = config.color; } if (config.width) { newSquare.area = config.width * config.width; } return newSquare; }let mySquare = createSquare({color: "black"});
这里我们看一看 createSquare 函数,接受一个 SquareConfig 接口的对象,这里 SquareConfig 定义数据结构,但是数据结构中每一个属性不是必须而是可选的,然后返回一个 {color: string; area: number} 数据结构。
只读属性
多数情况下,创建的实现某个接口的对象,是可以在创建后对对象属性进行修改的,这就是 mutable ,我们在现代编程需要 ,特别是函数式编程中需要 immutable ,我们可以在接口定义时在属性(字段)属性前面添加修饰 readonly
interface Point { readonly x: number; readonly y: number; }let p1: Point = { x: 10, y: 20 }; p1.x = 5; // error!
let a: number[] = [1, 2, 3, 4];let ro: ReadonlyArray<number> = a; ro[0] = 12; // error!ro.push(5); // error!ro.length = 100; // error!a = ro; // error!
附加属性检查
之前我们已经学习到了可选属性定义,我们定义 createSquare 参数类型为 SquareConfig,以及返回类型
interface SquareConfig { color?: string; width?: number; }function createSquare(config: SquareConfig): { color: string; area: number } { // ...} let mySquare = createSquare({ colour: "red", width: 100 });
如果我们传入的参数属性名称可接口不一致,在编译时就会提示错误。获取我们传入一个 interface 中没有定义的类型同样会报编译错误。
// error: 'colour' not expected in type 'SquareConfig'let mySquare = createSquare({ colour: "red", width: 100 });
let mySquare = createSquare({ width: 100, opacity: 0.5 } as SquareConfig);
但是我们通过定义一个附加属性就可以轻松地解决这个问题 [propName: string]: any;
interface SquareConfig { color?: string; width?: number; [propName: string]: any; }
let squareOptions = { colour: "red", width: 100 };let mySquare = createSquare(squareOptions);
定义函数类型
之前我们学习的接口通常用于描述 javascript 对象的结构(shape),接口还可以描述一个函数。
interface SearchFunc { (source: string, subString: string): boolean; }
这里我们定义接口 SearchFunc 用于描述一个函数,接受字符串类型 source 和字符串类型 subString 返回一个 boolean 类型
let mySearch: SearchFunc; mySearch = function(source: string, subString: string) { let result = source.search(subString); return result > -1; }
好我们定义了变量接受一个函数作为值。为这个 SearchFunc 类型变量赋值函数也必须具有接口 SearchFunc 定义的结构。
接口的继承
有关接口的继承,在 typescript 接口是可以继承,所谓继承可能解释为扩展可能更好理解
interface Shape { color: string; }interface Square extends Shape { sideLength: number; } let square = <Square>{}; square.color = "blue"; square.sideLength = 10;
接口的多继承
我们定义接口可以继承多个接口,这里 square 继承了 shape 和 Penstroke 两个接口,然后具有自己的属性。
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;
作者:zidea
链接:https://www.jianshu.com/p/acf8b0a6ab61
共同学习,写下你的评论
评论加载中...
作者其他优质文章