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