TS Interface-接口 與 函數 鴨子類型

interface不存在於JavaScript 用來做類型的靜態檢查

// interface Person {
// readonly id: number; // readonly只讀屬性不允許改變
// name: string;
// age?: number // 加上問號 表示是可選屬性
// }

// // let hky: Person = {
// // name: 'hky'
// // }
// // 比接口少一些或者多一些屬性是不被允許的
// // Interface.ts:6:5 - error TS2741: Property 'age' is missing in type '{ name: string; }' but required in type 'Person'.

// let hky: Person = {
// id: 123,
// name: 'hky',
// age: 20
// }

// // 報錯 只讀屬性不允許被改變
// hky.id = 123 // => Interface.ts:18:5 - error TS2540: Cannot assign to 'id' because it is a read-only property.

// Function 函數

// 可選參數后不能 添加確定的參數 會使系統類型判斷出現混亂

const add = (x: number, y: number, z?: number): number => {  //  箭頭不是es6中的箭頭函數 而是TS中聲明函數類型返回值的方法
　　if (typeof z === 'number') {
　　　　return x + y + z
　　} else {
　　　　return x + y
　　}
}

// 不允許超出 約定參數
// 約定好類型 也不允許改變
// z為可選屬性

interface Fun {
　　(x: number, y: number, z?: number ): number // interface 聲明函數類型
}
// let add2 = (x: number, y: number, z?: number ) => number = add
let add2: Fun = add
//在TS中：后都是聲明的類型 與邏輯並沒有什么關系

 

// 鴨子類型 (duck typing)  

interface Base {

  id: number

}

interface Advance extends Base {

  name: string

}

const test = (val: Base) => {

}

const a:Advance = { id:1, name: 'jack' }

test({id:12}) // 此時傳一個Base定義好的數據肯定是可以的

test(a) // a繼承於Base  所以傳a 也是沒有問題的 類型兼容

// java的類型兼容 與 js的類型兼容是有區別的   鴨子類型 TS 是 面向接口編程而不是面向對象編程

// 此時如果把Advance去掉 就跟  Advance 接口沒有任何關系了 但是TS沒有報錯

const b = { id:1, name: 'jack' }   // 此時接口一樣 而 類型不一樣  但是成立

test(b)

// 說明函數test 根本不在乎你傳入的類型是否是Base 類型  但是只要符合接口的要求 有一個number類型的id  就成立