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

関数の値には、次のように typescript で注釈が付けられます

(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>

これでうまくいきました。

しかし、関数パラメータを持つジェネリック関数についてはどうでしょうか。

たとえば、JavaScript で次のように記述された myMap という名前のカスタム マップ関数に注釈を付けたいとします

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>

この関数は 2 次元配列の最初の要素を選択します

これにより、 のように配列と文字列 (ほとんど
) に対してのみ機能することが保証されます。

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

2 番目の例は、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 では、関数の引数と戻り値の型を説明します。

したがって、typescript で以前のコードに注釈を付けるには、

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

A のシャウト関数でインターフェイスを使用した方法を観察してください。

---

Typescript で関数に注釈を付ける方法を理解する必要があるのはなぜですか?

そうですね、これはよりスマートな型システムを構築するのに役立ち、結果としてバグの可能性が減ります。ライブラリまたはフレームワークを構築している場合は、ここで説明した概念の一部またはほとんどを使用する必要がある場合があります。
ライブラリを使用しているだけの場合、これらの概念は、使用しているライブラリについてより深く理解するためには役立ちますが、実際には必要ありません。

この文章に質問や間違いがある場合は、下のコメント欄でお気軽に共有してください ⭐

以上がTypescript での関数の注釈付けの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。