文字列ユニオンとオートコンプリート
既知の文字列値に対するエディターのオートコンプリートを利用します。
「文字列ユニオンとオートコンプリート」はCoddyKit上の無料TypeScript Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはTypeScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 TypeScript Academyコースには全4レッスンが含まれています。
ユニオン型で自動補完を実現する
文字列リテラルのユニオン型には、許可する値を制限しながらエディターの自動補完にも利用できるという2つの役割があります。ただし、候補を表示しつつ任意の文字列も渡せるようにしたい場合があります。そのための巧妙なテクニックがあります。
基本的な文字列リテラルのユニオン型
許可する文字列のユニオン型を宣言します。エディターにはその選択肢だけが表示され、無効な値はコンパイルエラーになります。
type Variant = "primary" | "secondary" | "danger"
const v: Variant = "primary"
console.log(v)
// const bad: Variant = "warning" // Errorエディターでの自動補完
パラメーターが文字列リテラルのユニオン型の場合、呼び出し中に入力すると、そのメンバーが正確に候補として表示されます。これはTypeScriptで特に高く評価されている使い勝手の1つです。
type Color = "red" | "green" | "blue"
function paint(c: Color) { return c }
console.log(paint("green")) // editor suggests red/green/blue制限事項
厳密なユニオン型は、リストにない値をすべて禁止します。一方で、よく使う値を候補として提示しながら、任意のカスタム文字列も許可したい場合があります。通常のユニオン型では、この両方を実現できません。
type Color = "red" | "green"
// You cannot pass "#ff8800" — it is not in the union
function paint(c: Color) { return c }
console.log(paint("red"))型を広げると候補が失われる
単にstringを使うと、どんな値でも使える代わりに自動補完が完全に表示されなくなります。すべてのヒントと引き換えに完全な柔軟性を得ることになりますが、理想的とはいえません。
function paint(c: string) { return c }
console.log(paint("#ff8800")) // works, but no suggestionsstringとリテラルユニオンのテクニック
テクニックは、リテラル型とstring & {}をユニオン型にすることです。リテラル型は自動補完に表示され続け、string & {}によってユニオン型を単なるstringに縮退させず、ほかの任意の文字列も許可できます。
type Color = "red" | "green" | (string & {})
const a: Color = "red" // suggested
const b: Color = "#ff8800" // also allowed
console.log(a, b)stringと空オブジェクトで機能する理由
通常、'red' | stringは単なるstringに単純化され、リテラル型が消えてしまいます。{}との交差型を作ると少し異なる型になり、TypeScriptはそれを別の型として保持します。そのため、任意の文字列を受け入れながら、補完用のリテラル型も残せます。
type A = "red" | string // collapses to string — no hints
type B = "red" | (string & {}) // keeps "red" as a suggestion
const x: B = "red"
console.log(x)再利用可能なヘルパー
このテクニックをジェネリックなエイリアスで包むと、意図が明確になり、コードベース全体で再利用できます。
type LiteralUnion<T extends string> = T | (string & {})
type Size = LiteralUnion<"sm" | "md" | "lg">
const s: Size = "custom-size"
console.log(s)関数に適用する
APIでこのヘルパーを使うと、よく使う入力の候補を呼び出し側に示しながら、独自の値も受け入れられます。
type LiteralUnion<T extends string> = T | (string & {})
function setIcon(name: LiteralUnion<"home" | "search">) { return name }
console.log(setIcon("home")) // suggested
console.log(setIcon("my-icon")) // allowedこのテクニックを使う場面
アイコン名、CSS単位、テーマトークン、フレームワークのプリセットなど、APIでよく知られた値を提供しつつ拡張性も必要な場合に使います。値の集合を限定したい場合は、完全な安全性を得られる厳密なユニオン型を優先してください。
type LiteralUnion<T extends string> = T | (string & {})
type Unit = LiteralUnion<"px" | "rem" | "%">
const u: Unit = "vh"
console.log(u)トレードオフ
このテクニックは候補を維持する一方で安全性を緩めるため、カスタム文字列のタイプミスは検出されなくなります。拡張性が必要な場面で意図的に使い、デフォルトにはしないでください。
type LiteralUnion<T extends string> = T | (string & {})
type Status = LiteralUnion<"active" | "inactive">
const s: Status = "actvie" // typo NOT caught — the cost of openness
console.log(s)理解度チェック
自動補完のテクニックについての理解度を確認しましょう。
まとめ
文字列リテラルのユニオン型はエディターの自動補完を実現し、値を制限します。ただし、厳密なユニオン型はカスタム文字列を禁止し、通常のstringはすべてのヒントを失わせます。T | (string & {})というテクニックを使うと、リテラル型を候補として残しながら任意の文字列を受け入れられます。これをLiteralUnion<T>ヘルパーとして包み、拡張性を意図した場面だけで使ってください。タイプミスを検出する安全性は失われます。
よくある質問
「文字列ユニオンとオートコンプリート」レッスンは無料ですか？
はい。「文字列ユニオンとオートコンプリート」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、TypeScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 TypeScript Academyコースには全4レッスンが含まれています。
「文字列ユニオンとオートコンプリート」で何を学びますか？
既知の文字列値に対するエディターのオートコンプリートを利用します。 ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
TypeScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのTypeScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「文字列ユニオンとオートコンプリート」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このTypeScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのTypeScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- テンプレートリテラル型の基礎
- 構造化された文字列のモデル化
- 文字列ユニオンとオートコンプリート
- 組み込みの文字列操作型