アロー関数の型定義
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の型安全性を維持することができます。
チャレンジ
簡単すべての型アノテーションを維持したまま、次の通常の関数宣言をアロー関数に変換してください:
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: アロー関数をテストし、結果を出力しますこのレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。
Introduction To TypeScriptのすべてのレッスン
2基本の型
基本の型: str, num, boolean'any' 型: 脱出ハッチ'unknown' 型'null' と 'undef' の扱い型推論の実践明示的な型アノテーションまとめ:基本の型の演習5型:エイリアス、ユニオン型、インターセクション型
プリミティブ型の型エイリアスユニオン型 ('|')ユニオン型の扱い方リテラル型インターセクション型 ('&')型エイリアスの組み合わせまとめ:高度な型の組み合わせ自分で練習してみよう: TypeScriptプレイグラウンド