TypeScript 對象的類型-接口

一、什么是接口

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

接口是一系列抽象方法的聲明，是一些方法特征的集合，第三方可以通過這組抽象方法調用，讓具體的類執行具體的方法

TypeScript 中接口除了可用於對類的一部分行為進行抽象以外，還可用於對「對象的形狀（Shape）」進行描述

舉個例子：

interface Person {
    name: string;
    age: number;
}

let faker: Person = {
    name: 'Faker',
    age: 25
};

這里定義了一個接口 Person，接着定義了一個變量 Faker，它的類型是 Person。這樣就約束了 faker 的形狀必須和接口 Person 一致

注意：接口一般首字母大寫

 

定義的變量比接口少了一些屬性是不允許的：

interface Person {
    name: string;
    age: number;
}

let faker: Person = {
    name: 'faker'
};

// 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 faker: Person = {
    name: 'faker',
    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 faker: Person = {
    name: 'Faker'
};
interface Person {
    name: string;
    age?: number;
}

let faker: Person = {
    name: 'Faker',
    age: 25
};

 

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

interface Person {
    name: string;
    age?: number;
}

let faker: Person = {
    name: 'Faker',
    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 faker: Person = {
    name: 'Faker',
    gender: 'male'
};

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

 

需要注意的是，一旦定義了任意屬性，那么確定屬性和可選屬性的類型都必須是它類型的子集：

interface Person {
    name: string;
    age?: number;
    [propName: string]: string;
}

let faker: Person = {
    name: 'Faker',
    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 的子屬性，所以報錯了

注意：一個接口中只能定義一個任意屬性

 

如果接口中有多個類型的屬性，則可以在任意屬性中使用聯合類型：

interface Person {
    name: string;
    age?: number;
    [propName: string]: string | number;
}

let faker: Person = {
    name: 'Faker',
    age: 25,
    gender: 'male'
};

 

四、只讀屬性

有時候我們希望對象中的一些字段只能在創建的時候被賦值，那么可以用 readonly 定義只讀屬性：

interface Person {
    readonly id: number;
    name: string;
    age?: number;
    [propName: string]: any;
}

let faker: Person = {
    id: 89757,
    name: 'Faker',
    gender: 'male'
};

faker.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 faker: Person = {
    name: 'Faker',
    gender: 'male'
};

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

上例中，報錯信息有兩處：

1、在對 faker 進行賦值的時候，沒有給 id 賦值

2、在給 faker.id 賦值的時候，由於它是只讀屬性，所以報錯了

 

五、聯合類型和接口

以下實例演示了如何在接口中使用聯合類型：

interface Person { 
    name:string; 
    words:string[]|string|(()=>string); 
} 
 
// words 是字符串
let faker:Person = {name:"Faker",words:"Hello"}; 
console.log(faker.words)  
 
// words 是字符串數組
faker = {name:"Faker",words:["Hello","World"]}; 
console.log(faker.words[0]); 
console.log(faker.words[1]);  
 
// words 是一個函數表達式
faker = {name:"Faker",words:()=>{return "**Hello World**";}}; 
 
let fn:any = faker.words; 
console.log(fn());

輸出結果為：

Hello Hello World **Hello World**
 

六、接口和數組

接口中我們可以將數組的索引值和元素設置為不同類型，索引值可以是數字或字符串

interface Names { 
   [index:number]:string 
} 
 
let list1:Names = ["Faker",1,"Bang"] // 錯誤元素 1 不是 string 類型

interface Ages { 
   [index:string]:number 
} 
 
let list2:Ages; 
list2["Faker"] = 22  // 正確 
list2[2] = "ten"     // 錯誤

 

七、接口繼承

接口繼承就是說接口可以通過其他接口來擴展自己，Typescript 允許接口繼承多個接口，繼承使用關鍵字 extends

 

1、單接口繼承

單接口繼承語法格式：

Child_interface_name extends super_interface_name

 

示例：

interface Person { 
   age:number 
} 
 
interface Musician extends Person { 
   instrument:string 
} 
 
let faker = <Musician>{}; 
faker.age = 22 
faker.instrument = "piano" 
console.log("年齡: " + faker.age)
console.log("喜歡的樂器: " + faker.instrument)

輸出：

年齡: 22
喜歡的樂器: piano

 

2、多接口繼承

多接口繼承語法格式：

Child_interface_name extends super_interface1_name, super_interface2_name,…,super_interfaceN_name

 

示例：

interface IParent1 { 
  v1:number 
} 
 
interface IParent2 { 
  v2:number 
} 
 
interface Child extends IParent1, IParent2 { } 
let faker:Child = { v1:22, v2:23} 
console.log("value 1: " + faker.v1 + " value 2: " + faker.v2)

輸出：

value 1: 22 value 2: 23