TypeScript學習筆記--接口

接口 interface

此接口非彼接口，在ts中只是對象的一種，用來定義對象的類型

什麼是接口

在面嚮對象語言中，接口（Interfaces）是一個很重要的概念，它是對行爲的抽象，而具體如何行動需要由類（classes）去實現（implement）。
ts的接口-interfaces經常用於對對象的形狀，特點進行描述。

小試牛刀

interface Person{
  id:number,
  name:string,
  isMale:boolean
}

let peter:Person = {
  id:123456,
  name:'peter',
  isMale:true
}

從例子可以看到，所謂的接口，還是按照對象形式+類型定義的方式，然後在定義變量時運用起來，並添加其約束。
一般聲明接口時，首字母大寫

接口定義

在用interface聲明變量時，若沒有其他的特殊情況，比如任意屬性，可選屬性，只讀屬性等，數量不能多也不能少，順序倒是無所謂，多了未知的屬性不行，少了已知的屬性也不行，否則會報錯。

interface Person{
  id:number,
  name:string,
  isMale:boolean
}

let peter:Person = {
  id:123456,
  name:'peter',
} // 報錯，缺少屬性isMale

let tom:Person = {
  name:'tom',
  id:1111111,
  isMale:false,
  age:20
} // 報錯，age不在Person屬性中

可選屬性

可選屬性，意思就是不是必須要填寫的屬性，就在該屬性後面加上？即可。仍然不允許添加未定義的屬性

interface Animal{
  type:string,
  color?:string
}

let tiger:Animal = {
  type:'cat',
  color:'yellow'
}
let lion:Animal = {
  type:'dog'
}
let shark:Animal = {
  type:'fish',
  isBig:true
}// 報錯，isBig不在Animal類型中

只讀屬性

只讀屬性，意思就是，在第一次創建後，就不能再賦值。
只讀的約束存在於第一次給對象賦值的時候，而不是第一次給只讀屬性賦值的時候

interface Flower{
  readonly name:string,
  color:string
}

let red_flower:Flower = {
  name:'red_flower',
  color:'red'
}
red_flower.name = 'green_flower' // 報錯，無法分配到“name”，因爲它是常數或只讀屬性。

任意類型

在js中，對象就有無限聲明賦值的特性，ts也可以設置接口的任意類型來無限聲明賦值。使用 [propName: string]或者[propName: number] 定義了任意屬性取 string或number 類型的值。

interface Person_1{
  id:number
  name:string,
  [propName:string]:string,
} //報錯 類型“number”的屬性“id”不能賦給字符串索引類型“string”
let Lily:Person_1 = {
  id:12345,
  name:'Lily',
  age:18,
} // 報錯，不能將類型“number”分配給類型“string”。

一旦定義了任意屬性，那麼確定屬性和可選屬性的類型都必須是它的類型的子集，就拿上面的例子說，一旦聲明瞭任意類型爲string，那麼就不能定義屬性number和boolean了，同樣的道理，在應用的時候，未知的屬性也必須是string類型。
解決這個辦法就將任意類型的類型設置爲any或者unknown，或者採用聯合類型。除非有萬不得已的情況，不建議採用此方法

interface Person_1{
  id:number
  name:string,
  isMale:boolean,
  [propName:string]:unknown,
}
let Lily:Person_1 = {
  id:12345,
  name:'Lily',
  isMale:false,
  age:18,
  like:'dance'
}

TypeScript支持兩種索引簽名：字符串和數字。 可以同時使用兩種類型的索引， 簡稱：可索引類型。

可以描述那些能夠“通過索引得到”的類型，比如a[10]或ageMap["daniel"]。 可索引類型具有一個 索引簽名，它描述了對象索引的類型，還有相應的索引返回值類型。
都是說明屬性是字符串還是數字，一般對象中字符串居多，數組數字居多，在數組中，可以通過數字索引類型獲取對應的值。
，但是數字索引的返回值必須是字符串索引返回值類型的子類型。 這是因爲當使用 number來索引時，JavaScript會將它轉換成string然後再去索引對象。 也就是說用 100（一個number）去索引等同於使用"100"（一個string）去索引，因此兩者需要保持一致。

interface StringArray {
  [index: number]: string;
}

let myArray: StringArray;
myArray = ["Bob", "Fred"];

let myStr: string = myArray[0];

函數接口

給接口定義一個調用簽名。 它就像是一個只有參數列表和返回值類型的函數定義。參數列表裏的每個參數都需要名字和類型。

interface encrypt {
  (key: string, value: string): string;
}

// 對傳入的參數以及返回值進行約束
let md1: encrypt = function (key: string, value: string): string {
  return key + value;
}
console.log(md1('張三', '初一一班'));

繼承接口

所謂的繼承，就是一個接口能夠擁有另一個接口的屬性和類型,並且在擁有的基礎上再添加自己的屬性和類型。
繼承不可以覆蓋父接口的屬性和類型
繼承接口可以繼承多個父接口

interface Person{
  id:number,
  name:string,
  isMale:boolean
}
interface Male extends Person {
  isMale:boolean,
  hobby:string,
  eat:(val:string)=>string
}
let Got:Male = {
  isMale:true,
  id:1111,
  name:'Got',
  hobby:'basketball',
  eat:(apple)=>{
    return apple
  }
}