02.TypeScript 接口

02.TypeScript 接口

 

TypeScript核心设计原则之一就是类型检查，而接口实际是为了这种类型检查而产生的，实际他并不会在生成的JavaScript里有半点体现。

一个简单的示例

// 定义IUser接口 interface IUser { name: string; // 姓名：字符串类型 age: number; // 年龄：数值类型 } function getUser(user: IUser) : string { return user.name + ':' + user.age; } var userInfo: string = getUser({ age: 25, name: 'Kase' }); alert(userInfo); 

getUser 接收的参数是一个 IUser 接口，因此在传参时ts会要求里必须要出现 age 和 name。

IUser 目的单纯只是为了编写TypeScript时更有效的开发，并且这种接口并不会在生成后的JavaScript有任何体现，咱们来看看生成后的JavaScript：

function getUser(user) { return user.name + ':' + user.age; } var userInfo = getUser({ age: 25, name: 'Kase' }); alert(userInfo); 

可选参数

如上文的示例，必须是 age 和 name 存在，这样ts才会检查经过。但有时咱们又不但愿接口所定义的属性都是必须的，咱们能够在属性名加上 ?，来表示一个属性是可选项。

interface IUser { name: string; // 姓名：字符串类型 age: number; // 年龄：数值类型 sex?: boolean // 性别：布尔型，可是可选项 } function getUser(user: IUser) : string { return user.name + ':' + user.age + ':' + (user.sex ? 'm' : 'f'); } var userInfo: string = getUser({ age: 25, name: 'Kase' }); alert(userInfo); 

函数类型

有时咱们须要明确规定一个函数的参数和返回值时，也能够定义一个接口来实现约定。这种接口对于把某个函数作为一个第三方库被使用时，很是有用，由于他能够明确在IDE中告诉你参数类型。虽然有点遗憾ts在vs下在智能提醒时并不会包括强力的注释。

// 健康状态 interface Healthy { (height: number, weight: number): boolean } var myHealthy: Healthy; myHealthy = function (height: number, weight: number) { return true; } console.log(myHealthy(170, 120)); 

对于调用者而言 myHealthy 必须传递两个数值类型的数据。

Class 类型

一、实现Interface

在TypeScript中也能实现相似C#中interface，用来强制实现类的结构。

interface IClock { currentTime: Date; setTime(d: Date); } class Clock implements IClock { currentTime: Date; setTime(d: Date) { this.currentTime = d; } constructor(h: number, m: number) { } } 

Clock 是 IClock 的实现类，明确约定必需要实现 currentTime 属性和 setTime 函数。

二、类static和instance区别

当使用类和接口时，类有两种类型：static（静态）部分和instance（实例）部分；因为ts只会对instance部分进行类型检查，而构造函数是属于静态部分，因此当咱们使用一个带有构造签名的接口时，就会出错。

interface IClock { new (h: number, m: number); } class Clock implements IClock { constructor(h: number, m: number) { } } 

固然咱们须要明确规定某个类在调用构造函数时参数时，咱们能够这样子。。。但我不想说，由于我本身使用下来彻底在违背ts的设计原则。在c#的接口中是没法约定接口的构造方法的，因此这种想法就须要说起。

三、interface继承

interface也能被继承，还能够组合继承多个接口。

interface Shape { color: string; } interface PenStroke { penWidth: number; } interface Square extends Shape, PenStroke { sideLength: number; } var square = <Square>{}; square.color = "blue"; square.sideLength = 10; square.penWidth = 5.0; console.log(square);