TypeScript の関数

1. 関数の定義

1.1 JavaScript の関数

TypeScript の関数について学習する前に、JavaScript でよく使用される次の関数定義を確認しましょう。

最初の方法: functionキーワードを使用して関数を宣言する

関数 add1 (x, y) {
    x + yを返す
}

2番目の方法: リテラル値を使用して関数を宣言する

定数add2 = 関数(x, y) {
    x + yを返す
}

3番目の方法: 矢印関数を使用して関数を宣言する

定数add3 = (x, y) => {
    x + yを返す
}

1.2 TypeScriptの関数

TS での関数宣言方法は JS と似ています。唯一の違いは、パラメータの型と戻り値の型が固定されていることです。戻り値がない場合は、戻り値の型を空白のままにするのではなく、void にする必要があります。

次に、TS を使用して上記の 3 つの関数を再宣言します。

最初の方法は、function キーワードを使用して関数を宣言することです。

/*
 構文構造は次のようになります: 関数 関数名 (パラメータ 1: 型、パラメータ 2: 型、...): 戻り値の型 {
     関数本体}
 */
関数 add4(x: 数値, y: 数値): 数値 {
    x + yを返す
}

2番目の方法: リテラル値を使用して関数を宣言する

/*
 構文構造は次のようになります: const 関数名 = 関数 (パラメータ 1: 型、パラメータ 2: 型、...): 戻り値の型 {
     関数本体}
 */
const add5 = 関数 (x: 数値, y: 数値): 数値 {
    x + yを返す
}

3番目の方法: 矢印関数を使用して関数を宣言する

/*
 構文構造は次のとおりです: const 関数名 = (パラメータ 1: 型、パラメータ 2: 型、...): 戻り値の型 => {
     関数本体}
 */
// 3. 矢印関数を使用して関数を宣言します。const add6 = (x: number, y: number): number => {
    x + yを返す
}

上記は TS で関数を宣言する方法です。 JS ではパラメータ分離割り当ての状況もあります。TS でパラメータの型を指定するにはどうすればよいでしょうか?サンプルコードは次のとおりです。

const add7 = ({ x, y }: { x: 数値; y: 数値 }): 数値 => {
    x + yを返す
}

TS では、次のように、より読みやすい書き方もあります。

const add8: (baseValue: 数値、増分: 数値) => 数値 = 関数 (
    x: 数値、
    y: 数値
）： 番号 {
    x + yを返す
}

このメソッドは関数を 2 つの部分に分割します。最初の部分は関数の戻り値の型であり、2 番目の部分は関数が定義される場所です。

実は、前半はコードの可読性を高めるためだけのもので、実用的な意味はあまりありません。

2. オプションパラメータとデフォルトパラメータ

TypeScriptのすべての関数は必須です。これは、null やundefinedパラメータとして渡すことができないという意味ではなく、パラメータごとに値が渡されるかどうかを意味します。1 対 1 の対応がない場合、例外がスローされます。簡単に言えば、仮パラメータの数は実際のパラメータの数と同じです。

サンプルコードは次のとおりです。

関数 add(x: 数値, y: 数値): 数値 {
    x + yを返す
}
let result1 = add(1) // 引数は 2 つ必要でしたが、 1 つでした。
結果2 = add(1, 2) とします。
let result3 = add(1, 2, 3) // 引数は2つ必要だったが、3つになった

JS では、各パラメータはオプションであり、渡すことも渡さないこともできます。渡されなかった場合は、 undefinedのデフォルト値になります。

これは TS でも可能です。オプションのパラメータ関数を実装するには、パラメータ名の後に ? を追加するだけです。

次のコード:

// オプションパラメータ関数を実装する // パラメータ名の横に?を追加するだけ function add(x: number, y?: number): number {
  x + yを返す
}
結果1 = add(1)とする
結果2 = add(1, 2) とします。
// let result3 = add(1, 2, 3) // 引数は 2 つ必要でしたが、3 つでした

上記のコードはオプションパラメータを実装しています

TS でデフォルト パラメータを実装するのは、JS でデフォルト パラメータを実装するのと同じです。値を割り当てるだけです。

サンプルコードは次のとおりです。

;（関数 （） {
  関数 add(x: 数値, y: 数値 = 2): 数値 {
    x + yを返す
  }
  結果1 = add(1) // 3
  result2 = add(1, 2) // 3 とします。
})()

もちろん、y に型を指定しない場合は、JS の場合とまったく同じになります。

3. 残りのパラメータ

いわゆる残余パラメータとは、関数を定義するときに 2 つのパラメータを渡す必要があるが、関数を呼び出すときに 3 つのパラメータが渡される場合です。このとき、余分なパラメータがあり、それが残余パラメータです。

JS では、 argumentsを使用して渡された追加のパラメータにアクセスできます。では、TS の残りのパラメータにどのようにアクセスするのでしょうか?

実際、TS では、すべてのパラメータを変数に格納できますが、この変数は実際には分離された配列です。

サンプルコードは次のとおりです。

関数 fun(x: 数値, ...数値: 数値[]): void {
    console.log(数字)
}
関数1, 2, 3, 4 // [ 2, 3, 4 ]

TypeScript の関数に関するこの記事はこれで終わりです。TypeScript 関数に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。