Menu
CoddyTech

アロー関数の型定義

CoddyのJavaScriptジャーニー「Introduction To TypeScript」セクションの一部。レッスン 23/73。

アロー関数の場合、通常の関数と同じように、括弧内のパラメータに型注釈を追加します。戻り値の型注釈は、パラメータリストの後、かつアロー(=>)の前に記述します:

const multiply = (a: number, b: number): number => {
  return a * b;
};

const greet = (name: string): string => `Hello, ${name}!`;

通常の関数宣言との主な違いは、戻り値の型注釈が関数名の後ではなく、アロー(矢印)の前に記述される点です。これにより、アロー関数を人気にしているクリーンでモダンな構文を保持しながら、TypeScriptの型安全性を維持することができます。

challenge icon

チャレンジ

簡単

すべての型アノテーションを維持したまま、次の通常の関数宣言をアロー関数に変換してください:

function subtract(a: number, b: number): number {
  return a - b;
}

同じパラメータ型と戻り値の型で、同じ操作を実行する subtract という名前のアロー関数を作成します。

次に、さらに2つのアロー関数を作成してください:

  • string 型のパラメータ text を受け取り、"Message: [text]" という形式の文字列を返す、createMessage という名前のアロー関数。パラメータと戻り値の両方に明示的な型アノテーションを含めてください。
  • number 型のパラメータ num を受け取り、その数値が0より大きい場合は true を、そうでない場合は false を返す、isPositive という名前のアロー関数。パラメータと戻り値の両方に明示的な型アノテーションを含めてください。

作成したアロー関数を次の値で呼び出し、結果を出力してテストしてください:

  • subtract を 10 と 3 で呼び出す
  • createMessage を "Hello World" で呼び出す
  • isPositive を -5 で呼び出す
  • isPositive を 8 で呼び出す

各結果を、上記の順序で個別の行に出力してください。

自分で試してみよう

// TODO: 通常の関数をアロー関数に変換し、追加のアロー関数を作成します

// TODO: 型注釈を付けて subtract アロー関数を作成します

// TODO: 型注釈を付けて createMessage アロー関数を作成します

// TODO: 型注釈を付けて isPositive アロー関数を作成します

// TODO: アロー関数をテストし、結果を出力します
quiz icon腕試し

このレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。

Introduction To TypeScriptのすべてのレッスン

自分で練習してみよう: TypeScriptプレイグラウンド