アロー関数とコンテキスト型付け
アロー関数を自在に使い、使用方法からコンテキスト型付けによってパラメーターや戻り値の型が推論される仕組みを学びます
「アロー関数とコンテキスト型付け」はCoddyKit上の無料TypeScript Academyレッスンです。 これはレッスン3/3です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはTypeScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 TypeScript Academyコースには全3レッスンが含まれています。
アロー関数とコンテキストを使う理由
アロー関数は簡潔な構文と字句的なthisを提供します。コンテキスト型付けにより、TypeScriptは使用箇所(例:配列メソッド)からパラメーターと戻り値の型を推論するため、安全性を保ちながら定型コードを減らせます。
アロー関数の基礎
明確さが増す場合は、パラメーターと戻り値に型注釈を付けます。アロー関数は簡潔で、周囲のthisを保持します(function宣言とは異なります)。
// Arrow syntax: parameters => expression/body
const greet = (name: string): string => {
return `Hello, ${name}`;
};
console.log(greet("Ada"));mapによるコンテキスト
コンテキスト型付け:mapは要素の型を把握しているため、アロー関数のパラメーターはnumber、結果はnumber[]として推論されます。
// Context supplies types: numbers.map expects (n:number)=>number
const numbers = [1, 2, 3];
const doubled = numbers.map(n => n * 2); // n inferred as number
console.log(doubled);推論される戻り値
型付きAPI(Promise、配列メソッド)がパラメーターと戻り値の推論を導くため、明示的な型注釈を付ける必要が少なくなります。
// Promise.then infers the callback parameter and return type
const toLength = (s: string) => s.length;
Promise.resolve("TS")
.then(s => toLength(s)) // s inferred as string
.then(len => console.log(len));オプションとデフォルト
アロー関数はデフォルトパラメーターとオプションパラメーターに対応しています。オプションの値を使う前に、絞り込むか代替値(例:??)を指定します。
// Optional + default with arrows
const padLeft = (text: string, width = 2, ch?: string): string => {
const fill = (ch ?? " ").repeat(Math.max(0, width));
return fill + text;
};
console.log(padLeft("X")); // default width 2, default char " "
console.log(padLeft("X", 4, "."));注意点
注意点:
- 型注釈を付けすぎると推論が機能しなくなるため、最小限から始めます。
- 型付けされていないAPI(any)を使う場合や意図が不明確な場合は、明示的に指定します。
- アロー関数はthisを字句的に捕捉します。コールバックには適していますが、動的なthisが必要な場合は避けてください。
コンテキスト型付けチェック
クイックチェック:アロー関数における「コンテキスト型付け」とは何を意味しますか?
まとめと次のステップ
まとめ:アロー関数は簡潔な構文と字句的なthisを提供します。コンテキスト型付けでは使用箇所をもとに推論するため、コールバックを短く保ちながら型安全にできます。
よくある質問
「アロー関数とコンテキスト型付け」レッスンは無料ですか?
はい。「アロー関数とコンテキスト型付け」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し(組み込みコードエディタと24時間対応のAIチューター)、TypeScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 TypeScript Academyコースには全3レッスンが含まれています。
「アロー関数とコンテキスト型付け」で何を学びますか?
アロー関数を自在に使い、使用方法からコンテキスト型付けによってパラメーターや戻り値の型が推論される仕組みを学びます ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
TypeScript Academyを始めるのに経験は必要ですか?
事前経験は必要ありません。CoddyKitのTypeScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/3です。
「アロー関数とコンテキスト型付け」レッスンにはどのくらい時間がかかりますか?
ほとんどのCoddyKitレッスンは約5~10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このTypeScript Academyレッスンでコードを書いて実行できますか?
はい。すべてのTypeScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。