TS學習隨筆（三)->接口

終於來到了比較重要的知識，接口，有多重要呢，反正是很重要好啵

 

 

在 TypeScript 中，咱們使用接口（Interfaces）來定義對象的類型。

那什麼是接口呢，在面嚮對象語言中，接口（Interfaces）是一個很重要的概念，它是對行爲的抽象，而具體如何行動須要由類（classes）去實現（implements）。

TypeScript 中的接口是一個很是靈活的概念，除了可用於對類的一部分行爲進行抽象之外，也經常使用於對「對象的形狀（Shape）」進行描述。

少俠：這是個什麼東西，看不太懂啊

機智的我:少俠，少俠我懂，你家裏有鎖嗎（別說沒有啊，沒有這天就聊死了）。

少俠：有，咋的了？

機智的我：我準備用鎖來給你解釋一下什麼是接口，鎖就是接口

少俠：瞎扯，看刀！

機智的我：（躲躲躲）少俠這是真的啊，接口就像你家的鎖，鑰匙就像是一個個的類，要想和鎖匹配打開鎖，就只能根據鎖裏面的鎖芯來實現鑰匙的樣子

少俠：有點意思啊

機智的我：我說的有點道理吧少俠，來讓咱們繼續看看代碼怎麼實現的

//定義一個接口
interface Person { name: string; age: number; } let tom: Person = { name: 'Tom', age: 25 };

簡單吧，下面讓咱們再看看另外兩個例子

第一個例子：

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; }'.

爲啥報錯了呢，由於定義的變量比接口少了一些屬性是不容許的，你想要是容許，那不亂了套了嗎，少了一截的鑰匙都能打開鎖，那我要這鎖有何用？

第二個例子

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'.

哎喲，少了不行，多了也不行嗎？對的，定義的變量比接口多了一些屬性也是不容許的，

可見，賦值的時候，變量的形狀必須和接口的形狀保持一致。就跟鑰匙必須和鎖芯徹底匹配才能夠同樣同樣的

少俠：這木簡單，我學會了

機智的我：別急啊少俠，下面還有呢

進行下面的學習時請忘掉上面鎖的例子，鎖的例子只匹配最基礎的接口的用法，放在下面就不合適了

有時咱們但願不要徹底匹配一個形狀，那麼能夠用可選屬性（?）

interface Person { name: string; age?: number; } let tom: Person = { name: 'Tom' };

interface Person { name: string; age?: number; } let tom: Person = { name: 'Tom', age: 25 };

你看，上面兩種都不報錯，說明咱們的可選屬性生效了,可選屬性的含義是該屬性能夠不存在。

這時仍然不容許添加未定義的屬性：

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'.

你看，又報錯了，來咱們看下解決方法

任意屬性：

有時候咱們但願一個接口容許有任意的屬性，可使用以下方式：

interface Person { name: string; age?: number; [propName: string]: any; } let tom: Person = { name: 'Tom', gender: 'male' };

使用 [propName: string] 定義了任意屬性取 string 類型的值

須要注意的是，一旦定義了任意屬性，那麼肯定屬性和可選屬性的類型都必須是它的類型的子集（特別注意）

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 的子屬性，因此報錯了。

就是說你一旦將任意屬性設置爲string，那木接口裏面全部屬性的取值必須爲string

另外，在報錯信息中能夠看出，此時 { name: 'Tom', age: 25, gender: 'male' } 的類型被推斷成了 { [x: string]: string | number; name: string; age: number; gender: string; }，這是聯合類型和接口的結合。

只讀屬性：

有時候咱們但願對象中的一些字段只能在建立的時候被賦值，那麼能夠用 readonly 定義只讀屬性

 

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 初始化後，又被賦值了，因此報錯了。

 

注意，只讀的約束存在於第一次給對象賦值的時候，而不是第一次給只讀屬性賦值的時候：

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 賦值的時候，因爲它是隻讀屬性，因此報錯了。

 

參考資料：https://github.com/xcatliu/typescript-tutorial/blob/master/basics/type-of-object-interfaces.md