ts接口的進階用法

索引類型

我們可以通過接口描述索引的類型和通過索引得到的值的類型。例如一個簡單數組

['1']

通過索引0得到的就應該是字元串1

interface MyArr {
	[index: number]: string
}
let arr1: MyArr = ['1', '2']
let arr2: MyArr = {0: '1'}  //對象也滿足該條件
           

你也可以給索引設定隻讀屬性

interface MyArr {
	readonly readonly [index: number]: string
}
let arr1: MyArr = ['1', '2']
arr1[0] = '3' // Error
           

注意這裡的索引你定義為數字，但是屬性寫為可以轉換為數字的字元串也是可以的，如’0’, ‘1’，但是寫’a’則會報錯。如果你設定為所有類型為字元串，那麼寫出數字是都不會報錯的。

繼承

接口說穿了就是我們自己定義了一個資料結構或是限制了部分屬性的類型，若是多個接口都有相同特性則可以使用繼承的方式實作。

//這是不使用繼承的方式
interface A {
  name: string
}
interface B {
  name: string,
  age: number
}
interface C {
  name: string,
  love: string
}
//這是使用了繼承的方式
interface A {
  name: string
}
interface B extends A{
  age: number
}
interface C extends A{
  love: string
}
           

一個接口可以被多個接口繼承，同樣，一個接口也可以繼承多個接口，多個接口用逗号隔開。

interface A {
  name: string
}
interface B {
  age: number
}
interface C extends A, extends B{
  age: number
}
           

混合類型接口

在js裡面，我們可以直接定義一個函數，并且可以直接函數上面建立自己的屬性，因為函數也是對象的一種。在ts裡面一樣可以。(注意：ts3.1之前是不能這麼操作的。)

interface Counter {
  (start: number): string;
  interval: number;
  reset(): void;
}

function getCounter(): Counter {
  let counter = function (start: number) { } as Counter;
  counter.interval = 123;
  counter.reset = function () { };
  return counter;
}