TypeScript接口怎么使用

這篇文章主要講解了“TypeScript接口怎么使用”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“TypeScript接口怎么使用”吧！

前言：

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接口怎么使用這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！