TypeScript接口介紹

Posted on by

前言：

TS的核心原則之一就是對所具有的結構 進行類型檢查。接口的作用就是為這些類型命名和為你的代碼或第三方代碼定義契約。

最終被編譯成JavaScript代碼後不包含接口以及類型約束的代碼。

1.接口的定義

接口的作用於type關鍵字類似，但是又不一樣。type可以定義簡單的數據類型，例如如下代碼

type str = string

這種寫法就不能應用在 接口 中，接口中隻能寫函數類型和類類型還有數組類型。

在TS中定義接口使用interface關鍵字。

示例代碼如下所示：

// 定義一個簡單的接口
interface Person {
  name: string
}
// 定義 get 方法
function getPersonName(person: Person): void {
  console.log(person.name)
}
// 定義 set 方法
function setPersonName(person: Person, name: string): void {
  person.name = name
}
// 定義一個 person 對象
let person = {
  name: '一碗粥',
}
setPersonName(person, '一碗周')
// 修改成功
getPersonName(person) // 一碗周

Person 接口就像是一個名字，它用來描述使用該接口中的要求，例如此接口中需要一個name屬性，且類型為string類型。

值得註意的是，類型檢查並不會檢查屬性的順序，隻需要對應你的屬性存在，且類型相同即可。

2.屬性

2.1可選屬性

如果接口中的某個屬性是可選的，或者說僅僅在某個條件下存在，可以在屬性名旁邊加一個?號。示例代碼如下：

;(function () {
  // 定義一個簡單的接口
  interface Person {
    name: string
    // 說明 age 是可選的
    age?: number
  }
  // 定義一個 person 對象
  let person = {
    name: '一碗周',
    age: 18,
    hobby: 'coding',
  }
  // 定義 get 方法
  function getPersonName(person: Person): void {
    // console.log(person.age, person.hobby) //  Property 'hobby' does not exist on type 'Person'.
  }
})()

此時的sex屬性我們可寫可不寫，但是hobb 屬性，由於沒有在接口中定義，我們調用會拋出異常。

2.2隻讀屬性

如果想讓一個屬性為一個隻讀屬性，僅僅需要在屬性前面添加readonly即可。

示例代碼如下：

;(function () {
  interface Person {
    // 將 name 設置為隻讀
    readonly name: string
  }
  // 定義一個 person 對象
  let person = {
    name: '一碗周',
  }
  // 定義 set 方法
  function setPersonName(person: Person, name: string): void {
    person.name = name // Cannot assign to 'name' because it is a read-only property.
  }
  setPersonName(person, '一碗粥')
})()

3.類類型

3.1繼承接口

和類一樣，接口也可以相互繼承。 這讓我們能夠從一個接口裡復制成員到另一個接口裡，可以更靈活地將接口分割到可重用的模塊裡。

接口繼承使用extends關鍵字，示例代碼如下：

// 定義兩個接口
interface PersonName {
  name: string
}
interface PersonAge {
  age: number
}

// 定義一個 Person 接口繼承於以上兩個接口 多個接口使用 , 逗號分割
interface Person extends PersonName, PersonAge {
  hobby: string
  // 定義一個方法，返回值為 string
  say(): string
}
let person = {
  name: '一碗周',
  age: 18,
  hobby: 'coding',
  // 示例方法
  say() {
    return '一碗周'
  },
}
// 定義 get 方法
function getPersonName(person: Person): void {
  console.log(person.name, person.age, person.hobby)
}
getPersonName(person) // 一碗周 18 coding

繼承多個接口中間使用,逗號分割。

4.函數類型

在TS中接口還可以對函數類型的接口進行描述。

函數類型接口的定義就像是一個隻有參數列表和返回值類型的函數定義，參數列表中每個參數都需要名字和類型 。

示例代碼如下所示：

interface MyAdd {
    (x: number, y: number): number
}

定義完成之後我們可以像使用普通接口一樣使用這個函數接口。

示例代碼如下所示：

let myAdd: MyAdd = (x: number, y: number): number => {
    return x + y
}

上面的代碼等同於如下函數定義的代碼：

let myAdd: (x: number, y: number) => number = (
    x: number,
    y: number
): number => {
    return x + y
}

到此這篇關於TypeScript接口介紹的文章就介紹到這瞭,更多相關TypeScript接口 內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：