constアサーションとas const
as constを使ってリテラル型やタプル型を正確に推論します。
「constアサーションとas const」はCoddyKit上の無料TypeScript Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはTypeScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 TypeScript Academyコースには全4レッスンが含まれています。
as constとは
as constは、式に対して可能な限り具体的なリテラル型を推論し、すべてのプロパティをreadonlyにするようTypeScriptに指示する型アサーションです。
const colors = ["red", "green", "blue"] as const;
// type: readonly ["red", "green", "blue"]as constによる型の拡大の防止
as constがない場合、配列やオブジェクト内の文字列値はstringに拡大されます。使用すると、リテラル型のまま保持されます。
const dir1 = { direction: "left" };
// dir1.direction: string
const dir2 = { direction: "left" } as const;
// dir2.direction: "left"オブジェクトリテラルでのas const
as constを付けたオブジェクトのすべてのプロパティはreadonlyになり、再帰的にリテラル型を保持します。
const theme = {
color: "dark",
sizes: { sm: 8, md: 16 },
} as const;
// theme.color: "dark", theme.sizes.sm: 8 (all readonly)タプル型のためのas const
as constを付けた配列は、リテラル要素型を持つreadonlyタプルになります。固定された引数リストの定義に便利です。
const args = [1, "hello", true] as const;
// type: readonly [1, "hello", true]as constからの共用体型の導出
よく使われるパターンは、値のas const配列を定義し、typeofとインデックスアクセスを使ってそこから共用体型を導出する方法です。
const STATUSES = ["pending", "active", "done"] as const;
type Status = typeof STATUSES[number];
// type Status = "pending" | "active" | "done"関数の引数でのas const
関数を呼び出すときにas constをインラインで使用すると、呼び出しの境界を越えてリテラル型を保持できます。
function setMode(mode: "dark" | "light") {}
setMode("dark" as const); // safe, preserves literalreadonlyの再帰的適用
as constはReadonlyを再帰的に適用します。ネストされたオブジェクトや配列もすべてreadonlyになり、深い階層の変更を防ぎます。
const config = { db: { host: "localhost", port: 5432 } } as const;
// config.db.port = 5433; // Error: readonlyas constとObject.freeze
as constはコンパイル時のアサーションであり、実行時の保護は行いません。Object.freezeは実行時に機能します。両者は補完的な役割を果たします。
const obj = Object.freeze({ x: 1 }); // runtime immutability
const obj2 = { x: 1 } as const; // compile-time literal typesconst アサーションと型注釈
型注釈では型が広がります。const x: string = "hi"の型はstringになります。一方、as constでは型が狭まり、const x = "hi" as constの型は"hi"になります。
const a: string = "hi"; // type: string
const b = "hi" as const; // type: "hi"実践的な用途: enum のようなオブジェクト
多くのコードベースでは、enum の代わりにas constを付けたオブジェクトを使用します。これにより、enum の問題を避けながら型安全性を維持できます。
const Direction = { Up: "UP", Down: "DOWN" } as const;
type Direction = typeof Direction[keyof typeof Direction];
// "UP" | "DOWN"復習: as const
as constを使うと、TypeScript はリテラル型を推論し、すべてのプロパティを readonly として扱います。配列から正確な共用体型を導出したり、安全な設定オブジェクトを作成したりするうえで不可欠です。
確認問題
as constは配列に対して何を行いますか。
学んだこと
as constは、リテラル型を確定させ、readonly 構造を作成し、配列から正確な共用体型を導出するための強力なツールです。高度な TypeScript パターンの基盤となる機能です。
よくある質問
「constアサーションとas const」レッスンは無料ですか？
はい。「constアサーションとas const」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、TypeScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 TypeScript Academyコースには全4レッスンが含まれています。
「constアサーションとas const」で何を学びますか？
as constを使ってリテラル型やタプル型を正確に推論します。 ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
TypeScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのTypeScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「constアサーションとas const」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このTypeScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのTypeScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- 型のWideningとNarrowingの仕組み
- Contextual Typing：コンテキストからの推論
- Freshnessと余分なプロパティチェック
- constアサーションとas const