TypeScript 接口(Interfaces) 介紹

TypeScript 是一種 JavaScript 的超集,它擁有 JavaScript 所沒有的特性,其中之一就是接口(Interfaces)。接口可以讓開發者更容易地定義和使用物件的型別,並且可以更有效率地檢查程式碼的型別安全性。

接口(Interfaces) 可以讓開發者定義一個物件的型別,它可以包含屬性、函式、索引器等等,以及它們的型別。例如,我們可以定義一個 Person 接口,它有一個 name 屬性,型別為 string,以及一個 age 屬性,型別為 number

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

接著,我們可以定義一個物件,並且指定它的型別為 Person

let person: Person = {
  name: 'John',
  age: 30
};

這樣一來,TypeScript 就會檢查 person 物件是否符合 Person 接口的定義,例如 name 屬性是否為 stringage 屬性是否為 number,以及是否有其他多餘的屬性。

接口也可以定義函式,例如,我們可以在 Person 接口中定義一個 sayHello() 函式:

interface Person {
  name: string;
  age: number;
  sayHello(): void;
}

接著,我們可以在 person 物件中實作 sayHello() 函式:

let person: Person = {
  name: 'John',
  age: 30,
  sayHello() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

接口也可以定義索引器,例如,我們可以定義一個 Person 接口,它有一個 name 屬性,型別為 string,以及一個 age 屬性,型別為 number,以及一個 data 索引器,型別為 string

interface Person {
  name: string;
  age: number;
  [key: string]: string;
}

接著,我們可以定義一個物件,並且指定它的型別為 Person

let person: Person = {
  name: 'John',
  age: 30,
  data: '123'
};

這樣一來,TypeScript 就會檢查 person 物件是否符合 Person 接口的定義,例如 name 屬性是否為 stringage 屬性是否為 numberdata 索引器是否為 string,以及是否有其他多餘的屬性。

總結來說,TypeScript 接口(Interfaces) 可以讓開發者更容易地定義和使用物件的型別,並且可以更有效率地檢查程式碼的型別安全性。

Categorized in:

Tagged in: