TypeScript 對象的類型-接口

1、什麼是接口

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

所以賦值時變量的形狀必須和接口的形狀保持一致

 

2、可選屬性

可選屬性是指該屬性能夠不存在，當咱們但願不要徹底匹配一個形狀，能夠用可選屬性：

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

 

3、任意屬性

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

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

 

4、只讀屬性

有時候咱們但願對象中的一些字段只能在建立的時候被賦值，那麼能夠用 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.

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

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

二、在給 faker.id 賦值的時候，因爲它是隻讀屬性，因此報錯了

 

5、聯合類型和接口

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

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**
 

6、接口和數組

接口中咱們能夠將數組的索引值和元素設置爲不一樣類型，索引值能夠是數字或字符串

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"     // 錯誤

 

7、接口繼承

接口繼承就是說接口能夠經過其餘接口來擴展本身，Typescript 容許接口繼承多個接口，繼承使用關鍵字 extends

 

一、單接口繼承

單接口繼承語法格式：

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

 

二、多接口繼承

多接口繼承語法格式：

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