TypeScript 介面

TypeScript核心原則之一是對資料具有的結構進行型別檢查。

採用被稱作為“鴨式辨型法”或“結構性子型別化”的檢查原則，通過成員結構來識別型別是否合法。

程式碼例項：

[typescript] 純文字檢視 複製程式碼
function test(obj: { webName: string }) {
  console.log(obj.webName);
}
 
let myObj = { webName: "螞蟻部落"};
test(myObj);

上面的程式碼規定函式的引數型別為object型別，它具有一個名稱為webName，型別為字串的屬性；在呼叫函式的時候，傳遞的myObj引數滿足結構要求。

介面的作用：

為型別命名和為你的程式碼或第三方程式碼定義契約。

程式碼例項：

[typescript] 純文字檢視 複製程式碼
interface Itest {
  webName: string;
  age:number;
}
 
function func(obj: Itest) {
  console.log(obj.webName);
}
 
let myObj = {webName:"螞蟻部落", age: 5};
func(myObj);

使用interface宣告一個介面，它規定資料應該所具有的結構。

不能像在C#或者Java等語言中，稱給函式func傳遞的引數實現了介面Itest，這裡只關心引數的結構，正如"鴨式辨型法 "（看到長兩條腿，嘴是扁的，身體是船型，就可以認為是鴨子，當然也有可能是鵝）這個形象的名稱，只外形結構符合即可。再來看一段程式碼例項：

[typescript] 純文字檢視 複製程式碼
interface Itest {
  webName: string;
  age:number;
}
 
function func(obj: Itest) {
  console.log(obj.webName);
}
 
let myObj = {webName:"螞蟻部落"};
func(myObj);

上面的程式碼會報錯，myObj並沒有滿足介面規定的結構（相當於少了一條腿的鴨子）。

[typescript] 純文字檢視 複製程式碼
interface Itest {
  webName: string;
  age:number;
}
 
function func(obj: Itest) {
  console.log(obj.webName);
}
 
let myObj = {
    webName:"螞蟻部落", 
    age: 5,
    address:"青島市南區"
};
func(myObj);

myObj讀了一個address屬性，但是並沒有報錯，再來看一段程式碼例項：

[typescript] 純文字檢視 複製程式碼
interface Itest {
  webName: string;
  age:number;
}
 
function func(obj: Itest) {
  console.log(obj.webName);
}
 
func({webName:"螞蟻部落", age: 5, address:"青島市南區"});

同樣是多了address屬性，但是直接傳遞物件直接量方式會報錯。

截圖如下:

我們可以簡單理解，如果直接傳遞一個物件直接量形式，那麼引數必須和介面的規定嚴格匹配。

否則只要介面規定的相應屬效能夠在引數中找到，並且型別一致即可。

從上面介紹可以看出，介面只規定約束，沒有具體實現，例如只規定age是數值型別，但並不會給它賦值。