テンプレートリテラル型
文字列リテラル型とテンプレートリテラル構文を組み合わせ、イベント名、CSSプロパティ文字列、APIルートパスなどの型を導出します。
「テンプレートリテラル型」はCoddyKit上の無料Frontend Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはFrontend Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Frontend Academyコースには全4レッスンが含まれています。
テンプレートリテラル型とは
TypeScriptでは、型レベルでテンプレートリテラルから文字列型を構築できます。ユニオン型と組み合わせると、すべてを列挙せずに何千もの有効な文字列を表現できます。
テンプレートリテラル型の基本
型の位置ではバッククォートで囲んだ文字列を使用します。そこには、ほかの型を補間として含められます。
type Greeting = `Hello, ${string}!`;
const a: Greeting = 'Hello, Alice!'; // OK
const b: Greeting = 'Hi, Alice!'; // Errorユニオンの組み合わせ
ユニオンを補間すると、TypeScriptはすべての組み合わせの直積を作成します。
type Direction = 'top' | 'right' | 'bottom' | 'left';
type Property = 'margin' | 'padding';
type Side = `${Property}-${Direction}`;
// 'margin-top' | 'margin-right' | ... | 'padding-left' (8 strings)イベント名の推論
イベント名からイベントハンドラー名を導出します。これは実際の開発でよく使われる典型的な用途です。
type EventName = 'click' | 'focus' | 'blur' | 'change';
type HandlerName = `on${Capitalize<EventName>}`;
// 'onClick' | 'onFocus' | 'onBlur' | 'onChange'
type Handlers = { [K in HandlerName]?: (e: Event) => void };
// { onClick?: ...; onFocus?: ...; onBlur?: ...; onChange?: ... }文字列操作のユーティリティ型
TypeScriptには、Uppercase<T>、Lowercase<T>、Capitalize<T>、Uncapitalize<T>という組み込みヘルパーがあります。
type Hi = Capitalize<'hello'>; // 'Hello'
type Yell = Uppercase<'hello'>; // 'HELLO'
type Quiet = Lowercase<'HELLO'>; // 'hello'
type Lower = Uncapitalize<'Hi'>; // 'hi'CSSプロパティの型
ピクセル値、16進数カラー、パーセンテージなど、CSSに似た文字列型を表現します。
type Px = `${number}px`;
type Hex = `#${string}`;
type Pct = `${number}%`;
type Style = { padding: Px; color: Hex; width: Pct };
const s: Style = { padding: '8px', color: '#fff', width: '50%' }; // OK
const bad: Style = { padding: '8', color: 'white', width: '50' }; // Errorテンプレートリテラルによる推論
inferキーワードを使うと、文字列型の一部を抽出できます。パーサーやルート型に役立ちます。
type ExtractName<T> = T extends `Hello, ${infer Name}!` ? Name : never;
type Result = ExtractName<'Hello, Alice!'>; // 'Alice'APIルートの型
型安全なAPIルートを作成します。文字列パターンからパスパラメータを抽出できます。
type PathParams<T extends string> =
T extends `${string}/:${infer Param}/${infer Rest}`
? { [K in Param | keyof PathParams<`/${Rest}`>]: string }
: T extends `${string}/:${infer Param}`
? { [K in Param]: string }
: {};
type P = PathParams<'/users/:userId/posts/:postId'>;
// { userId: string; postId: string }Tailwindクラス候補の型
文字列propsを、デザインシステムで定義された値に制限します。
type Spacing = 0 | 1 | 2 | 4 | 8 | 16;
type Side = 't' | 'r' | 'b' | 'l';
type TwSpacing = `m${Side}-${Spacing}` | `p${Side}-${Spacing}`;
// 'mt-0' | 'mt-1' | ... | 'pl-16'
function Box(props: { className: TwSpacing }) { /* ... */ }制限とコンパイラーのパフォーマンス
テンプレートリテラルの直積は急激に増大することがあります（50 × 50のユニオンでは2500個の文字列が生成されます）。TypeScriptはコンパイルできますが、推論が遅くなります。候補となる値の種類は少なく保ちます。
文字列リテラル型の区別
テンプレートリテラルを、より表現力の高いブランディングの形式として使用します。文字列でありながら、値を制約できます。
確認問題
type X = `on${Capitalize<'click' | 'focus'>}`は何になりますか。
まとめ：テンプレートリテラル型
補間したユニオンを含むテンプレートリテラルから、文字列型を構築します。直積はすぐに増大するため、候補となる値の種類は少なく保ちます。Capitalize、Uppercase、Lowercase、Uncapitalizeを使用します。inferと組み合わせて文字列の一部を抽出します。イベント名、CSS値、ルートパラメータ、デザインシステムのクラス名に適しています。
よくある質問
「テンプレートリテラル型」レッスンは無料ですか？
はい。「テンプレートリテラル型」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Frontend Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Frontend Academyコースには全4レッスンが含まれています。
「テンプレートリテラル型」で何を学びますか？
文字列リテラル型とテンプレートリテラル構文を組み合わせ、イベント名、CSSプロパティ文字列、APIルートパスなどの型を導出します。 ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Frontend Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのFrontend Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「テンプレートリテラル型」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このFrontend Academyレッスンでコードを書いて実行できますか？
はい。すべてのFrontend Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。