typeof型演算子
typeofを使って実行時の値の型を取得します。
「typeof型演算子」はCoddyKit上の無料TypeScript Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはTypeScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 TypeScript Academyコースには全4レッスンが含まれています。
値から型を作る
typeof型演算子は、実行時の値から静的な型を導出します。これにより、値を一度だけ記述し、その形状を型として再利用できるため、値と型を完全に同期させられます。
2種類のtypeof
混同しないようにしてください。JavaScriptのtypeofは実行時に文字列を返します。一方、TypeScriptのtypeofは型の位置に現れ、型を生成します。同じキーワードですが、異なる世界で使われます。
const n = 42
console.log(typeof n) // "number" — JS runtime
type T = typeof n // number — TS type position変数の型を取得する
型注釈で値の前にtypeofを置くと、その値から推論された型を取得できます。ここではTがstringになります。
const greeting = "hello"
type G = typeof greeting // string
const another: G = "world"
console.log(another)オブジェクトの形状を取得する
constオブジェクトにtypeofを適用すると、推論された完全な形状が得られます。インターフェースを手作業で記述する必要はありません。
const config = { host: "localhost", port: 8080 }
type Config = typeof config // { host: string; port: number }
const c: Config = { host: "127.0.0.1", port: 3000 }
console.log(c)推論ではデフォルトで型が拡大される
何も指定しない場合、TypeScriptはリテラルを拡大します。port: 8080はリテラルの8080ではなくnumberになります。多くの場合は問題ありませんが、正確な値を保持したいこともあります。
const settings = { mode: "dark" }
type S = typeof settings // { mode: string }
const x: S = { mode: "anything" }
console.log(x)typeofとas const
as constを追加すると、値を最も狭いリテラル型に固定できます。これでtypeofは正確なリテラルを取得し、すべてにreadonlyを付けます。
const settings = { mode: "dark" } as const
type S = typeof settings // { readonly mode: "dark" }
const x: S = { mode: "dark" }
console.log(x)配列からリテラル型を作る
as constを使うと、配列に対するtypeofはリテラル型のreadonlyタプルになります。これは値の共用体を導出するための構成要素です。
const roles = ["admin", "editor", "viewer"] as const
type Roles = typeof roles // readonly ["admin", "editor", "viewer"]
console.log(roles[0])値の共用体を導出する
typeofと[number]によるインデックスアクセスを組み合わせると、定数の配列を、その値の共用体型に変換できます。
const roles = ["admin", "editor", "viewer"] as const
type Role = typeof roles[number] // "admin" | "editor" | "viewer"
const r: Role = "editor"
console.log(r)関数に対するtypeof
関数の型も取得できます。ラッパーに型を付けたり、別の場所でシグネチャを再利用したりする場合に便利です。
function add(a: number, b: number) { return a + b }
type AddFn = typeof add // (a: number, b: number) => number
const myAdd: AddFn = (x, y) => x + y
console.log(myAdd(2, 3))型を同期させる
大きな利点は、設定や定数を値として一度だけ定義し、typeofで型を導出できることです。値を変更すると型も自動的に更新されるため、重複がありません。
const defaults = { retries: 3, timeout: 1000 }
type Defaults = typeof defaults
function apply(opts: Defaults) { return opts.retries }
console.log(apply(defaults))識別子に対してのみ使える
typeof型演算子に指定できるのは、識別子またはプロパティパスであり、任意の式ではありません。typeof (a + b)は許可されません。
const obj = { user: { name: "Ada" } }
type Name = typeof obj.user.name // string
const n: Name = "Leo"
console.log(n)理解度チェック
typeof型演算子についての理解度を確認してください。
まとめ
typeof型演算子は、型の位置で使うと、値から型を導出します。対象は変数、オブジェクト、配列、関数などです。デフォルトではリテラルの型が拡大されますが、as constを追加すると、正確なリテラル型をreadonlyとして取得できます。インデックスアクセス（typeof arr[number]）と組み合わせると、値の共用体を作成できます。値から型を導出すると、単一の信頼できる情報源を保ち、形状の重複を避けられます。
よくある質問
「typeof型演算子」レッスンは無料ですか？
はい。「typeof型演算子」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、TypeScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 TypeScript Academyコースには全4レッスンが含まれています。
「typeof型演算子」で何を学びますか？
typeofを使って実行時の値の型を取得します。 ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
TypeScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのTypeScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「typeof型演算子」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このTypeScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのTypeScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- typeof型演算子
- keyof型演算子
- インデックスアクセス型
- typeofとkeyofの組み合わせ