有关接口概念之前的 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;
