【TypeScript】TS18046の原因と解決方法｜is of type ‘unknown’を完全解説

この記事で学べること

• TS18046エラーメッセージの読み方と意味
• unknown型とは何か / any型との違い
• try-catchでcatch変数がunknownになるケースと解決方法
• JSON.parseの戻り値を型安全に扱うパターン
• fetch API / axiosのレスポンスを安全に扱う方法
• ジェネリクスとunknownの関係
• typeof / instanceof / in / ユーザー定義型ガードによる型絞り込み完全ガイド
• unknown を安全に扱うユーティリティ関数集
• Zod / valibot / io-tsなどバリデーションライブラリとの連携
• ReactでのTS18046（ErrorBoundary・useReducer等）
• tsconfig.jsonの関連設定と段階的移行戦略

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

error TS18046: ‘X’ is of type ‘unknown’.

src/index.ts:5:15 - error TS18046: 'e' is of type 'unknown'.

5   console.log(e.message);
                  ~

覚え方：「’変数名‘ is of type ‘unknown’」と表示されたら、「この変数はunknown型なので、型を絞り込んでから使ってください」というTypeScriptからのメッセージです。

let value: any = "hello";

// any型は何でもできてしまう（型チェックが無効化される）
value.foo.bar;           // コンパイルOK（実行時エラー！）
value.trim();              // コンパイルOK
value.toFixed(2);          // コンパイルOK（実行時エラー！）
value();                   // コンパイルOK（実行時エラー！）

const num: number = value;  // コンパイルOK（型が間違っている！）

let value: unknown = "hello";

// unknown型は型を絞り込まないと何もできない
value.foo.bar;           // TS18046 エラー
value.trim();              // TS18046 エラー
value.toFixed(2);          // TS18046 エラー
value();                   // TS18046 エラー

const num: number = value;  // TS2322 エラー

// typeof で型を絞り込めば使える
if (typeof value === "string") {
  value.trim();            // OK - string型に絞り込まれた
}

ポイント：unknown型は「型安全なany」です。anyはTypeScriptの型チェックを完全に無効化しますが、unknownは型チェックを強制します。新しいコードではanyの代わりにunknownを使うのがベストプラクティスです。

function processData(data: any) {
  // TypeScriptはエラーを出さないが、実行時にクラッシュする可能性
  const name = data.user.name.toUpperCase();  // data が null なら？
  const age = data.user.age.toFixed(0);       // age が string なら？
  return { name, age };
}

// コンパイルは通るが、実行時に TypeError: Cannot read properties of null
processData(null);

function processData(data: unknown) {
  // unknown型なので、型を絞り込まないとアクセスできない
  // data.user.name.toUpperCase();  // TS18046 エラー！

  // 型ガードで安全にアクセス
  if (
    typeof data === "object" &&
    data !== null &&
    "user" in data &&
    typeof data.user === "object" &&
    data.user !== null &&
    "name" in data.user &&
    typeof data.user.name === "string"
  ) {
    const name = data.user.name.toUpperCase();  // OK - 安全
    return name;
  }
  return null;
}

unknown型のメリット：コードを書く段階では面倒に感じるかもしれませんが、unknownを使うことで実行時エラーをコンパイル時に検出できます。特にAPIレスポンスやユーザー入力など、外部から入ってくるデータには必ずunknownを使いましょう。

try {
  riskyOperation();
} catch (e) {
  // TypeScript 4.3以前: e は any型（型チェックなし）
  console.log(e.message);  // OK（でも安全ではない）
}

try {
  riskyOperation();
} catch (e) {
  // TypeScript 4.4以降 + strict: e は unknown型
  console.log(e.message);  // TS18046 エラー！
}

// JavaScript では何でも throw できる
throw new Error("エラーメッセージ");     // Error オブジェクト
throw "文字列エラー";                   // 文字列
throw 42;                                // 数値
throw { code: 404, msg: "Not Found" };  // オブジェクト
throw null;                               // null
throw undefined;                          // undefined

// catch で e.message にアクセスしても安全とは限らない
try {
  throw "文字列エラー";
} catch (e) {
  // e.message → TypeError: e.message is not a function
  // なぜなら e は string であり、message プロパティを持たない
}

注意：TypeScript 4.4以降で strict: true を使っているプロジェクトでは、useUnknownInCatchVariables が自動的に有効になります。既存プロジェクトをアップグレードした際に、大量のTS18046エラーが出ることがあります。

error TS18046: ‘value’ is of type ‘unknown’.

function handleValue(value: unknown) {
  // unknown型に対するあらゆる操作がTS18046エラーになる
  console.log(value.toString());   // TS18046 エラー
  console.log(value.length);       // TS18046 エラー
  console.log(value + 1);           // TS18046 エラー
  value();                        // TS18046 エラー
}

error TS18046: ‘value’ is of type ‘unknown’.

function printLength(value: unknown) {
  console.log(value.length);  // TS18046 エラー
}

function printLength(value: unknown) {
  if (typeof value === "string") {
    console.log(value.length);  // OK - string型に絞り込まれた
    console.log(value.trim());   // OK - string のメソッド
  }
}

function formatValue(value: unknown): string {
  if (typeof value === "string") return value.trim();
  if (typeof value === "number") return value.toFixed(2);
  if (typeof value === "boolean") return value ? "true" : "false";
  if (typeof value === "bigint") return value.toString();
  return String(value);
}

注意：typeof null === "object" です。"object" と判定された場合、必ず value !== null のチェックも行いましょう。

function processUnknown(value: unknown) {
  if (value instanceof Error)   console.log(value.message);        // Error型
  if (value instanceof Date)    console.log(value.toISOString());  // Date型
  if (value instanceof RegExp)  console.log(value.source);         // RegExp型
  if (value instanceof Map)     console.log(value.size);           // Map型
  if (value instanceof Set)     console.log(value.size);           // Set型
  if (value instanceof Promise) value.then(v => console.log(v)); // Promise型
}

// 型アサーション（安全性は自己責任）
function getLength(data: unknown): number {
  return (data as string).length;  // dataがstringでなければ実行時エラー
}

// 型ガードと組み合わせて安全に（推奨）
function getLengthSafe(data: unknown): number | null {
  if (typeof data === "string") return data.length;
  if (Array.isArray(data)) return data.length;
  return null;
}

注意：型アサーション（as）は型チェックを上書きします。可能な限り型ガードを使いましょう。

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

function isUser(value: unknown): value is User {
  return (
    typeof value === "object" &&
    value !== null &&
    "name" in value &&
    typeof (value as User).name === "string" &&
    "age" in value &&
    typeof (value as User).age === "number"
  );
}

function greetUser(user: unknown) {
  if (isUser(user)) {
    console.log(`Hello, ${user.name}!`);  // OK
    console.log(`Age: ${user.age}`);       // OK
  }
}

function assertIsString(value: unknown): asserts value is string {
  if (typeof value !== "string") {
    throw new Error(`Expected string, got ${typeof value}`);
  }
}

function processInput(input: unknown) {
  assertIsString(input);
  // この行以降、input は string 型
  console.log(input.trim());   // OK
  console.log(input.length);  // OK
}

is vs asserts の違い：value is Type はif文の中で型を絞り込みます。asserts value is Type は関数が正常に返れば以降のすべてのコードで型が絞り込まれます。

error TS18046: ‘e’ is of type ‘unknown’.

try {
  JSON.parse("invalid json");
} catch (e) {
  // strict モードでは e は unknown 型
  console.log(e.message);  // TS18046 エラー！
  console.log(e.stack);    // TS18046 エラー！
  console.log(e.name);     // TS18046 エラー！
}

try {
  JSON.parse("invalid json");
} catch (e) {
  if (e instanceof Error) {
    console.log(e.message);  // OK - "Unexpected token i..."
    console.log(e.stack);    // OK - スタックトレース
    console.log(e.name);     // OK - "SyntaxError"
  } else {
    // Error以外が投げられた場合のフォールバック
    console.log("Unknown error:", e);
  }
}

// カスタムエラークラスの定義
class ApiError extends Error {
  constructor(
    message: string,
    public statusCode: number,
    public endpoint: string
  ) {
    super(message);
    this.name = "ApiError";
  }
}

class ValidationError extends Error {
  constructor(
    message: string,
    public field: string
  ) {
    super(message);
    this.name = "ValidationError";
  }
}

// catch で型を絞り込む
try {
  await fetchUserData();
} catch (e) {
  if (e instanceof ApiError) {
    console.log(e.statusCode);  // OK - ApiError固有プロパティ
    console.log(e.endpoint);    // OK
  } else if (e instanceof ValidationError) {
    console.log(e.field);       // OK - ValidationError固有プロパティ
  } else if (e instanceof Error) {
    console.log(e.message);     // OK - 一般的なError
  } else {
    console.log("Unknown error:", e);
  }
}

// パターン1: シンプルな取得
function getErrorMessage(error: unknown): string {
  if (error instanceof Error) return error.message;
  return String(error);
}

// パターン2: スタックトレース付き
function getErrorDetail(error: unknown): { message: string; stack?: string } {
  if (error instanceof Error) {
    return { message: error.message, stack: error.stack };
  }
  return { message: String(error) };
}

// 使用例
try {
  riskyOperation();
} catch (e) {
  const msg = getErrorMessage(e);
  console.error(`操作に失敗しました: ${msg}`);
}

// 型ガード: unknown が Error かどうか
function isError(value: unknown): value is Error {
  return value instanceof Error;
}

// unknown を Error に変換（Error でなければラップ）
function toError(value: unknown): Error {
  if (value instanceof Error) return value;
  if (typeof value === "string") return new Error(value);
  if (
    typeof value === "object" &&
    value !== null &&
    "message" in value &&
    typeof (value as { message: unknown }).message === "string"
  ) {
    return new Error((value as { message: string }).message);
  }
  return new Error(String(value));
}

// 使用例
try {
  riskyOperation();
} catch (e) {
  const error = toError(e);
  console.error(error.message);  // OK - 常に Error 型
}

// 非推奨：any で回避
try {
  riskyOperation();
} catch (e: any) {
  console.log(e.message);  // OK（でも型安全ではない）
}

// 推奨：instanceof でチェック
try {
  riskyOperation();
} catch (e) {
  if (e instanceof Error) {
    console.log(e.message);  // OK（型安全）
  }
}

注意：catch(e: any) は型チェックを無効化するため、TypeScriptを使う意味が薄れます。instanceof Error で型を絞り込むか、toError ユーティリティを使いましょう。

// パターン1: APIリクエスト
async function fetchData() {
  try {
    const res = await fetch("/api/data");
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    return await res.json();
  } catch (e) {
    const message = e instanceof Error ? e.message : "Unknown error";
    console.error(`API Error: ${message}`);
    throw e; // 再スロー
  }
}

// パターン2: ファイル読み込み（Node.js）
try {
  const data = await fs.readFile("config.json", "utf-8");
} catch (e) {
  if (e instanceof Error && "code" in e) {
    const nodeErr = e as NodeJS.ErrnoException;
    if (nodeErr.code === "ENOENT") {
      console.log("File not found");
    }
  }
}

// パターン3: ログ送信（エラーを握りつぶさない）
try {
  processOrder(order);
} catch (e) {
  const error = e instanceof Error ? e : new Error(String(e));
  logToSentry(error);  // Error型を要求するログサービス
  throw error;
}

ポイント：catch句でのTS18046解決は、instanceof Error が最もシンプルで安全です。プロジェクト全体で統一するために、getErrorMessage や toError のようなユーティリティ関数を作成しておくと効率的です。

error TS18046: ‘parsed’ is of type ‘unknown’.

const jsonStr = '{"name": "Alice", "age": 30}';
const parsed: unknown = JSON.parse(jsonStr);

console.log(parsed.name);  // TS18046 エラー
console.log(parsed.age);   // TS18046 エラー

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

function isUserData(value: unknown): value is UserData {
  return (
    typeof value === "object" &&
    value !== null &&
    "name" in value &&
    typeof (value as UserData).name === "string" &&
    "age" in value &&
    typeof (value as UserData).age === "number"
  );
}

const parsed: unknown = JSON.parse(jsonStr);

if (isUserData(parsed)) {
  console.log(parsed.name);  // OK - "Alice"
  console.log(parsed.age);   // OK - 30
}

import { z } from "zod";

// スキーマ定義（型定義と検証ロジックを同時に定義）
const UserSchema = z.object({
  name: z.string(),
  age: z.number().int().positive(),
});

// 型はスキーマから自動推論される
type User = z.infer<typeof UserSchema>;
// => { name: string; age: number }

// 安全にパース
const jsonStr = '{"name": "Alice", "age": 30}';
const result = UserSchema.safeParse(JSON.parse(jsonStr));

if (result.success) {
  const user = result.data;  // 型: User
  console.log(user.name);     // OK - "Alice"
  console.log(user.age);      // OK - 30
} else {
  console.error(result.error.issues);
}

type ParseResult<T> =
  | { success: true; data: T }
  | { success: false; error: Error };

function safeParse<T>(
  json: string,
  guard: (value: unknown) => value is T
): ParseResult<T> {
  try {
    const parsed: unknown = JSON.parse(json);
    if (guard(parsed)) {
      return { success: true, data: parsed };
    }
    return { success: false, error: new Error("Validation failed") };
  } catch (e) {
    return { success: false, error: e instanceof Error ? e : new Error(String(e)) };
  }
}

// 使用例
const result = safeParse(jsonStr, isUserData);
if (result.success) {
  console.log(result.data.name);  // OK - 型安全
}

ポイント：JSON.parseの戻り値は実質的にunknownです。型アサーション（as）で済ませがちですが、外部データに対しては必ずバリデーションを行いましょう。Zodを使うのが最も簡潔で安全です。

import { z } from "zod";

const UserSchema = z.object({
  id: z.number(),
  name: z.string(),
  email: z.string().email(),
});
type User = z.infer<typeof UserSchema>;

async function fetchUser(id: number): Promise<User> {
  const res = await fetch(`/api/users/${id}`);
  if (!res.ok) throw new Error(`HTTP ${res.status}`);

  const json: unknown = await res.json();
  return UserSchema.parse(json);  // バリデーション + 型付け
}

import axios from "axios";
import { z } from "zod";

// NGパターン: ジェネリクスだけでは実際の検証が行われない
const res = await axios.get<User>("/api/user");
// res.data は User型だが、実際のデータが正しい保証はない

// OKパターン: Zodで検証
async function fetchUserSafe(id: number): Promise<User> {
  const res = await axios.get(`/api/users/${id}`);
  return UserSchema.parse(res.data);  // 実際にデータを検証
}

function getFromStorage<T>(
  key: string,
  guard: (value: unknown) => value is T
): T | null {
  const raw = localStorage.getItem(key);
  if (raw === null) return null;

  try {
    const parsed: unknown = JSON.parse(raw);
    return guard(parsed) ? parsed : null;
  } catch {
    return null;
  }
}

// 使用例
const settings = getFromStorage("settings", isSettings);

const MessageSchema = z.discriminatedUnion("type", [
  z.object({ type: z.literal("chat"), text: z.string(), userId: z.string() }),
  z.object({ type: z.literal("join"), userId: z.string() }),
  z.object({ type: z.literal("leave"), userId: z.string() }),
]);

ws.addEventListener("message", (event) => {
  const parsed = MessageSchema.safeParse(JSON.parse(event.data));
  if (!parsed.success) return;

  const msg = parsed.data;
  switch (msg.type) {
    case "chat":  console.log(msg.text);    break;
    case "join":  console.log(msg.userId);  break;
    case "leave": console.log(msg.userId);  break;
  }
});

外部データの原則：fetch・axios・WebSocket・localStorage・URLSearchParams・環境変数など、外部から入ってくるデータはすべてunknownとして扱うべきです。型アサーション（as）で済ませるのはアンチパターンです。バリデーションを通してから使いましょう。

error TS18046: ‘item’ is of type ‘unknown’.

// T に制約がないため、unknown として扱われるケースがある
function processItem<T>(item: T) {
  // T に制約がないため、プロパティアクセスは不可
  console.log(item.name);  // エラー: T にnameプロパティがない
}

// 解決: extends で型制約を追加
function processItem<T extends { name: string }>(item: T) {
  console.log(item.name);  // OK - 制約によりnameが保証
}

error TS18046: ‘value’ is of type ‘unknown’.

const config: Record<string, unknown> = {
  host: "localhost",
  port: 3000,
  debug: true,
};

// NGコード
const host = config.host.toUpperCase();  // TS18046 エラー

// OKコード: typeofで絞り込み
const hostValue = config.host;
if (typeof hostValue === "string") {
  console.log(hostValue.toUpperCase());  // OK
}

// ヘルパー関数で安全に取得
function getString(obj: Record<string, unknown>, key: string): string | undefined {
  const val = obj[key];
  return typeof val === "string" ? val : undefined;
}

function getNumber(obj: Record<string, unknown>, key: string): number | undefined {
  const val = obj[key];
  return typeof val === "number" ? val : undefined;
}

const host = getString(config, "host");  // string | undefined
const port = getNumber(config, "port");  // number | undefined

const items: unknown[] = ["hello", 42, true, { name: "Alice" }];

// 文字列だけを抽出
const strings = items.filter(
  (item): item is string => typeof item === "string"
);  // 型: string[]

// 数値だけを抽出して合計
const numbers = items.filter(
  (item): item is number => typeof item === "number"
);  // 型: number[]
const sum = numbers.reduce((a, b) => a + b, 0);  // OK

// map で各要素を安全に変換
const labels = items.map((item) => {
  if (typeof item === "string") return `str: ${item}`;
  if (typeof item === "number") return `num: ${item}`;
  return `other: ${String(item)}`;
});

ポイント：Array.filter でユーザー定義型ガードを使えば、unknown[] から特定の型の要素だけを型安全に抽出できます。コールバックの戻り値型に item is Type を指定するのがコツです。

function stringify(value: unknown): string {
  switch (typeof value) {
    case "string":    return value;                // string
    case "number":    return value.toString();       // number
    case "boolean":   return value ? "true" : "false"; // boolean
    case "bigint":    return value.toString();       // bigint
    case "symbol":    return value.toString();       // symbol
    case "function":  return "[Function]";        // Function
    case "object":    return JSON.stringify(value); // object | null
    case "undefined": return "undefined";         // undefined
  }
}

function handleResponse(value: unknown) {
  // まず object かつ non-null であることを確認
  if (typeof value !== "object" || value === null) return;

  // in 演算子でプロパティの存在をチェック
  if ("data" in value) {
    // value は { data: unknown } と推論される
    console.log(value.data);  // OK（ただし data は unknown）
  }

  if ("error" in value && "message" in value) {
    console.log(value.error, value.message);  // OK
  }
}

function handleValue(value: unknown) {
  // null / undefined の除外
  if (value === null) return "null";
  if (value === undefined) return "undefined";

  // 特定のリテラル値と比較
  if (value === true) return "boolean true";
  if (value === 0) return "zero";
  if (value === "") return "empty string";

  return String(value);
}

function processData(data: unknown) {
  if (Array.isArray(data)) {
    // data は any[] に絞り込まれる
    console.log(data.length);   // OK
    data.forEach(item => {      // OK
      console.log(item);          // item は any
    });
  }
}

// 型付き配列かどうかチェックする型ガード
function isStringArray(value: unknown): value is string[] {
  return Array.isArray(value) && value.every(item => typeof item === "string");
}

type ApiResult =
  | { status: "success"; data: User }
  | { status: "error"; message: string; code: number };

// status プロパティで型を判別
function handleResult(result: ApiResult) {
  switch (result.status) {
    case "success":
      console.log(result.data.name);  // OK - User型
      break;
    case "error":
      console.log(result.message);   // OK - string型
      console.log(result.code);      // OK - number型
      break;
  }
}

// unknown から Discriminated Union に変換する型ガード
function isApiResult(value: unknown): value is ApiResult {
  if (typeof value !== "object" || value === null) return false;
  if (!("status" in value)) return false;
  const s = (value as { status: unknown }).status;
  return s === "success" || s === "error";
}

ポイント：型絞り込みの詳細は【TypeScript】型の絞り込み 完全ガイドで体系的に解説しています。TS18046の解決には、これらのテクニックを状況に応じて組み合わせることが重要です。

export function isString(value: unknown): value is string {
  return typeof value === "string";
}

export function isNumber(value: unknown): value is number {
  return typeof value === "number" && !Number.isNaN(value);
}

export function isBoolean(value: unknown): value is boolean {
  return typeof value === "boolean";
}

export function isNonNullObject(value: unknown): value is Record<string, unknown> {
  return typeof value === "object" && value !== null;
}

export function isError(value: unknown): value is Error {
  return value instanceof Error;
}

export function toError(value: unknown): Error {
  if (value instanceof Error) return value;
  if (typeof value === "string") return new Error(value);
  return new Error(String(value));
}

export function getErrorMessage(error: unknown): string {
  if (error instanceof Error) return error.message;
  return String(error);
}

// 特定のプロパティが存在し、指定した型であることをチェック
export function hasProperty<K extends string>(
  obj: unknown,
  key: K
): obj is Record<K, unknown> {
  return typeof obj === "object" && obj !== null && key in obj;
}

// 使用例
function process(data: unknown) {
  if (hasProperty(data, "name")) {
    // data は Record<"name", unknown> 型
    const name = data.name;  // unknown
    if (typeof name === "string") {
      console.log(name.toUpperCase());  // OK
    }
  }
}

// Result型（成功 or 失敗）
type NarrowResult<T> =
  | { ok: true; value: T }
  | { ok: false; error: string };

// 型ガード関数を渡して unknown を安全に変換
export function narrowType<T>(
  value: unknown,
  guard: (v: unknown) => v is T,
  errorMsg = "Type guard failed"
): NarrowResult<T> {
  if (guard(value)) {
    return { ok: true, value };
  }
  return { ok: false, error: errorMsg };
}

// 使用例
const result = narrowType(data, isUser, "Invalid user data");
if (result.ok) {
  console.log(result.value.name);  // OK - User型
}

まとめ：これらのユーティリティ関数を utils/typeGuards.ts にまとめておくと、プロジェクト全体でunknown型の値を統一的に扱えます。チーム開発では特に効果的です。

import { z } from "zod";

// スキーマ定義
const UserSchema = z.object({
  id: z.number(),
  name: z.string().min(1),
  email: z.string().email(),
  role: z.enum(["admin", "user", "guest"]),
  createdAt: z.string().datetime(),
});

// 型を自動推論
type User = z.infer<typeof UserSchema>;

// parse: 失敗時はエラーをスロー
const user = UserSchema.parse(unknownData);  // User型 or ZodError

// safeParse: 成功/失敗を Result で返す
const result = UserSchema.safeParse(unknownData);
if (result.success) {
  console.log(result.data.name);  // OK - User型
} else {
  console.error(result.error.flatten());
}

import * as v from "valibot";

const UserSchema = v.object({
  id: v.number(),
  name: v.pipe(v.string(), v.minLength(1)),
  email: v.pipe(v.string(), v.email()),
});

type User = v.InferOutput<typeof UserSchema>;

const result = v.safeParse(UserSchema, unknownData);
if (result.success) {
  console.log(result.output.name);  // OK
}

おすすめ：新しいプロジェクトでは Zod がおすすめです。バンドルサイズが気になる場合は Valibot を検討してください。小規模なプロジェクトや外部依存を避けたい場合は自作の型ガードで十分です。

class ErrorBoundary extends React.Component<
  { children: React.ReactNode },
  { error: Error | null }
> {
  state = { error: null as Error | null };

  static getDerivedStateFromError(error: Error) {
    return { error };
  }

  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
    // error は Error 型（React が保証）
    console.error(error.message);           // OK
    console.error(errorInfo.componentStack);  // OK
  }

  render() {
    if (this.state.error) {
      return <div>Error: {this.state.error.message}</div>;
    }
    return this.props.children;
  }
}

// Discriminated Union で action を定義
type Action =
  | { type: "INCREMENT" }
  | { type: "DECREMENT" }
  | { type: "SET"; payload: number };

interface State {
  count: number;
}

// reducer に明示的に型を指定
function reducer(state: State, action: Action): State {
  switch (action.type) {
    case "INCREMENT": return { count: state.count + 1 };
    case "DECREMENT": return { count: state.count - 1 };
    case "SET":       return { count: action.payload }; // OK
  }
}

// useReducer は reducer 関数から型を自動推論
const [state, dispatch] = useReducer(reducer, { count: 0 });
dispatch({ type: "SET", payload: 10 });  // OK - 型安全

interface AuthContextType {
  user: User | null;
  login: (email: string, password: string) => Promise<void>;
  logout: () => void;
}

// null を初期値にし、カスタムHookで非null保証
const AuthContext = createContext<AuthContextType | null>(null);

export function useAuth(): AuthContextType {
  const context = useContext(AuthContext);
  if (context === null) {
    throw new Error("useAuth must be used within AuthProvider");
  }
  return context;  // AuthContextType（non-null）
}

import { z } from "zod";

// unknown を返す外部Hook のラッパー
function useTypedQuery<T>(
  key: string,
  schema: z.ZodType<T>,
  fetcher: () => Promise<unknown>
) {
  const [data, setData] = useState<T | null>(null);
  const [error, setError] = useState<Error | null>(null);

  useEffect(() => {
    fetcher()
      .then((raw) => {
        const result = schema.safeParse(raw);
        if (result.success) setData(result.data);
        else setError(new Error("Validation failed"));
      })
      .catch((e) => setError(e instanceof Error ? e : new Error(String(e))));
  }, [key]);

  return { data, error };
}

// 使用例
const { data, error } = useTypedQuery("users", UserSchema, fetchUsers);
// data は User | null（型安全）

{
  "compilerOptions": {
    // strict: true は以下をすべて有効にする
    "strict": true,

    // strict に含まれる個別オプション
    // "strictNullChecks": true,
    // "strictFunctionTypes": true,
    // "strictBindCallApply": true,
    // "strictPropertyInitialization": true,
    // "noImplicitAny": true,
    // "noImplicitThis": true,
    // "alwaysStrict": true,
    // "useUnknownInCatchVariables": true  ← TS18046の原因
  }
}

// ステップ1: strict を有効にし、一時的に useUnknownInCatchVariables を無効化
{
  "compilerOptions": {
    "strict": true,
    "useUnknownInCatchVariables": false  // 一時的に無効化
  }
}

// ステップ2: catch句を順次修正
// - instanceof Error でチェック
// - getErrorMessage ユーティリティを導入

// ステップ3: すべての catch句を修正したら useUnknownInCatchVariables を削除
{
  "compilerOptions": {
    "strict": true
    // useUnknownInCatchVariables は strict に含まれるので不要
  }
}

ポイント：useUnknownInCatchVariables を無効にするのはあくまで一時的な対応です。最終的には有効にして、catch句を正しく型安全に書くことを目指しましょう。tsconfig.jsonの詳細はtsconfig.json 完全ガイドを参照してください。

TS18046 解決フローチャート

1. エラーメッセージを確認 – どの変数が unknown 型か特定する
2. unknown の出所を確認 – catch句？JSON.parse？APIレスポンス？ジェネリクス？
3. 型の絞り込み方法を選ぶ
   • プリミティブ値 → typeof
   • クラスインスタンス → instanceof
   • オブジェクトのプロパティ → in 演算子
   • 複雑な型 → ユーザー定義型ガード（value is Type）
   • 外部データ → バリデーションライブラリ（Zod推奨）
4. 型ガードの後でプロパティにアクセス

TypeScript 関連記事

• 【TypeScript】型の書き方 完全入門 – 基本型から応用型まで体系的に学ぶ
• 【TypeScript】よくあるエラーと解決方法 – TS18046以外のエラーコード全般
• 【TypeScript】tsconfig.json 完全ガイド – strict設定の詳細
• 【TypeScript】型の絞り込み 完全ガイド – Type Narrowingの全テクニック
• 【TypeScript】TS2322の原因と解決方法 – Type is not assignable to type
• 【TypeScript】TS2339の原因と解決方法 – Property does not exist on type
• 【TypeScript】TS2345の原因と解決方法 – Argument of type is not assignable
• 【TypeScript】TS7006の原因と解決方法 – Parameter implicitly has an any type
• 【TypeScript】TS2304の原因と解決方法 – Cannot find name
• 【TypeScript】TS2531・TS2532の原因と解決方法 – Object is possibly null/undefined
• 【TypeScript】TS2307の原因と解決方法 – Cannot find module
• 【TypeScript】TS2554の原因と解決方法 – Expected N arguments but got M