首頁 >web前端 >js教程 >在 Typescript 中註解函數

在 Typescript 中註解函數

Barbara Streisand
Barbara Streisand原創
2024-12-23 12:27:35547瀏覽

Annotating Functions in 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

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

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

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

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

現在可以了。

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

例如,我們想要註解一個名為 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
}

還是 array.filter() 方法?

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

通用約束

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

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

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

這確保它僅適用於數組和字串(主要),這樣

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

我們也可以使用介面

interface Lengthly{
    length: number;
}

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

功能介面

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

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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn