TypeScript Interface的使用詳解

一、Interface基礎

1、Interface是什麼

interface Person {
  name: string;
  age: number;
}

上面的代碼定義了一個Person介面，它包含了兩個屬性name和age，分別為字元串類型和數字類型。

2、Interface的作用

Interface可以用來對對象、函數、類等進行類型檢查，同時也可以充當文檔，讓開發者清楚了解介面的使用方法和所期望的返回值類型。

3、Interface的繼承

interface Person {
  name: string;
  age: number;
}

interface Student extends Person {
  grade: number;
}

上面的代碼定義了一個Student介面，它繼承了Person介面，並且新增了一個grade屬性，為數字類型。

二、Interface的可選屬性和只讀屬性

1、可選屬性

interface Person {
  name: string;
  age?: number;
}

const person1: Person = { name: 'Alice' };
const person2: Person = { name: 'Bob', age: 20 };

上面的代碼中，age屬性在Person介面中被定義為可選屬性，意味著在對象實例化時可以選擇不傳入age屬性。

2、只讀屬性

interface Person {
  readonly name: string;
  age: number;
}

const person: Person = { name: 'Alice', age: 20 };
person.name = 'Bob'; // 編譯報錯，無法更改只讀屬性

上面的代碼中，name屬性在Person介面中被定義為只讀屬性，意味著該屬性無法被更改。

三、Interface的函數定義

1、函數類型

interface SearchFunc {
  (source: string, subString: string): boolean;
}

const mySearch: SearchFunc = function (source: string, subString: string) {
  return source.indexOf(subString) > -1;
};

上面的代碼定義了一個函數類型的介面SearchFunc，並且將其賦值給mySearch變數，該變數是一個函數，接收兩個字元串類型的參數，返回布爾類型的值。

2、可選參數和默認參數

interface BuildNameFunc {
  (firstName: string, lastName?: string): string; 
}

function getName(name: BuildNameFunc, firstName: string, lastName = 'Doe'): string {
  return name(firstName, lastName);
};

const fullName = getName(function(firstName, lastName) {
  return `${firstName} ${lastName}`;
}, 'John');
console.log(fullName); // John Doe

上面的代碼中，BuildNameFunc介面包含兩個參數，其中lastName是可選參數，可以不傳入，同時也可以設置默認值。getName函數接收一個函數類型的參數name，並且調用該函數返回字元串類型的值。

四、Interface的類定義

1、類類型實現介面

interface ClockInterface {
  currentTime: Date;
  setTime(d: Date): void;
}

class Clock implements ClockInterface {
  currentTime: Date = new Date();
  setTime(d: Date) {
    this.currentTime = d;
  }
  constructor(h: number, m: number) {}
}

上面的代碼中，定義了一個ClockInterface介面，包含了currentTime屬性和setTime方法。Clock類實現了該介面，並且實現了currentTime屬性的賦值和setTime方法的定義。

2、類類型介面

interface ClockConstructor {
  new(h: number, m: number): ClockInterface;
}
interface ClockInterface {
  tick(): void;
}
function createClock(ctor: ClockConstructor, h: number, m: number): ClockInterface {
  return new ctor(h, m);
}

class DigitalClock implements ClockInterface {
  constructor(h: number, m: number) {}
  tick() {
    console.log("beep beep");
  }
}
class AnalogClock implements ClockInterface {
  constructor(h: number, m: number) {}
  tick() {
    console.log("tick tock");
  }
}

const digital = createClock(DigitalClock, 12, 17);
const analog = createClock(AnalogClock, 7, 32);

上面的代碼中，定義了一個ClockConstructor介面，包含了new方法，該方法返回ClockInterface實例。createClock函數接收一個ClockConstructor類型的參數和兩個數字類型的參數，返回一個ClockInterface實例。DigitalClock和AnalogClock類實現了ClockInterface介面，並且傳遞給createClock函數用於實例化。

五、Interface的其他使用場景

1、索引類型

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

const arr: StringArray = ['Bob', 'Alice'];
const name: string = arr[0];

上面的代碼中，定義了一個StringArray介面，表示字元串類型的數組，方括弧內為索引類型，代表容器內元素的類型。

2、字元串字面量類型

interface Easing {
  easeIn: string;
  easeOut: string;
  easeInOut: string;
}

const easing: Easing = {
  easeIn: 'ease-in',
  easeOut: 'ease-out',
  easeInOut: 'ease-in-out'
};

上面的代碼中，定義了一個Easing介面，為字元串字面量類型，代表了三種不同的easing動畫類型。

3、混合類型

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

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

const myCounter = getCounter();
myCounter(10);
myCounter.reset();
myCounter.interval = 5.0;

上面的代碼中，定義了一個Counter介面，是一個既可以像函數一樣使用，又可以包含屬性和方法的介面類型。

六、總結

通過本文的介紹，我們了解了TypeScript Interface在多種場景中的使用方式，從基本類型定義，到介面繼承、可選屬性和只讀屬性、函數類型定義、類類型實現介面、類類型介面、索引類型和混合類型，我們可以看到Interface的作用分布在TypeScript中的各個角落。