TypeScript如何定義接口-創(chuàng)新互聯(lián)

這篇文章主要介紹“TypeScript如何定義接口”，在日常操作中，相信很多人在TypeScript如何定義接口問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”TypeScript如何定義接口”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

創(chuàng)新互聯(lián)堅持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都網(wǎng)站建設(shè)、做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時代的黃山網(wǎng)站設(shè)計、移動媒體設(shè)計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

接口的作用：

接口，英文：interface，其作用可以簡單的理解為：為我們的代碼提供一種約定。

在Typescript中是這么描述的：

• TypeScript的核心原則之一是對值所具有的結(jié)構(gòu)進行類型檢查。它有時被稱做“鴨式辨型法”或“結(jié)構(gòu)性子類型化”。

• 在TypeScript里，接口的作用就是為這些類型命名和為你的代碼或第三方代碼定義契約。

舉個例子：

// 定義接口 Person
interface Person {
    name: string;
    age: number;
}

// 指定定義的變量 man 的類型為我們的 Person "類型" 【這么表達不是很準確，只是為了方便理解】
let man: Person;

// 此時，我們對 man 賦值時，man 就必須遵守我們定義的 Person 約束，即必須存在 number 類型的 age 字段 和 string 類型的 name 字段
man = { age: 10, name: "syw" }
# 或者這樣
function fun(women:Person){} // 參數(shù) womem 也必須遵守 Person 約束

上面的例子我簡單說了一下如何定義一個接口和接口的作用，下面我就簡單的說一下接口的其他玩法:

設(shè)置接口可選屬性：

帶有可選屬性的接口與普通的接口定義差不多，只是在可選屬性名字定義的后面加一個 ? 符號。

interface Person {
    name: string
    age?: number
}

可選屬性，我們最常見的使用情況是，不確定這個參數(shù)是否會傳，或者存在。

在Typescript中是這么描述可選參數(shù)的好處的：

• 可選屬性的好處之一是可以對可能存在的屬性進行預(yù)定義，好處之二是可以捕獲引用了不存在的屬性時的錯誤。

額外屬性檢查:

說起來這一點，簡單總結(jié)一下就是：我們可以設(shè)置屬性是可選的，但是不能傳錯誤的屬性。

• 以上面的 Person 接口為例，如果我們使用時把 age 屬性 錯誤寫成了 aag，typescript 會報錯，即使 age 屬性本身不是必須傳的。

這就是額外屬性檢查。

當(dāng)然，我們也可以使用 類型斷言 繞開這些屬性檢查，上鏈接：TypeScript中的類型斷言[as語法 | ＜＞ 語法]

設(shè)置接口只讀屬性:

一些對象屬性只能在對象剛剛創(chuàng)建的時候修改其值。 所以我們可以在屬性名前用 readonly來指定只讀屬性 。

interface Person {
    readonly name: string;
    readonly age: number;
}
// 賦初始值
let man: Person = {name: "syw", age: 10};

// 如果此時在對值進行修改，就會出錯。
man.age = 20；// error！
// Cannot assign to "age" because it is a read-only property.

說起來，只讀屬性使用起來的效果和 const 差不多，當(dāng)然兩者根本不是一個東西，我這么說只是為了好理解。

在Typescript中是這么描述 readonly 和 const 的：

• 最簡單判斷該用readonly還是const的方法是看要把它做為變量使用還是做為一個屬性。 做為變量使用的話用 const，若做為屬性則使用readonly。

函數(shù)類型接口：

簡單來說，函數(shù)類型的接口就是規(guī)定了 函數(shù)的參數(shù)類型以及函數(shù)的返回值類型。

interface PersonFun {
    (name: string, age: number): boolean
}
// 定義函數(shù)，符合 PersonFun 約束
let manFun: PersonFun = (name: string, age: number) => {
    return age > 10;
}

注意：

1. 函數(shù)參數(shù)類型不可更改，包括返回值也必須遵守約束。

2. 函數(shù)參數(shù)名可以不用和接口中的名字對應(yīng)，只要求對應(yīng)參數(shù)位置的類型兼容。

// 這樣也是符合要求的
let manFun: PersonFun = (name12: string, age12: number) => {
    return age > 10;
}

可索引類型接口：

可索引類型接口簡單來說就是，我們可以規(guī)定 索引的類型 和 返回值的類型。

• 例如：數(shù)組中，我們可以規(guī)定 以 number 類型的值來索引，索引到的是一個 string 類型的值，這樣的話其實這個數(shù)組的形式基本就固定了。

interface PersonArr {
    [index: number]: string
}
// 定義數(shù)組
let manArr: PersonArr = ["syw","syw1","syw2"];
// 查詢
manArr[0]; // 此時 0 作為索引是 number 類型，0 號元素返回的是 syw 是 string 類型

Typescript 中支持兩種索引簽名，其實就是索引類型，分別是：number 和 string。

并且，如果我們使用 number 類型的索引，那么定義的返回值類型 必須是 定義 string 類型索引返回值的子類型。

Typescript 是這么解釋這句話的：

• 當(dāng)使用 number來索引時，JavaScript會將它轉(zhuǎn)換成string然后再去索引對象。也就是說用 100（一個number）去索引等同于使用"100"（一個string）去索引，因此兩者需要保持一致。

其實很簡單：

// 比如我這個 PersonArr 有兩個索引，一個是 index（number）類型，一個是 item（string） 類型，那么我在定義這個兩個索引的返回值的時候，就必須嚴格遵守上面說的：
// 使用 number 類型的索引，那么定義的返回值類型 必須是 定義 string 類型索引返回值的子類型。

// 所以我下面定義的這個接口就會報錯
interface PersonArr {
    [index: number]: string;
    [item: string]: number;
}
// 因為 index 返回值是 string 類型 ，很顯然不是 item 返回值 number 類型的子類型
// 怎么寫才對呢？最簡單的方法，把 index 返回值的類型也改成 number 就好了。

到此，關(guān)于“TypeScript如何定義接口”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>

當(dāng)前文章：TypeScript如何定義接口-創(chuàng)新互聯(lián)
本文鏈接：http://bm7419.com/article36/ddhjsg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供自適應(yīng)網(wǎng)站、網(wǎng)站排名、網(wǎng)站維護、網(wǎng)站導(dǎo)航、微信小程序、商城網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)