型のWideningとNarrowingの仕組み
TypeScriptが型を拡大する仕組みと、それを防ぐタイミングを学びます。
「型のWideningとNarrowingの仕組み」はCoddyKit上の無料TypeScript Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはTypeScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 TypeScript Academyコースには全4レッスンが含まれています。
型の拡大とは
型の拡大とは、TypeScriptが記述した型よりも広い型を推論することです。let x = "hello"を代入すると、リテラル型の"hello"ではなくstringに拡大されます。
let x = "hello"; // inferred: string, not "hello"
let y = 42; // inferred: number, not 42letとconstでの型の拡大
constで宣言した変数は再代入できないため、リテラル型を保持します。letでは基底型に拡大されます。
const a = "world"; // type: "world"
let b = "world"; // type: string型注釈による型の拡大の防止
let変数に明示的な型注釈を付けると、型の拡大を防ぎ、リテラル型を固定できます。
let direction: "left" | "right" = "left";
// direction = "up"; // Error: not assignabletypeofによる型の絞り込み
TypeScriptはtypeofチェックの中で共用体型を絞り込み、その分岐内でより正確な型を提供します。
function format(val: string | number) {
if (typeof val === "string") {
return val.toUpperCase(); // val: string here
}
return val.toFixed(2); // val: number here
}等価性チェックによる型の絞り込み
リテラル値との等価性チェックでも、その分岐内で型が絞り込まれます。
type Direction = "left" | "right" | "up";
function handle(dir: Direction) {
if (dir === "left") {
console.log("Going left"); // dir: "left"
}
}制御フロー分析
TypeScriptは制御フローを通じて代入を追跡し、各分岐の後で型を絞り込みます。
function process(x: string | null) {
if (x === null) return;
// x is string here — TypeScript knows null is ruled out
console.log(x.length);
}オブジェクトリテラルでの型の拡大
as constを使用しない限り、オブジェクトリテラルのプロパティ値も拡大されます。
const config = { mode: "dark" };
// config.mode: string (widened)
const config2 = { mode: "dark" } as const;
// config2.mode: "dark" (literal)Freshnessと型の拡大
オブジェクトリテラルを型付き変数に直接代入すると、TypeScriptは余剰プロパティチェックを適用します。ただし、名前付き変数にいったん拡大すると、そのチェックは適用されなくなります。
interface Options { timeout: number; }
const opts = { timeout: 3000, retry: true };
// No error — widened type, excess property check skipped
const o: Options = opts;in演算子による型の絞り込み
in演算子は、プロパティの存在を確認することでオブジェクトの共用体型を絞り込みます。
type Cat = { meow(): void };
type Dog = { bark(): void };
function speak(animal: Cat | Dog) {
if ("meow" in animal) animal.meow();
else animal.bark();
}アサーション関数による型の絞り込み
アサーション関数は、asserts conditionという戻り値の型を使い、呼び出し後に型を絞り込みます。
function assertString(val: unknown): asserts val is string {
if (typeof val !== "string") throw new Error("Expected string");
}
const x: unknown = "hi";
assertString(x);
x.toUpperCase(); // OK — narrowed to stringまとめ：型の拡大と絞り込み
型の拡大は推論された型を広げて柔軟性を高め、型の絞り込みは条件分岐の中で広い型を正確な型に限定します。両方を理解することで、より安全なTypeScriptを書けるようになります。
クイックチェック
基底型への拡大を防ぐ宣言はどれですか。
学んだこと
型の拡大（TypeScriptが推論された型を広げる仕組み）と、型の絞り込み（条件チェックによって正確な型を得る仕組み）を理解しました。as constで型の拡大を防ぎ、制御フローのチェックで共用体型を安全に絞り込んでください。
よくある質問
「型のWideningとNarrowingの仕組み」レッスンは無料ですか？
はい。「型のWideningとNarrowingの仕組み」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、TypeScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 TypeScript Academyコースには全4レッスンが含まれています。
「型のWideningとNarrowingの仕組み」で何を学びますか？
TypeScriptが型を拡大する仕組みと、それを防ぐタイミングを学びます。 ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
TypeScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのTypeScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「型のWideningとNarrowingの仕組み」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このTypeScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのTypeScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- 型のWideningとNarrowingの仕組み
- Contextual Typing：コンテキストからの推論
- Freshnessと余分なプロパティチェック
- constアサーションとas const