Contextual Typing：コンテキストからの推論
TypeScriptが周囲のコンテキストから型を推論する仕組みを理解します。
「Contextual Typing：コンテキストからの推論」はCoddyKit上の無料TypeScript Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはTypeScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 TypeScript Academyコースには全4レッスンが含まれています。
コンテキスト型付けとは
コンテキスト型付けとは、式そのものの値ではなく、その式が現れる位置の情報に基づいてTypeScriptが型を推論する仕組みです。
document.addEventListener("click", (e) => {
// e is inferred as MouseEvent from the event type
console.log(e.clientX);
});コールバックのコンテキスト型付け
型付き関数にコールバックを渡すと、TypeScriptは期待されるコールバックのシグネチャからパラメーターの型を推論します。
const nums = [1, 2, 3];
nums.forEach((n) => {
// n inferred as number from Array<number>
console.log(n.toFixed(2));
});オブジェクトリテラルのコンテキスト型付け
オブジェクトリテラルを型付き変数に代入すると、そのプロパティの型が対象の型から推論され、正確なチェックが可能になります。
interface Config { timeout: number; retries: number; }
const config: Config = {
timeout: 3000,
retries: 3,
// extra: true // Error: excess property
};JSXのコンテキスト型付け
Reactでは、イベントハンドラーのpropsにコンテキスト型が適用されるため、イベントパラメーターの型が自動的に推論されます。
function Button({ onClick }: { onClick: (e: React.MouseEvent) => void }) {
return <button onClick={onClick}>Click</button>;
}
// Caller: e is inferred as React.MouseEvent
<Button onClick={(e) => console.log(e.currentTarget)} />コンテキスト型付けと明示的な注釈
コンテキスト型付けは強力ですが、明示的な注釈で上書きできます。両方が存在する場合は、明示的な注釈が優先されます。
const handler: (x: string) => void = (x: number) => {}; // Error
// Explicit annotation (number) conflicts with contextual (string)分割代入のコンテキスト型付け
コンテキスト型が適用される関数の分割代入パラメーターも、コンテキストから型を引き継ぎます。
const pairs: [string, number][] = [["a", 1]];
pairs.forEach(([key, value]) => {
// key: string, value: number — contextually typed
console.log(key.toUpperCase(), value * 2);
});戻り値の型とコンテキスト型付け
関数を型付き変数に代入すると、戻り値の型もコンテキストから推論されます。
type Transform = (x: number) => string;
const double: Transform = (x) => x * 2; // Error: number not string
const str: Transform = (x) => String(x * 2); // OK条件式のコンテキスト型付け
TypeScriptは、三項演算子や論理演算子の式にもコンテキスト型を伝播できます。
const result: string | null =
Math.random() > 0.5 ? "yes" : null; // both arms typed by contextコンテキスト型付けの制限
注釈のない単独の変数など、式がコンテキストのない位置にある場合、コンテキスト型付けは適用されません。
const fn = (x) => x + 1; // x: any — no context to infer from
// Add annotation: const fn = (x: number) => x + 1;双方向推論
TypeScriptは双方向の型推論を行います。上から下へ（コンテキストから）と下から上へ（式から）の両方を推論し、最も正確な型を得るために組み合わせます。
function apply<T>(fn: (x: T) => T, val: T): T { return fn(val); }
apply((x) => x.toUpperCase(), "hello"); // x inferred as stringまとめ：コンテキスト型付け
コンテキスト型付けを使うと、TypeScriptは式が使われる位置から型を推論できます。コールバック、代入、JSXのprops、分割代入などでこの推論の仕組みが役立ちます。
クイックチェック
コールバックのパラメーターにコンテキスト型付けが適用されるのはいつですか。
学んだこと
コンテキスト型付けとは、値ではなく位置からTypeScriptが型を推論する仕組みです。コールバック、イベントハンドラー、型付きの代入を簡潔にしながら、型安全性を保てます。
よくある質問
「Contextual Typing：コンテキストからの推論」レッスンは無料ですか？
はい。「Contextual Typing：コンテキストからの推論」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、TypeScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 TypeScript Academyコースには全4レッスンが含まれています。
「Contextual Typing：コンテキストからの推論」で何を学びますか？
TypeScriptが周囲のコンテキストから型を推論する仕組みを理解します。 ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
TypeScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのTypeScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「Contextual Typing：コンテキストからの推論」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このTypeScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのTypeScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- 型のWideningとNarrowingの仕組み
- Contextual Typing：コンテキストからの推論
- Freshnessと余分なプロパティチェック
- constアサーションとas const