【TypeScript】よくあるエラーと解決方法 完全ガイド｜型エラーの読み方からトラブルシューティングまで

この記事で学べること

• TypeScriptのエラーメッセージの読み方と構造（TSxxxx コードの意味）
• TS2322: Type ‘X’ is not assignable to type ‘Y’ の原因と解決
• TS2345: Argument of type ‘X’ is not assignable to parameter of type ‘Y’
• TS2339: Property ‘X’ does not exist on type ‘Y’
• TS2532 / TS2531: Object is possibly ‘undefined’ / ‘null’
• TS7006: Parameter ‘X’ implicitly has an ‘any’ type
• TS2304: Cannot find name ‘X’
• TS2769: No overload matches this call
• TS2741: Property ‘X’ is missing in type ‘Y’
• TS2352: Conversion of type ‘X’ to type ‘Y’ may be a mistake
• TS2556: A spread argument must either have a tuple type
• TS18046: ‘X’ is of type ‘unknown’
• TS2349: This expression is not callable
• TS1005 / TS1003 等の構文エラー
• tsconfig.json 関連の設定エラーとベストプラクティス
• 型定義ファイル（.d.ts）関連のエラー（TS7016 等）
• エラー解決のデバッグテクニック集（型の確認方法、satisfies 演算子、// @ts-expect-error 等）
• エラーコード早見表

前提知識：この記事はTypeScriptの基本的な型の書き方を理解している方を対象としています。型の基本から学びたい方は【TypeScript】型の書き方 完全入門を先にお読みください。

// ターミナル（tsc コマンド）での表示例
src/app.ts(10,3): error TS2322: Type 'string' is not assignable to type 'number'.

// 分解すると:
//   src/app.ts(10,3)  → ファイル名（10行目、3文字目）
//   error             → エラーレベル
//   TS2322            → エラーコード
//   Type 'string'...  → エラーメッセージ本文

ポイント：エラーが出たら、まずエラーコード（TSxxxx）を確認しましょう。同じコードのエラーは必ず同じカテゴリの問題なので、解決パターンが共通しています。この記事ではエラーコードごとに解説しているので、コードを検索すればすぐに該当セクションに辿り着けます。

注意：TS2322 はエラーの「結果」を示しているだけです。根本原因は「なぜその型の値が入ってしまうのか」にあります。エラーメッセージの X（実際の型）と Y（期待される型）をよく読み比べましょう。

let age: number = "twenty";
// Error: Type 'string' is not assignable to type 'number'. (TS2322)

let isActive: boolean = 1;
// Error: Type 'number' is not assignable to type 'boolean'. (TS2322)

let age: number = 20;
let isActive: boolean = true;

interface User {
  name: string;
  age: number;
}

const user: User = {
  name: "Alice",
  age: "25",  // Error: Type 'string' is not assignable to type 'number'. (TS2322)
};

const user: User = {
  name: "Alice",
  age: 25,  // OK: number 型
};

type Status = "active" | "inactive" | "pending";

const status: Status = "deleted";
// Error: Type '"deleted"' is not assignable to type 'Status'. (TS2322)

// 解決策1: Union に含まれる値を使う
const status: Status = "active";

// 解決策2: Union 型自体を拡張する
type Status = "active" | "inactive" | "pending" | "deleted";

function getAge(): number {
  return "25";
  // Error: Type 'string' is not assignable to type 'number'. (TS2322)
}

function findUser(id: number): User {
  if (id === 0) {
    return null;
    // Error: Type 'null' is not assignable to type 'User'. (TS2322)
  }
  return { name: "Alice", age: 25 };
}

function getAge(): number {
  return 25;
}

// null を返す可能性がある場合は戻り値型に含める
function findUser(id: number): User | null {
  if (id === 0) {
    return null;
  }
  return { name: "Alice", age: 25 };
}

const numbers: number[] = [1, 2, "3"];
// Error: Type 'string' is not assignable to type 'number'. (TS2322)

// 解決策1: 型を統一する
const numbers: number[] = [1, 2, 3];

// 解決策2: Union 型の配列にする
const items: (number | string)[] = [1, 2, "3"];

TS2322 を解決するためのチェックリスト

• エラーメッセージのX（実際の型）とY（期待される型）を確認する
• 値そのものを修正する（正しい型の値に変更）
• 型注釈を修正する（変数の型宣言を実態に合わせる）
• Union 型に追加する（null を返すなら Type | null に変更）
• 型アサーション（as）を使う（最終手段 ― 型安全性が下がるので慎重に）

function greet(name: string): string {
  return `Hello, ${name}!`;
}

greet(42);
// Error: Argument of type 'number' is not assignable to
//   parameter of type 'string'. (TS2345)

greet("Alice");  // OK
greet(String(42));  // OK: 数値を文字列に変換してから渡す

function setTheme(theme: "light" | "dark"): void {
  // ...
}

const userTheme = "light";  // 型推論: string（letの場合）
// let で宣言すると string 型に推論される
let userTheme2 = "light";  // 型: string

setTheme(userTheme2);
// Error: Argument of type 'string' is not assignable to
//   parameter of type '"light" | "dark"'. (TS2345)

// 解決策1: const で宣言（リテラル型に推論される）
const userTheme = "light";  // 型: "light"
setTheme(userTheme);  // OK

// 解決策2: as const を使う
let userTheme2 = "light" as const;  // 型: "light"
setTheme(userTheme2);  // OK

// 解決策3: 明示的に型注釈する
let userTheme3: "light" | "dark" = "light";
setTheme(userTheme3);  // OK

const nums = [1, 2, 3];

// map は (value: number) => string 型のコールバックを期待
const result: string[] = nums.map((n) => n * 2);
// Error: Type 'number' is not assignable to type 'string'. (TS2322)

// 解決策1: 結果の型を正しくする
const result: number[] = nums.map((n) => n * 2);

// 解決策2: コールバックで文字列に変換する
const result2: string[] = nums.map((n) => String(n * 2));

function processName(name: string): string {
  return name.toUpperCase();
}

const input: string | null = getUserInput();
processName(input);
// Error: Argument of type 'string | null' is not assignable to
//   parameter of type 'string'. (TS2345)

const input: string | null = getUserInput();

// 解決策1: null チェック（型ガード）
if (input !== null) {
  processName(input);  // OK: この時点で input は string
}

// 解決策2: デフォルト値を使う
processName(input ?? "Guest");  // OK: null の場合は "Guest"

// 解決策3: 非nullアサーション（確実に null でないと分かっている場合のみ）
processName(input!);  // OK（ただし null なら実行時エラー）

注意：非nullアサーション（!）は型チェックを黙らせるだけで、実際に null であれば実行時エラーが発生します。null チェックやデフォルト値を使う方が安全です。

TS2345 を解決するためのチェックリスト

• 関数のパラメータの型定義を確認する（ホバーで確認可能）
• 渡そうとしている値の実際の型を確認する
• let を const に変更してリテラル型推論を得る
• as const でリテラル型にする
• null / undefined チェックで型を絞り込む
• デフォルト値（??）を使って null / undefined を排除する

interface User {
  name: string;
  age: number;
}

const user: User = { name: "Alice", age: 25 };

console.log(user.email);
// Error: Property 'email' does not exist on type 'User'. (TS2339)

console.log(user.nmae);
// Error: Property 'nmae' does not exist on type 'User'.
//   Did you mean 'name'? (TS2339)

// 解決策1: タイプミスを修正
console.log(user.name);  // OK

// 解決策2: 型定義にプロパティを追加
interface User {
  name: string;
  age: number;
  email?: string;  // オプショナルとして追加
}

interface Dog {
  kind: "dog";
  bark(): void;
}

interface Cat {
  kind: "cat";
  meow(): void;
}

type Animal = Dog | Cat;

function makeSound(animal: Animal) {
  animal.bark();
  // Error: Property 'bark' does not exist on type 'Animal'.
  //   Property 'bark' does not exist on type 'Cat'. (TS2339)
}

function makeSound(animal: Animal) {
  if (animal.kind === "dog") {
    animal.bark();  // OK: この時点で animal は Dog
  } else {
    animal.meow();  // OK: この時点で animal は Cat
  }
}

const input = document.getElementById("username");
console.log(input.value);
// Error: Property 'value' does not exist on type 'HTMLElement'. (TS2339)

// 解決策1: 型アサーション
const input = document.getElementById("username") as HTMLInputElement;
console.log(input.value);  // OK

// 解決策2: instanceof による型ガード（より安全）
const el = document.getElementById("username");
if (el instanceof HTMLInputElement) {
  console.log(el.value);  // OK: el は HTMLInputElement
}

ポイント：TS2339 が出たら、まずプロパティ名のタイプミスを疑いましょう。TypeScriptは「Did you mean ‘xxx’?」と候補を提示してくれることもあります。タイプミスでなければ、型定義の見直しか型ガードによる絞り込みが必要です。

注意：このエラーは strictNullChecks: true（または strict: true）のときにのみ発生します。false の場合は発生しませんが、実行時エラーのリスクが高まるため、strictNullChecks は有効にすることを強く推奨します。

const users = [
  { id: 1, name: "Alice" },
  { id: 2, name: "Bob" },
];

const user = users.find((u) => u.id === 3);
// 型: { id: number; name: string } | undefined

console.log(user.name);
// Error: Object is possibly 'undefined'. (TS2532)

// 解決策1: if 文で undefined チェック
if (user) {
  console.log(user.name);  // OK
}

// 解決策2: Optional Chaining（?.）
console.log(user?.name);  // OK: undefined なら undefined を返す

// 解決策3: Nullish Coalescing（??）でデフォルト値
console.log(user?.name ?? "Unknown");  // OK: undefined なら "Unknown"

// 解決策4: 非nullアサーション（確実に存在すると分かっている場合のみ）
console.log(user!.name);  // OK（ただし undefined なら実行時エラー）

// 解決策5: 早期 return パターン
if (!user) {
  throw new Error("User not found");
}
console.log(user.name);  // OK: ここに到達するなら user は存在する

const map = new Map<string, number>();
map.set("a", 1);

const value = map.get("a");  // 型: number | undefined
const result = value * 2;
// Error: Object is possibly 'undefined'. (TS2532)

// 解決策1: undefined チェック
const value = map.get("a");
if (value !== undefined) {
  const result = value * 2;  // OK
}

// 解決策2: デフォルト値
const result = (map.get("a") ?? 0) * 2;  // OK: undefined なら 0

const button = document.querySelector("#submit");
// 型: Element | null

button.addEventListener("click", () => { });
// Error: Object is possibly 'null'. (TS2531)

const button = document.querySelector("#submit");

// 解決策1: null チェック
if (button) {
  button.addEventListener("click", () => { });
}

// 解決策2: Optional Chaining
button?.addEventListener("click", () => { });

// 解決策3: 非nullアサーション（HTMLに確実に存在する場合のみ）
const button2 = document.querySelector("#submit")!;
button2.addEventListener("click", () => { });

なぜ noImplicitAny が重要なのか

• any 型は型チェックを完全にスキップするため、バグの温床になる
• パラメータに型注釈がないと、関数の使い方が分からなくなる
• noImplicitAny: true により、「意図しない any」を防止できる
• 新規プロジェクトでは strict: true（noImplicitAny を含む）がベストプラクティス

function greet(name) {
  // Error: Parameter 'name' implicitly has an 'any' type. (TS7006)
  return `Hello, ${name}!`;
}

const add = (a, b) => a + b;
// Error: Parameter 'a' implicitly has an 'any' type. (TS7006)
// Error: Parameter 'b' implicitly has an 'any' type. (TS7006)

function greet(name: string): string {
  return `Hello, ${name}!`;
}

const add = (a: number, b: number): number => a + b;

const numbers = [1, 2, 3];

// n の型は number と推論される（TS7006 は発生しない）
numbers.map((n) => n * 2);  // OK

// forEach のコールバックも同様
numbers.forEach((value, index) => {
  console.log(value, index);  // OK: value: number, index: number
});

const handleClick = (event) => {
  // Error: Parameter 'event' implicitly has an 'any' type. (TS7006)
  console.log(event.target);
};

// 解決策1: パラメータに型注釈
const handleClick = (event: MouseEvent) => {
  console.log(event.target);  // OK
};

// 解決策2: React の場合
const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
  console.log(event.currentTarget);  // OK
};

ポイント：TS7006 の解決は単純です。パラメータに型注釈を付けるだけです。ただし、コールバック関数のように型推論が効く場面では型注釈は不要です。「どこに型注釈が必要か」を見極めることが大切です。

// React の import を忘れている
const App: React.FC = () => {
  return <div>Hello</div>;
};
// Error: Cannot find name 'React'. (TS2304)

import React from "react";

const App: React.FC = () => {
  return <div>Hello</div>;
};

// ブラウザのグローバル変数やサードパーティのグローバル
console.log(__dirname);
// Error: Cannot find name '__dirname'. (TS2304)

console.log(process.env.NODE_ENV);
// Error: Cannot find name 'process'. (TS2304)

// 解決策1: Node.js の型定義をインストール
// npm install --save-dev @types/node

// 解決策2: declare で型を宣言
declare const __dirname: string;

// 解決策3: tsconfig.json の lib / types を確認
// {
//   "compilerOptions": {
//     "types": ["node"]
//   }
// }

// tsconfig.json: { "compilerOptions": { "lib": ["ES5"] } }

const p = new Promise((resolve) => resolve(1));
// Error: Cannot find name 'Promise'. (TS2304)

// tsconfig.json
{
  "compilerOptions": {
    "lib": ["ES2020", "DOM"]
  }
}

ポイント：TS2304 が出たら、(1) import 忘れ、(2) @types パッケージ未インストール、(3) tsconfig.json の lib / types 設定不足 の3つを順番に確認しましょう。VS Code の Quick Fix（Ctrl + .）が import を自動追加してくれることもあります。

interface User {
  id: number;
  name: string;
}

// 初期値 null を渡しているが、型引数に null が含まれていない
const [user, setUser] = useState<User>(null);
// Error: No overload matches this call. (TS2769)

// 解決策: 型引数に null を含める
const [user, setUser] = useState<User | null>(null);
// OK: user の型は User | null

document.addEventListener("clik", (e) => { });
// Error: No overload matches this call.
//   Overload 1 of 2: addEventListener(type: keyof DocumentEventMap, ...)
//   '"clik"' is not assignable to parameter of type 'keyof DocumentEventMap'
// (TS2769)

document.addEventListener("click", (e) => {
  console.log(e.clientX, e.clientY);  // OK: e は MouseEvent
});

// 自作のオーバーロード関数
function format(value: string): string;
function format(value: number, digits: number): string;
function format(value: any, digits?: number): string {
  return typeof value === "number"
    ? value.toFixed(digits)
    : value;
}

format(true);
// Error: No overload matches this call.
//   Overload 1: format(value: string): string
//   Overload 2: format(value: number, digits: number): string (TS2769)

format("hello");       // OK: Overload 1 に一致
format(3.14159, 2);    // OK: Overload 2 に一致

ポイント：TS2769 のエラーメッセージは長くなりがちですが、各オーバーロード候補とその不一致理由が順番に表示されます。最初のオーバーロード候補の不一致理由を読むだけで原因が分かることが多いです。

interface Config {
  host: string;
  port: number;
  ssl: boolean;
}

const config: Config = {
  host: "localhost",
  port: 3000,
  // Error: Property 'ssl' is missing in type
  //   '{ host: string; port: number; }' but required in type 'Config'. (TS2741)
};

// 解決策1: 不足しているプロパティを追加
const config: Config = {
  host: "localhost",
  port: 3000,
  ssl: false,  // 追加
};

// 解決策2: プロパティをオプショナルにする
interface Config {
  host: string;
  port: number;
  ssl?: boolean;  // ? を付けてオプショナルに
}

// 解決策3: Partial を使ってすべてオプショナルにする
const partialConfig: Partial<Config> = {
  host: "localhost",
};

interface ButtonProps {
  label: string;
  onClick: () => void;
  disabled: boolean;
}

function Button(props: ButtonProps) {
  return <button>{props.label}</button>;
}

// disabled が不足
<Button label="送信" onClick={() => {}} />
// Error: Property 'disabled' is missing... (TS2741)

// 解決策1: 全 Props を渡す
<Button label="送信" onClick={() => {}} disabled={false} />

// 解決策2: Props にデフォルト値を設定
interface ButtonProps {
  label: string;
  onClick: () => void;
  disabled?: boolean;  // オプショナルに変更
}

function Button({ label, onClick, disabled = false }: ButtonProps) {
  return <button disabled={disabled} onClick={onClick}>{label}</button>;
}

ポイント：TS2741 のエラーメッセージには「何が足りないのか」が明確に書かれています。不足プロパティを追加するか、型定義側で ? を付けてオプショナルにするかの判断がポイントです。Partial<T> ユーティリティ型を活用する手もあります。

const str = "hello";
const num = str as number;
// Error: Conversion of type 'string' to type 'number' may be a mistake
//   because neither type sufficiently overlaps with the other.
//   If this was intentional, convert the expression to 'unknown' first. (TS2352)

const str = "42";

// 解決策1: 実際に値を変換する（推奨）
const num = Number(str);  // 型: number

// 解決策2: unknown を経由する（本当に必要な場合のみ）
const num2 = str as unknown as number;  // 危険！型安全性が失われる

注意：as unknown as T はダブルアサーション（二重アサーション）と呼ばれ、TypeScriptの型チェックを完全に迂回します。テストコードやレガシーコードの一時的な対処以外では使用を避けるべきです。

interface Dog { breed: string; bark(): void; }
interface Car { make: string; drive(): void; }

const dog: Dog = { breed: "Shiba", bark() {} };
const car = dog as Car;
// Error: Conversion of type 'Dog' to type 'Car' may be a mistake. (TS2352)

// 型設計を見直して、正しい変換ロジックを書く
// そもそも Dog を Car に変換するのは論理的に間違い
// → 正しい型を最初から使うように設計を修正する

function add(a: number, b: number): number {
  return a + b;
}

const args = [1, 2];  // 型: number[]（長さ不定）
add(...args);
// Error: A spread argument must either have a tuple type
//   or be passed to a rest parameter. (TS2556)

// 解決策1: as const でタプル型にする
const args = [1, 2] as const;  // 型: readonly [1, 2]
add(...args);  // OK

// 解決策2: 明示的にタプル型を注釈
const args2: [number, number] = [1, 2];
add(...args2);  // OK

// 解決策3: rest パラメータを使う関数に変更
function sum(...nums: number[]): number {
  return nums.reduce((a, b) => a + b, 0);
}
const numbers = [1, 2, 3];
sum(...numbers);  // OK: rest パラメータは配列を受け入れる

ポイント：配列をスプレッドで関数引数に渡したいなら、as const でタプル型にするのが最も手軽です。as const を付けると配列は readonly かつ各要素の型が確定したタプルとして扱われます。

unknown vs any の違い

• any: 何でもできる（型チェックをスキップ）→ 危険
• unknown: 何の型か分からない → 使う前に型を確認する必要がある → 安全
• 外部からの入力（API レスポンス、JSON.parse、catch のエラーなど）には unknown を使うのがベストプラクティス

try {
  riskyOperation();
} catch (error) {
  // error の型: unknown
  console.log(error.message);
  // Error: 'error' is of type 'unknown'. (TS18046)
}

try {
  riskyOperation();
} catch (error) {
  // 解決策1: instanceof で型ガード
  if (error instanceof Error) {
    console.log(error.message);  // OK: error は Error
    console.log(error.stack);    // OK
  } else {
    console.log("Unknown error:", error);
  }
}

// 解決策2: 汎用的なエラーハンドラ関数を作る
function getErrorMessage(error: unknown): string {
  if (error instanceof Error) return error.message;
  if (typeof error === "string") return error;
  return "An unknown error occurred";
}

// JSON.parse の戻り値は any だが、unknown として扱うのが安全
function parseConfig(json: string): AppConfig {
  const data: unknown = JSON.parse(json);

  // 型ガードで安全に検証
  if (
    typeof data === "object" &&
    data !== null &&
    "host" in data &&
    "port" in data
  ) {
    return data as AppConfig;
  }
  throw new Error("Invalid config format");
}

interface Config {
  port: number;
  host: string;
}

const config: Config = { port: 3000, host: "localhost" };

config.port();
// Error: This expression is not callable.
//   Type 'Number' has no call signatures. (TS2349)

// プロパティの値を参照するだけなら () は不要
console.log(config.port);  // OK: 3000

// 関数として使いたいなら型定義を変更する
interface Config {
  getPort: () => number;  // 関数型のプロパティ
  host: string;
}

type Handler = (() => void) | string;

const handler: Handler = () => console.log("done");
handler();
// Error: This expression is not callable.
//   Not all constituents of type 'Handler' are callable. (TS2349)

if (typeof handler === "function") {
  handler();  // OK: この時点で handler は () => void
} else {
  console.log(handler);  // OK: この時点で handler は string
}

// utils.ts は export default function calc() { ... }
import { calc } from "./utils";  // 間違い: named import
calc();
// Error: This expression is not callable. (TS2349)

// default export は {} なしでインポート
import calc from "./utils";
calc();  // OK

// 閉じ括弧の不足
function add(a: number, b: number {
  // Error: ')' expected. (TS1005)
  return a + b;
}

// 型注釈のコロン忘れ
let name string = "Alice";
// Error: ';' expected. (TS1005)

// アロー関数の => 忘れ
const fn = (x: number) { return x; };
// Error: '=>' expected. (TS1005)

function add(a: number, b: number) {
  return a + b;
}

let name: string = "Alice";  // コロンを追加

const fn = (x: number) => { return x; };  // => を追加

const class = "active";
// Error: Identifier expected. (TS1003)

const return = 42;
// Error: Identifier expected. (TS1003)

const className = "active";  // OK
const result = 42;           // OK

構文エラーを素早く解決するコツ

• エラーが指す行番号の少し前を確認する（原因は報告行の前にあることが多い）
• VS Code の括弧のマッチング機能で対応する括弧を確認
• Prettier / ESLint の自動フォーマットで構文の崩れを検出
• 構文エラーが連鎖的に大量発生している場合、最初の1つを修正すれば残りも消えることが多い
• JavaScript の予約語一覧を確認（class, return, const, let, var, function 等）

{
  "compilerOptions": {
    // 型チェックの厳格さ
    "strict": true,

    // ターゲットとモジュール
    "target": "ES2020",
    "module": "ESNext",
    "moduleResolution": "bundler",

    // 型定義
    "lib": ["ES2020", "DOM", "DOM.Iterable"],

    // 出力
    "outDir": "./dist",
    "declaration": true,

    // その他推奨設定
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "skipLibCheck": true,
    "resolveJsonModule": true,
    "isolatedModules": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

ポイント：新規プロジェクトでは strict: true を最初から有効にすることを強く推奨します。既存プロジェクトに strict を導入する場合は、個別フラグ（strictNullChecks など）を一つずつ有効にしていくのが現実的です。

import someLib from "some-untyped-lib";
// Error: Could not find a declaration file for module 'some-untyped-lib'.
//   'node_modules/some-untyped-lib/index.js' implicitly has an 'any' type.
//   Try `npm i --save-dev @types/some-untyped-lib` (TS7016)

// 解決策1: @types パッケージをインストール
// npm install --save-dev @types/some-untyped-lib

// 解決策2: 自作の型宣言ファイルを作成
// src/types/some-untyped-lib.d.ts
declare module "some-untyped-lib" {
  const content: any;
  export default content;
}

// 解決策3: より詳細な型定義を書く
declare module "some-untyped-lib" {
  export function doSomething(input: string): number;
  export interface Config {
    debug: boolean;
  }
}

// src/types/global.d.ts

// Window にプロパティを追加
declare global {
  interface Window {
    gtag: (...args: any[]) => void;
    dataLayer: any[];
  }
}

// 環境変数の型定義（Vite の場合）
interface ImportMetaEnv {
  readonly VITE_API_URL: string;
  readonly VITE_APP_TITLE: string;
}

export {};  // これがないと global 宣言が機能しない

注意：declare global を含むファイルには、必ず export {} などの export 文を含めてください。export がないと TypeScript はそのファイルをスクリプト（モジュールでないファイル）として扱い、declare global が正しく機能しません。

const users = [{ name: "Alice", age: 25 }];

// users にホバーすると:
// const users: { name: string; age: number; }[]

const found = users.find(u => u.age > 20);

// found にホバーすると:
// const found: { name: string; age: number; } | undefined
// → undefined が含まれている！ だから TS2532 が出る理由が分かる

type Color = "red" | "green" | "blue";
type ColorMap = Record<Color, string | number[]>;

// as ColorMap を使うと、各値の具体的な型が失われる
const colorsAs = {
  red: "#ff0000",
  green: [0, 255, 0],
  blue: "#0000ff",
} as ColorMap;
colorsAs.red.toUpperCase();  // Error! string | number[] にはない

// satisfies を使うと、型の検証 + 具体的な型の保持
const colorsSatisfies = {
  red: "#ff0000",
  green: [0, 255, 0],
  blue: "#0000ff",
} satisfies ColorMap;
colorsSatisfies.red.toUpperCase();  // OK! red は string と推論

// テストで意図的にエラーを起こすケース
// @ts-expect-error: テスト用 ― number に string を渡すとエラーになることを確認
add("hello", "world");

// @ts-expect-error は、エラーが解消されると逆にエラーになる
// → これにより「もうエラーは存在しない」ことが分かる（掃除のサイン）
// @ts-expect-error
add(1, 2);  // Error: Unused '@ts-expect-error' directive. (TS2578)

// ReturnType で関数の戻り値型を調べる
type FetchResult = ReturnType<typeof fetch>;
// → Promise<Response>

// Parameters で関数のパラメータ型を調べる
type SetTimeoutArgs = Parameters<typeof setTimeout>;
// → [callback: TimerHandler, ms?: number, ...args: any[]]

// keyof でオブジェクトのキー一覧を確認
interface User { id: number; name: string; email: string; }
type UserKeys = keyof User;
// → "id" | "name" | "email"

// Awaited で Promise の中身の型を取得
type Data = Awaited<Promise<string>>;
// → string

# プロジェクト全体を型チェック（コンパイルはしない）
npx tsc --noEmit

# エラー数だけ確認
npx tsc --noEmit 2>&1 | grep "error TS" | wc -l

# 特定のファイルだけチェック
npx tsc --noEmit src/app.ts

# CI/CD パイプラインでの使用
# package.json に追加:
# "scripts": { "typecheck": "tsc --noEmit" }

// Step 1: 一時変数に代入して型を確認
const response = await fetch("/api/users");
// ホバー → const response: Response

// Step 2: 次の処理結果の型を確認
const data = await response.json();
// ホバー → const data: any（ここが問題！）

// Step 3: 型注釈を追加して修正
interface User { id: number; name: string; }
const data: User[] = await response.json();
// ホバー → const data: User[]（型が確定！）

エラー解決のフローチャート

• Step 1: エラーコード（TSxxxx）を確認する
• Step 2: エラーメッセージの X（実際の型）と Y（期待される型）を読む
• Step 3: 変数にホバーして、実際に推論されている型を確認する
• Step 4: 原因を特定する（型注釈の間違い？値の間違い？null チェック不足？）
• Step 5: この記事の該当セクションを参照して修正する

TypeScript シリーズ記事

• 【TypeScript】型の書き方 完全入門｜基本型・Union・Generics・型ガードまで ― TypeScriptの型システム全体を基本から学べる入門記事
• 【TypeScript】関数の型定義 完全ガイド｜引数・戻り値・オーバーロード・ジェネリクス関数まで ― 関数に特化した型定義を体系的に解説
• 【TypeScript】クラスの型定義 完全ガイド｜アクセス修飾子・抽象クラス・インターフェース実装まで ― クラスに特化した型定義を体系的に解説
• 【TypeScript】ジェネリクス（Generics）完全ガイド｜基礎から実務パターンまで ― ジェネリクスを基礎から実務レベルまで徹底解説