TypeScript Template Literal Types完全ガイド〜文字列型操作・実用25パターン【2026年版】〜

8. SQL / GraphQL のクエリパース(型レベル)

8.1 SQL 風 SELECT 文を型でパースする

type TrimLeft = S extends ` ${infer R}` ? TrimLeft : S;
type TrimRight = S extends `${infer R} ` ? TrimRight : S;
type Trim = TrimLeft<TrimRight>;

type ParseSelect =
  Q extends `SELECT ${infer Cols} FROM ${infer Table}`
    ? { columns: Split<Trim, ", ">; table: Trim }
    : never;

type Q1 = ParseSelect;
// { columns: ["id", "name", "email"]; table: "users" }
8.2 テーブル列 → 型安全な SELECT
type UsersTable = { id: number; name: string; email: string; age: number };

type SelectQuery = {
  table: string;
  columns: Cols[];
  result: Pick;
};

function select(table: string, cols: Cols[]): SelectQuery {
  return { table, columns: cols, result: {} as Pick };
}

const q = select("users", ["id", "name"]);
// q.result: { id: number; name: string }
8.3 GraphQL 風の最小パース
type ParseGqlField =
  S extends `${infer Field} { ${infer Inner} }`
    ? { field: Trim; selection: Split<Trim, " "> }
    : { field: Trim; selection: [] };

type G1 = ParseGqlField;
// { field: "user"; selection: ["id", "name", "email"] }
9. dot.notation → ネスト value
9.1 パス文字列から型を取り出す
type PathValue =
  Path extends `${infer Head}.${infer Rest}`
    ? Head extends keyof T
      ? PathValue
      : never
    : Path extends keyof T
      ? T[Path]
      : never;

type Profile = {
  user: {
    name: string;
    address: { city: string; zip: number };
  };
};

type V1 = PathValue;          // string
type V2 = PathValue;  // string
type V3 = PathValue;   // number
9.2 全パスを列挙
type Paths = T extends object
  ? {
      [K in keyof T & string]:
        | `${Prefix}${K}`
        | Paths;
    }[keyof T & string]
  : never;

type AllPaths = Paths;
// "user" | "user.name" | "user.address" | "user.address.city" | "user.address.zip"
9.3 型安全な get 関数
function get<T, P extends Paths>(obj: T, path: P): PathValue {
  return path.split(".").reduce((acc: any, key) => acc?.[key], obj);
}

const profile: Profile = {
  user: { name: "Alice", address: { city: "Tokyo", zip: 100 } },
};

const city = get(profile, "user.address.city"); // string
// get(profile, "user.unknown"); // Error
10. 形式検証: メール / UUID / 日付 / JSON Pointer
10.1 メールアドレス検証
type Email = `${string}@${string}.${string}`;

const e1: Email = "alice@example.com"; // OK
// const e2: Email = "no-at-sign"; // Error
10.2 UUID(雛形)検証
type Hex = "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9"
        | "a" | "b" | "c" | "d" | "e" | "f";

type UuidShape = `${string}-${string}-${string}-${string}-${string}`;

const u1: UuidShape = "550e8400-e29b-41d4-a716-446655440000"; // OK
// 細かい桁数は実行時バリデータ(zod 等)に任せるのが現実的
10.3 日付フォーマット YYYY-MM-DD
type DateString = `${number}-${number}-${number}`;

const d1: DateString = "2026-05-27"; // OK
// const d2: DateString = "2026/05/27"; // Error
10.4 JSON Pointer(/path/to/value)
type JsonPointer =
  P extends `/${infer Head}/${infer Rest}`
    ? Head extends keyof T
      ? JsonPointer
      : never
    : P extends `/${infer Last}`
      ? Last extends keyof T
        ? T[Last]
        : never
      : never;

type Doc = { user: { profile: { age: number } } };
type Age = JsonPointer; // number
11. Mapped Types との連携
11.1 Key Remapping でゲッター生成
type Getters = {
  [K in keyof T as `get${Capitalize}`]: () => T[K];
};

type User = { name: string; age: number };
type UserGetters = Getters;
// { getName: () => string; getAge: () => number }
11.2 セッター生成
type Setters = {
  [K in keyof T as `set${Capitalize}`]: (value: T[K]) => void;
};

type UserSetters = Setters;
// { setName: (value: string) => void; setAge: (value: number) => void }
11.3 イベントハンドラ生成
type EventHandlers = {
  [K in T as `on${Capitalize}`]: (event: { type: K }) => void;
};

type AppEvents = EventHandlers;
// { onLogin: (e: { type: "login" }) => void; onLogout: ...; onError: ... }
11.4 「filter」用に never を使ったキー除外
type RemovePrivate = {
  [K in keyof T as K extends `_${string}` ? never : K]: T[K];
};

type Raw = { id: number; name: string; _internal: boolean; _cache: unknown };
type Public = RemovePrivate; // { id: number; name: string }
12. 実践: リファクタリング「stringly typed → strongly typed」
「文字列で表現されているが、本来は限定された候補しか取らない値」を string から リテラル union や Template Literal Types に置き換えると、IDE 補完・タイプチェック・リファクタ耐性が一気に向上します。
12.1 Before(string ベタ書き)
// Before
function fetchUser(method: string, path: string) {
  // method に "GETT" などタイポしてもコンパイルエラーにならない
  return fetch(path, { method });
}

fetchUser("GETT", "/api/users"); // 通ってしまう
12.2 After(Template Literal Types でガード)
// After
type Method = "GET" | "POST" | "PUT" | "DELETE";
type ApiPath = `/api/${string}`;

function fetchUser(method: Method, path: ApiPath) {
  return fetch(path, { method });
}

fetchUser("GET", "/api/users"); // OK
// fetchUser("GETT", "/api/users"); // Error: 'GETT' は Method ではない
// fetchUser("GET", "/users"); // Error: '/users' は '/api/${string}' ではない
12.3 さらに「ルート定義」と紐付ける
const routes = {
  "GET /api/users": { /* ... */ },
  "POST /api/users": { /* ... */ },
  "GET /api/users/:id": { /* ... */ },
} as const;

type RouteKey = keyof typeof routes; // "GET /api/users" | "POST /api/users" | ...

function call(route: RouteKey) { /* ... */ }

call("GET /api/users"); // OK
// call("PATCH /api/users"); // Error
13. 型安全なクエリビルダー
13.1 列名 → SELECT 句
type Columns = (keyof T & string);

type SelectClause<T, K extends Columns> = `SELECT ${K} FROM ${string}`;

type UsersCols = Columns; // "id" | "name" | "email" | "age"
type Q = SelectClause;
// "SELECT id FROM ${string}" | "SELECT name FROM ${string}"
13.2 WHERE 句のキー検証
type WhereClause = {
  [K in keyof T]?: T[K] | { gt?: T[K]; lt?: T[K]; in?: T[K][] };
};

function where(table: T, clause: WhereClause) { /* ... */ }

where(null as any, { age: { gt: 18 }, name: "Alice" }); // OK
// where(null as any, { unknown: 1 }); // Error
13.3 ORDER BY のカラム + 方向
type OrderBy = `${keyof T & string} ${"ASC" | "DESC"}`;

type O = OrderBy;
// "id ASC" | "id DESC" | "name ASC" | "name DESC" | "email ASC" | ...

function orderBy(clause: OrderBy) { /* ... */ }

orderBy("name ASC"); // OK
// orderBy("unknown ASC"); // Error
14. ts-toolbelt / type-fest 連携
自前で全部書かなくても、ts-toolbelt や type-fest といったライブラリには Template Literal Types ベースのユーティリティが豊富に揃っています。実務では「自前」と「ライブラリ」を使い分けます。
14.1 type-fest の CamelCase / SnakeCase
import type { CamelCase, SnakeCase, KebabCase, PascalCase } from "type-fest";

type A = CamelCase;  // "userFirstName"
type B = SnakeCase;    // "user_first_name"
type C = KebabCase;    // "user-first-name"
type D = PascalCase; // "UserFirstName"
14.2 type-fest の Get(dot path)
import type { Get } from "type-fest";

type Conf = { app: { server: { port: number } } };
type Port = Get; // number
14.3 ts-toolbelt の String.Split
import type { String } from "ts-toolbelt";

type Parts = String.Split; // ["a", "b", "c"]
15. パフォーマンスと「複雑度爆発」への対処
Template Literal Types は強力ですが、再帰深度とunion の組合せ爆発に注意が必要です。
15.1 再帰深度の上限
// TS は型の再帰展開に上限がある(おおむね 1000 ステップ前後)
type RepeatN =
  Acc["length"] extends N ? Acc : RepeatN;

// 巨大 N を渡すと "Type instantiation is excessively deep" エラーになる
// type X = RepeatN; // Error
15.2 union 爆発を避ける
// NG: 5 × 5 × 5 × 5 = 625 通り。型チェックが重くなる
type Heavy = `${"a"|"b"|"c"|"d"|"e"}-${"a"|"b"|"c"|"d"|"e"}-${"a"|"b"|"c"|"d"|"e"}-${"a"|"b"|"c"|"d"|"e"}`;

// OK: 必要なら branded type + 実行時バリデーション(zod 等)に逃がす
type Branded = T & { __brand: Brand };
type SafeStr = Branded;
15.3 「型は表現に。検証は実行時に」原則
import { z } from "zod";

// 型は緩めに、実行時に厳格チェック
type Email = `${string}@${string}.${string}`;

const EmailSchema = z.string().email();

function send(to: Email, body: string) {
  EmailSchema.parse(to); // 実行時にも厳密検証
  // ...
}
15.4 大規模 union は const assertion から導出する
const COLORS = ["red", "blue", "green", "yellow"] as const;
type Color = typeof COLORS[number]; // "red" | "blue" | "green" | "yellow"

// Template Literal で使う場合も同じ
type BgClass = `bg-${Color}`;
// "bg-red" | "bg-blue" | "bg-green" | "bg-yellow"
16. typed-routes ライブラリ風の実装例
最後に、ここまでの要素を組み合わせて「Express / Hono / Next.js などで使える typed-routes」のミニ実装を示します。
16.1 ルートテーブル定義
const routeDefs = {
  getUser: "GET /users/:userId",
  listUsers: "GET /users",
  createUser: "POST /users",
  deleteUser: "DELETE /users/:userId",
} as const;

type RouteDefs = typeof routeDefs;
type RouteName = keyof RouteDefs; // "getUser" | "listUsers" | ...
type RouteStr = RouteDefs[RouteName];
16.2 ルート文字列から method / path を分離
type ParseRoute =
  S extends `${infer M extends HttpMethod} ${infer P}`
    ? { method: M; path: P }
    : never;

type R = ParseRoute;
// { method: "GET"; path: "/users/:userId" }
16.3 ルート名 → params 型
type RouteParams =
  ParamsObject<ParseRoute["path"]>;

type GetUserParams = RouteParams; // { userId: string }
type ListUsersParams = RouteParams; // {}
16.4 型安全な linkTo
function linkTo(
  name: Name,
  params: RouteParams
): string {
  const def = routeDefs[name];
  const [, path] = def.split(" ", 2) as [string, string];
  return path.replace(/:([^/]+)/g, (_, key) => (params as Record)[key] ?? "");
}

linkTo("getUser", { userId: "42" }); // "/users/42"
// linkTo("getUser", {}); // Error: userId required
// linkTo("listUsers", { userId: "x" }); // Error: 余計なキー
16.5 型安全な fetchRoute
async function fetchRoute(
  name: Name,
  ...args: keyof RouteParams extends never
    ? [params?: undefined, init?: RequestInit]
    : [params: RouteParams, init?: RequestInit]
): Promise {
  const [params, init] = args;
  const path = linkTo(name, (params ?? {}) as RouteParams);
  const method = (routeDefs[name].split(" ", 1)[0]) as HttpMethod;
  return fetch(path, { ...init, method });
}

await fetchRoute("getUser", { userId: "1" });
await fetchRoute("listUsers");
// await fetchRoute("getUser"); // Error: params required
17. よくあるハマりどころと回避策
17.1 union を埋め込むと展開されすぎる
// 意図せず巨大 union になっていないか tsc --noEmit で型サイズを観察
type Bad = `${"a"|"b"|"c"|"d"}-${"x"|"y"|"z"}-${"1"|"2"|"3"|"4"|"5"}`;
// 60 通り。必要なものだけに絞るか、Branded で逃がす
17.2 number は全 number を表す
type N = `${number}px`;
// "1px" | "1.5px" | "-3px" | "1e10px" など、ほぼ無限の集合
// 「桁数」を限定したいなら個別リテラル union を使う

type Single = `${0|1|2|3|4|5|6|7|8|9}px`;
17.3 infer の制約を強くする(TS 5.0+)
// TS 5.0+ では infer に extends 制約を付けられる
type FirstNumber =
  S extends `${infer N extends number}${string}` ? N : never;

type X = FirstNumber; // 42 (number 型として推論)
17.4 const 文字列を渡してもらう工夫
// 関数の引数を string で受けると union が崩れる
function bad(s: string) { /* ... */ }

// const 推論を効かせるなら as const か satisfies を呼び出し側で使うか、
// 関数側でジェネリクスにする
function good(s: S): S { return s; }

const v = good("hello"); // "hello" 型として推論される
18. 学習を進める次のステップ
Template Literal Types は 「型レベルプログラミング」の入口でもあります。次の3つを並行して学ぶと、相乗効果で実務スキルが伸びます。

TypeScript型ガード完全ガイド — 実行時値の型を絞り込む技法。Template Literal Types で表した「形」を実行時に検証する側を担います。
TypeScript Mapped Types完全ガイド — Key Remapping(as句)で本記事の文字列変換と組み合わさり、ゲッター・セッター・イベント等の自動生成が可能になります。
TypeScript型推論完全ガイド — Template Literal Types で書いた型がどう推論されるかは、const/as const/satisfies/NoInfer の理解と直結します。
あわせて、本サイトでは TypeScript カテゴリ に基礎から実務まで網羅した記事を揃えています。さらに、型システムをマスターした後のキャリア戦略として、TypeScript を強みにできるエンジニア向けスクールやエージェントを活用するのも有効です。

テックアカデミー — TypeScript/React のオンラインコースが豊富で、現役エンジニア講師のマンツーマンサポートが受けられます。
侍エンジニア — 完全マンツーマンで TS の高度な型システムまで踏み込んで学習可能。ポートフォリオ作成に強い。
DMM WEBCAMP — TypeScript を含むフルスタック技術を体系的に学べ、転職保証コースも用意されています。
レバテックキャリア — TypeScript / React 案件に強い IT エンジニア専門の転職エージェント。Template Literal Types を活かせる開発案件・スカウトが多数。
19. まとめ
本記事では Template Literal Types を以下の観点から解説しました。

基礎: `${...}`構文と union 展開の挙動
標準ユーティリティ: Uppercase/Lowercase/Capitalize/Uncapitalize
プレフィックス・サフィックス・パス連結
CSS / DOM 系: pixel 単位、CSS 変数、イベント名、Tailwind 風クラス
URL ルートの動的セグメント抽出と params 型化
ケース変換: snake / camel / pascal / kebab の相互変換
パース: Split、コマンドライン、SQL/GraphQL、桁数カウント
dot.notation アクセスと Paths 列挙
形式検証: メール、UUID、日付、JSON Pointer
Mapped Types との連携でゲッター・セッター・イベント自動生成
stringly typed → strongly typed リファクタ
クエリビルダー、typed-routes 風実装
ts-toolbelt / type-fest 連携
パフォーマンスと複雑度爆発への対処
Template Literal Types は単独でも強力ですが、Conditional Types(infer)・Mapped Types(as)・型推論と組み合わせて初めて真価を発揮します。コピペで動く本記事のスニペットを起点に、自分のコードベースの「stringly typed」な箇所を一つずつ「strongly typed」に置き換えていきましょう。型の力で 「コンパイル時に未然に防げるバグ」を一段増やすことが、実務での生産性と安心感に直結します。


  
  
  

  
  
      

    
            

            

            
tsconfig.json完全ガイド〜推奨設定・strictモード・モノレポ・React/Node対応【2026年版】〜
            

            

            
    
Zod完全実践ガイド〜スキーマ・型推論・React Hook Form/Next.js Server Actions連携【2026年版】〜    

  
  
  

  

    

      コメント          

      
  



  
  
ホーム
TypeScript


      
  
  

    
    
      
        
      
      メニュー
    
    
    

      
      
React/Next.js
TypeScript
JavaScript Best Practices
Vue/Nuxt/Svelte
ビルドツール
パフォーマンス最適化
エンジニアキャリア
AIコーディング
運営者情報
お問い合わせ
    
  

    


  
    
      
    
    ホーム
  


    

  
  

    
    
      
        
      
      検索
    
    
    

      

  
  

    
  

    


  
    
      
    
    トップ
  


    

  

    
    
      
        
      
      サイドバー
    
    
    

      
    
  
  

      
  
タイトルとURLをコピーしました