對象的類型——接口 · TypeScript 入門教程

# 對象的類型——接口在 TypeScript 中，我們使用接口（Interfaces）來定義對象的類型。 ## 什么是接口在面向對象語言中，接口（Interfaces）是一個很重要的概念，它是對行為的抽象，而具體如何行動需要由類（classes）去實現（implement）。 TypeScript 中的接口是一個非常靈活的概念，除了可用于[對類的一部分行為進行抽象](../advanced/class-and-interfaces.md#類實現接口)以外，也常用于對「對象的形狀（Shape）」進行描述。 ## 簡單的例子 ```ts interface Person { name: string; age: number; } let tom: Person = { name: 'Tom', age: 25 }; ``` 上面的例子中，我們定義了一個接口 `Person`，接著定義了一個變量 `tom`，它的類型是 `Person`。這樣，我們就約束了 `tom` 的形狀必須和接口 `Person` 一致。接口一般首字母大寫。[有的編程語言中會建議接口的名稱加上 `I` 前綴](https://msdn.microsoft.com/en-us/library/8bc1fexb%28v=vs.71%29.aspx)。定義的變量比接口少了一些屬性是不允許的： ```ts interface Person { name: string; age: number; } let tom: Person = { name: 'Tom' }; // index.ts(6,5): error TS2322: Type '{ name: string; }' is not assignable to type 'Person'. // Property 'age' is missing in type '{ name: string; }'. ``` 多一些屬性也是不允許的： ```ts interface Person { name: string; age: number; } let tom: Person = { name: 'Tom', age: 25, gender: 'male' }; // index.ts(9,5): error TS2322: Type '{ name: string; age: number; gender: string; }' is not assignable to type 'Person'. // Object literal may only specify known properties, and 'gender' does not exist in type 'Person'. ``` 可見，**賦值的時候，變量的形狀必須和接口的形狀保持一致**。 ## 可選屬性有時我們希望不要完全匹配一個形狀，那么可以用可選屬性： ```ts interface Person { name: string; age?: number; } let tom: Person = { name: 'Tom' }; ``` ```ts interface Person { name: string; age?: number; } let tom: Person = { name: 'Tom', age: 25 }; ``` 可選屬性的含義是該屬性可以不存在。這時**仍然不允許添加未定義的屬性**： ```ts interface Person { name: string; age?: number; } let tom: Person = { name: 'Tom', age: 25, gender: 'male' }; // examples/playground/index.ts(9,5): error TS2322: Type '{ name: string; age: number; gender: string; }' is not assignable to type 'Person'. // Object literal may only specify known properties, and 'gender' does not exist in type 'Person'. ``` ## 任意屬性有時候我們希望一個接口允許有任意的屬性，可以使用如下方式： ```ts interface Person { name: string; age?: number; [propName: string]: any; } let tom: Person = { name: 'Tom', gender: 'male' }; ``` 使用 `[propName: string]` 定義了任意屬性取 `string` 類型的值。需要注意的是，**一旦定義了任意屬性，那么確定屬性和可選屬性的類型都必須是它的類型的子集**： ```ts interface Person { name: string; age?: number; [propName: string]: string; } let tom: Person = { name: 'Tom', age: 25, gender: 'male' }; // index.ts(3,5): error TS2411: Property 'age' of type 'number' is not assignable to string index type 'string'. // index.ts(7,5): error TS2322: Type '{ [x: string]: string | number; name: string; age: number; gender: string; }' is not assignable to type 'Person'. // Index signatures are incompatible. // Type 'string | number' is not assignable to type 'string'. // Type 'number' is not assignable to type 'string'. ``` 上例中，任意屬性的值允許是 `string`，但是可選屬性 `age` 的值卻是 `number`，`number` 不是 `string` 的子屬性，所以報錯了。另外，在報錯信息中可以看出，此時 `{ name: 'Tom', age: 25, gender: 'male' }` 的類型被推斷成了 `{ [x: string]: string | number; name: string; age: number; gender: string; }`，這是聯合類型和接口的結合。一個接口中只能定義一個任意屬性。如果接口中有多個類型的屬性，則可以在任意屬性中使用聯合類型： ```ts interface Person { name: string; age?: number; [propName: string]: string | number; } let tom: Person = { name: 'Tom', age: 25, gender: 'male' }; ``` ## 只讀屬性有時候我們希望對象中的一些字段只能在創建的時候被賦值，那么可以用 `readonly` 定義只讀屬性： ```ts interface Person { readonly id: number; name: string; age?: number; [propName: string]: any; } let tom: Person = { id: 89757, name: 'Tom', gender: 'male' }; tom.id = 9527; // index.ts(14,5): error TS2540: Cannot assign to 'id' because it is a constant or a read-only property. ``` 上例中，使用 `readonly` 定義的屬性 `id` 初始化后，又被賦值了，所以報錯了。 **注意，只讀的約束存在于第一次給對象賦值的時候，而不是第一次給只讀屬性賦值的時候**： ```ts interface Person { readonly id: number; name: string; age?: number; [propName: string]: any; } let tom: Person = { name: 'Tom', gender: 'male' }; tom.id = 89757; // index.ts(8,5): error TS2322: Type '{ name: string; gender: string; }' is not assignable to type 'Person'. // Property 'id' is missing in type '{ name: string; gender: string; }'. // index.ts(13,5): error TS2540: Cannot assign to 'id' because it is a constant or a read-only property. ``` 上例中，報錯信息有兩處，第一處是在對 `tom` 進行賦值的時候，沒有給 `id` 賦值。第二處是在給 `tom.id` 賦值的時候，由于它是只讀屬性，所以報錯了。 ## 參考 - [Interfaces](http://www.typescriptlang.org/docs/handbook/interfaces.html)（[中文版](https://zhongsp.gitbooks.io/typescript-handbook/content/doc/handbook/Interfaces.html)） --- - [上一章：聯合類型](union-types.md) - [下一章：數組的類型](type-of-array.md)