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);