在 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中文网其他相关文章！