YASD-TECH
YASD TECH
# TypeScript

型指定について

投稿日:2026/5/7

更新日:2026/5/11

ttitleImage

1. 型注釈 (: Type):もっとも誠実な約束

型注釈は、変数に対して「この型という枠組みを超えないでください」とあらかじめ宣言するものです。

  • 特徴: 変数の中身が型に合っていないと、代入した瞬間にエラーになります。
  • デメリット: 型を抽象的に指定しすぎると、「具体的な情報」が失われることがあります。
type Color = string | { r: number, g: number, b: number };

// 型注釈を使うと...
const myColor: Color = "red"; 

// ここで myColor は string | { ... } と見なされるため、
// string 専用のメソッド(toUpperCaseなど)を使おうとするとエラーになる場合がある

2. 型アサーション (as Type):禁断の力技

「黙って俺の言う通りにしろ」とコンパイラをねじ伏せる方法です。

  • 特徴: TypeScriptが「それは危ないんじゃない?」と警告していても、それを無視させます。
  • リスク: 実行時にエラーが発生する最大の原因になります。
  • 使い道: どうしても型推論が追いつかない外部ライブラリの利用時や、DOM操作などで「絶対にHTMLInputElementだと分かっている」場合などに限定すべきです。

3. as const:リテラル型への固定

「この値は絶対に変わらない。最も具体的な型として扱ってくれ」とコンパイラに伝える方法です。as Type と構文は似ていますが、方向性は逆で、型を広げるのではなく、できる限り狭く固定します。

  • 特徴: 文字列は string ではなくリテラル型(例: "red")に、配列は readonly のタプル型になります。
  • 用途: 定数オブジェクトやユニオン型の元になる配列など、値が変わらないことを保証したい場面で使います。
// as const なし
const palette = { primary: "red", secondary: "blue" };
// palette.primary の型は string(広い)

// as const あり
const palette = { primary: "red", secondary: "blue" } as const;
// palette.primary の型は "red"(具体的なリテラル型)
// palette.primary = "green" -> エラー!(readonly になる)

// ユニオン型の元として使う典型例
const DIRECTIONS = ["up", "down", "left", "right"] as const;
type Direction = typeof DIRECTIONS[number]; // "up" | "down" | "left" | "right"

4. satisfies 演算子:賢い検証

これが一番の「いいとこ取り」です。「型を満たしているかチェックはするが、中身の推論結果は変えない」という動きをします。

比較で見る satisfies の凄さ

例えば、色情報を管理するオブジェクトを作るとします。

type Theme = Record<string, string | number[]>;

// 【型注釈 : の場合】
const theme: Theme = {
  primary: "red",
  codes: [255, 0, 0]
};
// theme.primary.toUpperCase() -> エラー! (number[]の可能性もあると見なされる)

// 【satisfies の場合】
const theme = {
  primary: "red",
  codes: [255, 0, 0]
} satisfies Theme;

// 1. Theme型に沿っているか(スペルミスがないか等)は厳格にチェックされる
// 2. その上で primary が「文字列である」という具体的な情報を保持してくれる
theme.primary.toUpperCase(); // OK!
theme.codes.map(c => c);     // OK!

まとめ:使い分けの判断基準

以下の表で整理すると分かりやすいです。

手法 目的 コンパイラの挙動 推論の質
型注釈 (:) 安全性の確保 型に合わない代入を禁止する 指定した型に固定(抽象化される)
アサーション (as) 例外的な強制 コンパイラの警告を無視させる 強制した型になる(危険)
**as const リテラル型への固定 値を readonly にし、最も具体的な型で推論させる 最も具体的(リテラル型)**
**satisfies 検証と精度の両立 型を満たすか確認しつつ、元の型を維持 具体的で高精度**

いつどれを使う?

  1. 基本は「型推論」に任せる: TypeScriptが自分で型を当てられるなら、何も書かないのが一番シンプルです。
  2. 関数の引数や戻り値には「型注釈 (:)」: 境界線をはっきりさせるために必要です。
  3. 変わらない定数には「as const: ユニオン型を作りたい配列や、値が固定のオブジェクトに使うと型の精度が上がります。
  4. 複雑な設定オブジェクトには「satisfies: 設定値のバリデーションをしつつ、後で使う時に「これは文字列だっけ?」と迷いたくない時に最適です。
  5. as」は最終手段: 他に方法がない時だけ、慎重に使いましょう。

satisfies は、特に「ライブラリのテーマ設定」や「ルート定義」など、型としての正解は欲しいけど、中身の柔軟性も死守したいというモダンな開発現場で非常に重宝されています。

Index

  • 1. 型注釈 (: Type):もっとも誠実な約束
  • 2. 型アサーション (as Type):禁断の力技
  • 3. as const:リテラル型への固定
  • 4. satisfies 演算子:賢い検証
  • 比較で見る satisfies の凄さ
  • まとめ:使い分けの判断基準
  • いつどれを使う?