ts接口基礎用法

TypeScript的核心原則之一是對值所具有的結構進行類型檢查。 它有時被稱做“鴨式辨型法”或“結構性子類型化”。 在TypeScript裡，接口的作用就是為這些類型命名和為你的代碼或第三方代碼定義契約。

先簡單看個例子

interface User {
  name: string;
  age: number
}
let user:User = {name: 'fufu'} //Error
           

當我們使用接口定義結構時，如果聲明的變量接口不同于接口，那就會報錯。這裡的不同于指的是必須含有接口定義的屬性，不多不少。

interface User {
  name: string;
  age: number
}
let user:User = {name: 'fufu', age: 20} // ok
           

可選屬性

但是我們時常定義完成後，并不是每次都能夠擁有某個屬性的，是以我們可以定義一個可選屬性

interface User {
  name: string;
  age?: number
}
let user:User = {name: 'fufu'} // ok
           

繞開多餘屬性檢查

很多時候，我們隻需要滿足我們接口定義的屬性即可，不在意是不是存在多餘的屬性，實作的方式有三個：

1. 使用類型斷言

interface User {
  name: string;
  age: number
}

let user:User = {name: 'fufu', age: 20, love: 'love' } as User
           

2. 添加索引簽名

interface User {
  name: string;
  age: number;
  [prop: string]: any
}

let user:User = {name: 'fufu', age: 20, love: 'love' }
           

3 利用類型相容性

interface User {
  name: string;
}
const getVegetables = ({ name }: User) => {
  console.log(name);
  return name;
};
 
const user = { name: "fufu", size: 12 };
getVegetables(user);
           

上面的函數裡面我們要求是需要一個User類型的對象當作參數，但是我們随機定義了一個包含User類型屬性的普通對象後，指派給變量再當作參數傳遞就通過了校驗。

是因為直接将對象字面量傳入函數，和先賦給變量再将變量傳入函數，這兩種檢查機制是不一樣的，後者是因為類型相容性。簡單地來說：如果 b 要指派給 a，那要求 b 至少需要與 a 有相同的屬性，多了無所謂。

隻讀屬性

有時候，我們隻希望某些屬性是隻讀的，不能被随便修改，這個時候我們使用readonly 即可

interface User {
  readonly name: string;
}
let user:User = { name: "fufu" };
user.name = 'dandan' //Error
           

定義函數

接口除了用來定義對象外，還可以用來定義函數。

// 該接口定義了一個函數的參數個數，類型以及傳回值。
interface AddFunc {
  (num1: number, num2: number): number;
}
let add:AddFunc = (n1:number, n2:number) => n1 + n2
           

你應該注意到了，實際定義函數的時候，名字是無需和接口中參數名相同的，隻需要位置對應即可

偷了一張圖檔總結: