TypeScript核心设计原则之一就是类型检查,通过使用接口(Interfaces)可以进行类型检查,满足传统面向对象思想,利于有效开发,有效避免类型转换问题。
在 TypeScript 中,接口是用作约束作用的,在编译成 JavaScript 的时候,所有的接口都会被擦除掉,因为 JavaScript 中并没有接口这一概念。
先看看一个简单的例子:
?
1 2 3 4 5 6 function printLabel(labelledObj: { label: string }) { console.log(labelledObj.label); } var myObj = { size: 10, label: “Size 10 Object” }; printLabel(myObj);
那么在该方法中,labelledObj 的类型就是 {label: string},看上去可能有点复杂,但我们看见看看下面 myObj 的声明就知道,这是声明了一个拥有 size 属性(值为 10)和 label 属性(值为 “Size 10 Object”)的对象。所以方法参数 labelledObj 的类型是 {label: string} 即表明参数拥有一个 string 类型的 label 属性。
但是,这么写的话,这个方法看上去还是有点让人糊涂。那么就可以用接口(interface)来定义这个方法的参数类型。
?
1 2 3 4 5 6 7 8 9 10 interface LabelledValue { label: string; } function printLabel(labelledObj: LabelledValue) { console.log(labelledObj.label); } var myObj = { size: 10, label: “Size 10 Object” }; printLabel(myObj);
可选属性
有些时候,我们并不需要属性一定存在,就可以使用可选属性这一特性来定义。
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 interface SquareConfig { color?: string; width?: number; } function createSquare(config: SquareConfig): { color: string; area: number } { var newSquare = { color: “white”, area: 100 }; if (config.color) { newSquare.color = config.color; } if (config.width) { newSquare.area = config.width * config.width; } return newSquare; } var 流量交易mySquare = createSquare({ color: “black” });
那么我们就传入了实现一个 SquareConfig 接口的对象入 createSquare 方法。
既然完全是可有可无的,那么为什么还要定义呢?对比起完全不定义,定义可选属性有两个优点。1、如果存在属性,能约束类型,这是十分关键的;2、能得到语法智能提示,假如误将方法体中 color 写成 collor,那么编译是不通过的。