在 Typescript 中註解函數

在 typescript 中註解函數的最基本方法是這樣的

function add(a: number, b: number): number{
 // logic
}

// or

const add = (a: number, b: number): number => {
    //logic
}

可選參數用問號註解 param?像這樣

function optional(a: number, b?: number){
    console.log(a)
}

但是回呼函數，或參數類型和傳回型別相關的函數（在這種情況下，泛型）呢？

---

功能值

觀察這個 JavaScript 函數

function multiplier(factor){
    return value => factor * value
}

這樣我們就可以像這樣使用這個函數；

const n  = multiplier(6)
n(8) // 48

函數值在打字稿中註解如下

(param1: type, param2: type)=> type

// or

const add: (a: number, b: number)=> number = function (a, b){
    return a + b
}

因此為了註解乘數函數，我們有

function multiplier(factor: number): (value: number) => number{
    return value => factor * value
}

你的IDE（最好是）VSCode，會自動推論函數邏輯中的值型別（為數字）

---

通用函數

這個函數註解錯誤

function pickFirst(array: Array<t>): T{
    return array[0]
}
</t>

自然會拋出一個錯誤
找不到名字 T

因此，註解泛型函數的格式為

function fnName <t>(param: T): U{
    //logic
}
</t>

觀察通用名稱的聲明位置。所以，要正確註解上面的函數；

function pickFirst<t>(array: Array<t>): T{
    return array[0]
}
</t></t>

現在可以了。

但是具有函數參數的泛型函數又如何。

例如，我們想要註解一個名為 myMap 的自訂地圖函數，它是用 Javascript 寫的

function myMap(arr, fn){
    rreturn arr.map(fn)
}

我們可以這樣註解它

function myMap<input output>(arr: Input[], fn: (item: Input, index?: number) => Output): Output[]{
    return arr.map(fn)
}

在上面的程式碼片段中我們應該注意的是，fn 函數接受與輸入數組相同類型的項並傳回輸出類型。

靜態 Array.from() 方法怎麼樣？

function myFrom<type>(iterable: Iterable<type>): Array<type>{
    // logic
}
</type></type></type>

還是 array.filter() 方法？

function myFilter<input>(arr: Input[], fn: (item: Input) => boolean): Input[]{
    return arr.filter(fn)
}

通用約束

您也可以將泛型變數限制為具有特定屬性的類型。例如，

function pickInnerFirst<t extends number>(array: Array<t>): T{
    return array[0][0]
}
</t></t>

此函數選取二維數組中的第一個元素

這確保它僅適用於數組和字串（主要），這樣

pickOne([12, 20, 30]) // wont work.

我們也可以使用介面

interface Lengthly{
    length: number;
}

function pickInnerFirst<t extends lengthly>(array: Array<t>): T{
    return array[0][0]
}
</t></t>

---

功能介面

如果你不知道，函數是物件並且它們具有屬性

const add = (a, b) => a + b

console.log(add.toString()) //(a, b) => a + b

// also
console.log(Object.getPrototypeOf(add) == Function.prototype) //true
console.log(Object.getPrototypeOf(Function.prototype) == Object.prototype) //true

第二個範例顯示 add 函數是 Object.prototype 的子層級（即使它不是直接子層級），因此是一個物件。

有趣的是，你可以在 JavaScript 中將屬性附加到函數

function add(a: number, b: number): number{
 // logic
}

// or

const add = (a: number, b: number): number => {
    //logic
}

此片段將回傳

function optional(a: number, b?: number){
    console.log(a)
}

觀察到，在A處，我們將一個名為description的屬性附加到函數中，該屬性只能透過物件來實現。

由此得出結論；

物件可以用介面來描述（通常）。對於函數來說，這也是可以的。但是，這只是您在向函數添加特殊屬性時應該考慮的事情。

function multiplier(factor){
    return value => factor * value
}

註解 A 是我們描述函數的參數和回傳類型的地方。

因此，要在打字稿中註解早期的程式碼，

const n  = multiplier(6)
n(8) // 48

觀察我們在A處的喊叫功能中使用介面的方式。

---

為什麼我應該了解如何在 Typescript 中註解函數？

嗯，它有助於建立更聰明的類型系統，從而減少出現錯誤的機會。如果您正在建立程式庫或框架，您可能必須使用此處提到的部分或大部分概念。
如果您只是使用庫，這些概念並不是真正必要的，儘管它們可以讓您更深入地了解您正在使用的庫。

如果您有任何疑問或本文中存在錯誤，請隨時在下面的評論中分享⭐

以上是在 Typescript 中註解函數的詳細內容。更多資訊請關注PHP中文網其他相關文章！