【TypeScript】TS2531・TS2532の原因と解決方法｜Object is possibly null/undefinedを完全解説

この記事で学べること

• TS2531（Object is possibly ‘null’）・TS2532（Object is possibly ‘undefined’）の根本原因
• strictNullChecksとの関係と、なぜ null/undefined チェックが重要なのか
• if / typeof による null チェックパターン
• Optional Chaining（?.）とNullish Coalescing（??）による解決
• Non-null Assertion（!）の正しい使い方と危険なケース
• DOM操作（getElementById・querySelector）での型安全な実装
• 配列操作（find・pop・Map.get）での対処法
• React（useRef・useState・useContext）での解決パターン
• 関数の引数・戻り値での null/undefined 制御
• tsconfig.json の設定と段階的 strict 化
• 実務で使えるベストプラクティスとユーティリティ関数

error TS2531: Object is possibly ‘null’.

function getName(value: string | null) {
  // Error: TS2531: Object is possibly 'null'.
  return value.toUpperCase();
}

error TS2532: Object is possibly ‘undefined’.

function getLength(value?: string) {
  // Error: TS2532: Object is possibly 'undefined'.
  return value.length;
}

null と undefined の違い

• null：「値が存在しないことを明示的に表す」。プログラマが意図的に「空」を設定したケース（例：document.getElementById() が要素を見つけられなかった場合）
• undefined：「値が定義されていないことを表す」。変数が初期化されていない、オプショナル引数が渡されなかった、オブジェクトに存在しないプロパティにアクセスしたケース

// strictNullChecks: false の場合
// → string 型に null/undefined が含まれるため、エラーなし
let value: string = null;       // OK（危険!）
console.log(value.length);     // コンパイルOK → 実行時 TypeError!

// strictNullChecks: true の場合
// → string 型に null/undefined は含まれない
let value: string = null;       // Error: TS2322
let value2: string | null = null; // OK
console.log(value2.length);    // Error: TS2531

注意：strictNullChecksを無効にしてエラーを「消す」のは解決策ではありません。実行時にTypeErrorが発生するバグを隠すだけです。strictNullChecks は常に有効にし、適切な null チェックを行うのがベストプラクティスです。

const value = null;
value.toString();
// TypeError: Cannot read properties of null (reading 'toString')

const obj = undefined;
obj.name;
// TypeError: Cannot read properties of undefined (reading 'name')

let username: string | null = null;

// 何らかの処理で値が入るかもしれない
username = getUserNameFromDB();

// Error: TS2531: Object is possibly 'null'.
console.log(username.toUpperCase());
console.log(username.length);
console.log(username[0]);

interface Config {
  apiUrl?: string;
  timeout?: number;
}

const config: Config = {};

// Error: TS2532: Object is possibly 'undefined'.
console.log(config.apiUrl.toUpperCase());
console.log(config.timeout.toFixed(2));

function findUser(id: number): string | null {
  const users = ['Alice', 'Bob', 'Charlie'];
  return users[id] ?? null;
}

const user = findUser(5);

// Error: TS2531: Object is possibly 'null'.
console.log(user.toUpperCase());
console.log(user.length);
console.log(user.trim());

interface User {
  name: string;
  email: string;
}

function getUser(id: number): User | undefined {
  const users: User[] = [{ name: 'Alice', email: 'alice@example.com' }];
  return users.find(u => u.name === 'Bob');
}

const user = getUser(1);

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

function greet(name: string | null) {
  // Error: TS2531: Object is possibly ''null''.
  // console.log(name.toUpperCase());

  // 解決: null チェックを追加
  if (name !== null) {
    // この中では name は string 型に絞り込まれる
    console.log(name.toUpperCase()); // OK
  } else {
    console.log(''名前が設定されていません'');
  }
}

function processConfig(timeout?: number) {
  // Error: TS2532: Object is possibly ''undefined''.
  // console.log(timeout.toFixed(2));

  if (timeout !== undefined) {
    console.log(timeout.toFixed(2)); // OK
  }
}

function processValue(value: string | null | undefined) {
  if (value != null) {
    console.log(value.length); // OK: string
  }
}

ポイント：!= null は null/undefined 同時チェックの推奨パターンです。ESLint で "eqeqeq": ["error", "always", { "null": "ignore" }] とすると null チェックだけ許可できます。

function formatValue(value: string | number | null | undefined) {
  if (typeof value === ''string'') {
    return value.toUpperCase(); // OK: string
  }
  if (typeof value === ''number'') {
    return value.toFixed(2); // OK: number
  }
  return ''値なし'';
}

注意：typeof null は ''object'' を返します（JavaScript の歴史的仕様バグ）。null チェックには value !== null を使いましょう。

// string | null なら truthy チェックOK
function processName(name: string | null) {
  if (name) {
    console.log(name.toUpperCase()); // OK
  }
}

// number | null では注意！
function processCount(count: number | null) {
  // NG: count=0 → false
  if (count) { /* 0はスキップ */ }

  // OK: 厳密チェック
  if (count !== null) {
    console.log(count.toFixed(2)); // 0.00 も処理
  }
}

function processUser(user: User | null) {
  if (user === null) return;
  // ここ以降 user は User 型

  if (!user.email) return;
  sendEmail(user.email);
}

function getRequiredUser(id: number): User {
  const user = findUserById(id); // User | null
  if (user === null) {
    throw new Error(''User not found'');
  }
  return user; // OK: User 型
}

interface User {
  name: string;
  address?: {
    city: string;
    zip: string;
  };
}

const user: User = { name: 'Alice' };

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

// 解決: Optional Chaining
console.log(user.address?.city);  // undefined
console.log(user.address?.zip);   // undefined

interface Logger {
  log(msg: string): void;
  error(msg: string): void;
}

let logger: Logger | null = null;

// Error: TS2531: Object is possibly 'null'.
// logger.log('hello');

// 解決
logger?.log('hello');   // null なので何も起きない
logger?.error('oops');  // null なので何も起きない

function getFirstItem(items: string[] | null) {
  // Error: TS2531: Object is possibly 'null'.
  // return items[0];

  return items?.[0]; // string | undefined
}

// 関数呼び出しにも使える
type Callback = ((v: string) => void) | undefined;

function execute(cb: Callback) {
  cb?.('hello'); // undefined なら何も起きない
}

interface Company {
  name: string;
  ceo?: {
    name: string;
    contact?: {
      email?: string;
      phone?: string;
    };
  };
}

function getCeoEmail(company: Company): string | undefined {
  // Optional Chaining なら1行
  return company.ceo?.contact?.email;
}

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

const config: Config = {};

const host = config.database?.host;
// host の型: string | undefined

// string 型の変数に直接代入するとエラー
// const requiredHost: string = config.database?.host; // TS2322

// ?? と組み合わせてデフォルト値を設定
const requiredHost: string = config.database?.host ?? 'localhost';

// ケース1: 確実に string が必要な関数引数
function requireString(value: string) { /* ... */ }
const name: string | null = getName();
// requireString(name?.toString()); // TS2345: string | undefined

// → if文で確認する
if (name !== null) {
  requireString(name); // OK
}

// ケース2: 代入の左辺には使えない
const obj: { value: number } | null = getObj();
// obj?.value = 10; // SyntaxError

if (obj !== null) {
  obj.value = 10; // OK
}

// ケース3: 分割代入には使えない
const user: User | null = getUser();
if (user !== null) {
  const { name, email } = user; // OK
}

Optional Chaining の使い分けまとめ

• 使ってよい場面：null/undefined のとき undefined を返せばよいケース
• 使えない場面：確実に非null値が必要なケース（関数の引数、代入の左辺、分割代入）
• ベストプラクティス：?. の結果は ?? でデフォルト値を設定するか、if文で絞り込む

function getDisplayName(name: string | null): string {
  // name が null なら 'ゲスト' を返す
  return name ?? 'ゲスト';
}

getDisplayName('Alice');  // 'Alice'
getDisplayName(null);     // 'ゲスト'

function getTimeout(config?: { timeout?: number }): number {
  return config?.timeout ?? 3000;
}

getTimeout({ timeout: 5000 }); // 5000
getTimeout({ timeout: 0 });    // 0（0 は有効な値）
getTimeout({});              // 3000
getTimeout();                // 3000

// || は falsy 値すべてで右辺を返す
0     || 10;    // 10（0 は falsy）
''    || 'N/A'; // 'N/A'（'' は falsy）
false || true;  // true（false は falsy）
null  || 10;    // 10

// ?? は null/undefined のときだけ右辺を返す
0     ?? 10;    // 0（0 は有効な値）
''    ?? 'N/A'; // ''（空文字は有効な値）
false ?? true;  // false（false は有効な値）
null  ?? 10;    // 10

注意：数値や真偽値のデフォルト設定では || ではなく ?? を使いましょう。|| では 0 や false が意図せずデフォルト値に置き換わるバグが発生します。

let name: string | null = null;
name ??= 'デフォルト';
// name === 'デフォルト'

let count: number | undefined;
count ??= 0;
// count === 0

// 既に値がある場合は代入されない
let value: number | null = 42;
value ??= 0;
// value === 42（変更されない）

interface AppConfig {
  server?: {
    host?: string;
    port?: number;
  };
  debug?: boolean;
}

function initApp(config?: AppConfig) {
  const host = config?.server?.host ?? 'localhost';
  const port = config?.server?.port ?? 3000;
  const debug = config?.debug ?? false;

  console.log(`Server: ${host}:${port}, Debug: ${debug}`);
}

initApp();
// Server: localhost:3000, Debug: false

initApp({ server: { host: 'api.example.com', port: 8080 }, debug: true });
// Server: api.example.com:8080, Debug: true

ポイント：?. + ?? の組み合わせは、設定オブジェクトのデフォルト値設定で定番パターンです。TS2531/TS2532 の解決と同時に、型安全なデフォルト値設定ができます。

function processName(name: string | null) {
  // Error: TS2531: Object is possibly 'null'.
  // console.log(name.toUpperCase());

  // Non-null Assertion で解決（! を付ける）
  console.log(name!.toUpperCase()); // OK（コンパイルは通る）
}

// name! の型は string（null が除外される）
const value: string | null = 'hello';
const definite: string = value!; // OK

// ケース1: 直前に null チェック済みだが TS が認識できない
const map = new Map<string, number>();
map.set('key', 42);

if (map.has('key')) {
  // has() で存在確認済みだが、get() の戻り値は number | undefined
  const value = map.get('key')!; // OK: 確実に存在する
}

// ケース2: テストコード
const element = document.getElementById('root')!;
// テスト環境で要素の存在が保証されている場合

// ケース3: 初期化が別の場所で行われるクラスプロパティ
class App {
  // definite assignment assertion
  db!: Database; // init() で初期化される

  async init() {
    this.db = await connectDatabase();
  }
}

// NG: 実際に null の可能性がある
const el = document.getElementById('maybe-not-exist')!;
el.textContent = 'Hello';
// → 要素がなければ TypeError: Cannot set properties of null

// NG: API レスポンスに ! を使う
const response = await fetch('/api/user');
const data = await response.json();
console.log(data.user!.name); // user が null なら TypeError

// NG: find() の結果に ! を使う
const users = [{ id: 1, name: 'Alice' }];
const bob = users.find(u => u.name === 'Bob')!;
console.log(bob.id); // Bob がいなければ TypeError

注意：Non-null Assertion (!) は「TypeScriptを黙らせる」ための道具ではありません。! を多用するコードは、strictNullChecks を無効にしているのと同じくらい危険です。まず if チェックや ?? での解決を検討し、! は最後の手段にしましょう。

{
  "rules": {
    // Non-null Assertion を警告
    "@typescript-eslint/no-non-null-assertion": "warn",

    // より厳しく: エラーにする
    // "@typescript-eslint/no-non-null-assertion": "error"
  }
}

const value: string | null = getString();

// ! は null/undefined だけを除外
const a: string = value!;           // string | null → string

// as は型を変換（互換性チェックあり）
const b: string = value as string;    // string | null → string

// この場合は ! の方が意図が明確

// getElementById の戻り値は HTMLElement | null
const el = document.getElementById('app');

// Error: TS2531: Object is possibly 'null'.
// el.textContent = 'Hello';

// パターン1: if チェック
if (el) {
  el.textContent = 'Hello'; // OK
}

// パターン2: 早期リターン
const root = document.getElementById('root');
if (!root) {
  throw new Error('#root element not found');
}
root.textContent = 'Hello'; // OK: HTMLElement 型

// パターン3: Non-null Assertion（要素の存在が確実な場合のみ）
const app = document.getElementById('app')!;
app.textContent = 'Hello'; // コンパイルOK（要素がないとランタイムエラー）

// querySelector はジェネリクスで型を指定できる
const input = document.querySelector<HTMLInputElement>('input[name=email]');
// input の型: HTMLInputElement | null

if (input) {
  console.log(input.value); // OK: HTMLInputElement の value にアクセス
}

// 複数要素の場合は querySelectorAll（null を返さない）
const buttons = document.querySelectorAll<HTMLButtonElement>('button');
// buttons の型: NodeListOf<HTMLButtonElement>（null ではない）
buttons.forEach(btn => {
  btn.disabled = true; // OK
});

const child = document.getElementById('child');

if (child) {
  // parentElement も null の可能性あり
  const parent = child.parentElement;

  // Error: TS2531 - parentElement は HTMLElement | null
  // parent.classList.add('active');

  // Optional Chaining で安全にアクセス
  parent?.classList.add('active');

  // nextElementSibling / previousElementSibling も同様
  child.nextElementSibling?.classList.add('next');
}

function handleClick(event: MouseEvent) {
  const target = event.target as HTMLElement;

  // closest() は Element | null
  const card = target.closest<HTMLDivElement>('.card');

  if (card) {
    console.log(card.dataset.id); // OK
  }
}

const link = document.querySelector('a');

if (link) {
  const href = link.getAttribute('href');
  // href: string | null

  // ?? でデフォルト値を設定
  const url = href ?? '#';
  console.log(url.toUpperCase()); // OK: string
}

// 要素が見つからない場合にエラーをスローするヘルパー
function getElement<T extends HTMLElement>(
  selector: string
): T {
  const el = document.querySelector<T>(selector);
  if (!el) {
    throw new Error(`Element not found: ${selector}`);
  }
  return el;
}

// 使い方
const form = getElement<HTMLFormElement>('#loginForm');
form.addEventListener('submit', handleSubmit); // OK

const input = getElement<HTMLInputElement>('#email');
console.log(input.value); // OK

interface Product {
  id: number;
  name: string;
  price: number;
}

const products: Product[] = [
  { id: 1, name: 'りんご', price: 100 },
  { id: 2, name: 'バナナ', price: 200 },
];

const found = products.find(p => p.id === 3);
// found: Product | undefined

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

// パターン1: if チェック
if (found) {
  console.log(found.name);  // OK
  console.log(found.price); // OK
}

// パターン2: Optional Chaining
console.log(found?.name);  // string | undefined

// パターン3: ?? でデフォルト値
const name = found?.name ?? '商品なし';

const stack: number[] = [1, 2, 3];

const last = stack.pop();
// last: number | undefined

// Error: TS2532
// console.log(last.toFixed(2));

if (last !== undefined) {
  console.log(last.toFixed(2)); // OK: '3.00'
}

// shift() も同様
const queue: string[] = ['task1', 'task2'];
const first = queue.shift();
// first: string | undefined

const task = first ?? 'no task';

const arr = [1, 2, 3];

// noUncheckedIndexedAccess: false（デフォルト）
const val = arr[0]; // number（undefined を含まない）
val.toFixed(2); // OK

// noUncheckedIndexedAccess: true
const val2 = arr[0]; // number | undefined
// val2.toFixed(2); // Error: TS2532

// 解決: チェックを追加
if (val2 !== undefined) {
  val2.toFixed(2); // OK
}

const cache = new Map<string, number>();
cache.set('price', 100);

const price = cache.get('price');
// price: number | undefined

// Error: TS2532
// console.log(price.toFixed(2));

// パターン1: has() で事前チェック + !
if (cache.has('price')) {
  const p = cache.get('price')!;
  console.log(p.toFixed(2)); // OK
}

// パターン2: ?? でデフォルト値
const safePrice = cache.get('price') ?? 0;
console.log(safePrice.toFixed(2)); // OK

// パターン3: undefined チェック
const val = cache.get('price');
if (val !== undefined) {
  console.log(val.toFixed(2)); // OK
}

import { useRef, useEffect } from 'react';

function VideoPlayer() {
  const videoRef = useRef<HTMLVideoElement>(null);
  // videoRef.current: HTMLVideoElement | null

  useEffect(() => {
    // Error: TS2531: Object is possibly 'null'.
    // videoRef.current.play();

    // 解決: null チェック
    if (videoRef.current) {
      videoRef.current.play();
    }
  }, []);

  return <video ref={videoRef} src='movie.mp4' />;
}

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

function UserProfile() {
  const [user, setUser] = useState<User | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetchUser().then(data => {
      setUser(data);
      setLoading(false);
    });
  }, []);

  if (loading) return <p>読み込み中...</p>;

  // Error: TS2531: Object is possibly 'null'.
  // return <p>{user.name}</p>;

  // 解決: null チェック
  if (!user) return <p>ユーザーが見つかりません</p>;

  // ここ以降 user は User 型に絞り込まれる
  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
    </div>
  );
}

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

// パターン1: デフォルト値を null にする
const AuthContext = createContext<AuthContextType | null>(null);

// カスタムフック（null チェック付き）
function useAuth(): AuthContextType {
  const context = useContext(AuthContext);
  if (context === null) {
    throw new Error('useAuth must be used within AuthProvider');
  }
  return context;
}

// 使用側: null チェック不要
function Dashboard() {
  const { user, logout } = useAuth(); // AuthContextType
  // ...
}

interface ButtonProps {
  label: string;
  onClick?: () => void;
  icon?: string;
  className?: string;
}

function Button({ label, onClick, icon, className }: ButtonProps) {
  // onClick は optional → onClick?: () => void | undefined
  // Error: TS2532 if called directly
  // onClick();

  return (
    <button
      className={className ?? 'btn-default'}
      onClick={onClick}  {/* JSX では undefined を渡してもOK */}
    >
      {icon && <span>{icon}</span>}
      {label}
    </button>
  );
}

function Form() {
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    // currentTarget は HTMLInputElement（null ではない）
    console.log(e.currentTarget.value); // OK
  };

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const formData = new FormData(e.currentTarget); // OK
  };

  return (
    <form onSubmit={handleSubmit}>
      <input onChange={handleChange} />
    </form>
  );
}

function findUserByEmail(email: string): User | null {
  const users: User[] = getUsers();
  return users.find(u => u.email === email) ?? null;
}

const user = findUserByEmail('alice@example.com');

// Error: TS2531
// console.log(user.name);

// パターン1: if + early return
if (!user) {
  console.log('User not found');
  return;
}
console.log(user.name); // OK

// パターン2: Optional Chaining + ??
const name = user?.name ?? 'Unknown';

function greet(name?: string, greeting?: string) {
  // name: string | undefined
  // greeting: string | undefined

  // ?? でデフォルト値を設定
  const displayName = name ?? 'ゲスト';
  const displayGreeting = greeting ?? 'こんにちは';

  console.log(`${displayGreeting}、${displayName}さん`);
}

// デフォルト引数を使えば undefined チェック不要
function greet(name = 'ゲスト', greeting = 'こんにちは') {
  // name: string（undefined ではない）
  // greeting: string（undefined ではない）

  console.log(`${greeting}、${name}さん`);
  console.log(name.toUpperCase()); // OK: TS2532 なし
}

greet();              // 'こんにちは、ゲストさん'
greet('Alice');       // 'こんにちは、Aliceさん'
greet('Alice', 'Hello'); // 'Hello、Aliceさん'

ポイント：デフォルト引数は、Optional引数（?）+ ?? よりも簡潔です。nullではなく undefined だけを扱う場合は、デフォルト引数が最適です。

// null を除外する型ガード
function isNotNull<T>(value: T | null): value is T {
  return value !== null;
}

// undefined を除外する型ガード
function isDefined<T>(value: T | undefined): value is T {
  return value !== undefined;
}

// null と undefined を両方除外する型ガード
function isNonNullable<T>(value: T): value is NonNullable<T> {
  return value != null;
}

// 使い方: 配列から null/undefined をフィルタリング
const mixed: (string | null | undefined)[] = [
  'Alice', null, 'Bob', undefined, 'Charlie'
];

// filter だけでは型が絞り込まれない
const bad = mixed.filter(v => v != null);
// bad: (string | null | undefined)[]

// 型ガード関数を使えば型が絞り込まれる
const good = mixed.filter(isNonNullable);
// good: string[]

good.forEach(name => {
  console.log(name.toUpperCase()); // OK: string
});

ポイント：isNonNullable 型ガード関数は、配列の .filter() と組み合わせるのが最も効果的です。filter(Boolean) よりも型推論が正確になります。

{
  "compilerOptions": {
    // strictNullChecks を個別に有効化
    "strictNullChecks": true,

    // または strict で一括有効化（推奨）
    "strict": true
  }
}

// "strict": true は以下すべてを有効にするのと同じ
{
  "compilerOptions": {
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "strictBindCallApply": true,
    "strictPropertyInitialization": true,
    "noImplicitAny": true,
    "noImplicitThis": true,
    "alwaysStrict": true,
    "useUnknownInCatchVariables": true
  }
}

// noUncheckedIndexedAccess: true

const arr = [1, 2, 3];
const first = arr[0]; // number | undefined

const obj: Record<string, number> = { a: 1 };
const val = obj['b']; // number | undefined

// for-of ループでは undefined にならない
for (const item of arr) {
  console.log(item.toFixed(2)); // OK: number
}

noUncheckedIndexedAccess の推奨

• strict: true には含まれないため、別途有効にする必要あり
• 配列の範囲外アクセスによるバグを防げる
• 既存プロジェクトに導入すると大量のエラーが出る可能性あり
• 新規プロジェクトでは有効にすることを推奨

interface Config {
  color?: string; // '色が指定されていない' と 'undefined' を区別
}

// exactOptionalPropertyTypes: false（デフォルト）
const a: Config = { color: undefined }; // OK

// exactOptionalPropertyTypes: true
const b: Config = { color: undefined }; // Error!
const c: Config = {};                    // OK（プロパティ自体が存在しない）

段階的 strict 化のステップ

1. Step 1：strictNullChecks: true を有効にし、エラー数を確認
2. Step 2：// @ts-ignore で一時的にエラーを抑制（コメントで理由を記載）
3. Step 3：モジュール単位で @ts-ignore を削除し、正しい null チェックに置き換え
4. Step 4：すべての @ts-ignore を解消
5. Step 5：noUncheckedIndexedAccess: true を追加

function processOrder(order: Order | null) {
  if (!order) return;
  // ここ以降 order は Order 型

  const items = order.items;
  if (items.length === 0) return;

  const total = items.reduce((sum, item) => sum + item.price, 0);
  processPayment(total);
}

// 汎用の assert 関数
function assertNonNull<T>(
  value: T | null | undefined,
  message?: string
): asserts value is T {
  if (value == null) {
    throw new Error(message ?? 'Expected non-null value');
  }
}

// 使い方
function getUser(id: number): User {
  const user = users.find(u => u.id === id);
  assertNonNull(user, `User ${id} not found`);
  // ここ以降 user は User 型
  return user;
}

asserts キーワードとは

• asserts value is T は、関数が正常に返った場合に value が T 型であることを TypeScript に伝える
• 関数が throw した場合は、以降のコードが実行されないため型が保証される
• Non-null Assertion (!) と違い、実行時にもチェックされるため安全

interface Logger {
  log(message: string): void;
  error(message: string): void;
}

// Null Object: 何もしないロガー
const nullLogger: Logger = {
  log() {},
  error() {},
};

// Logger | null ではなく、常に Logger を使う
function createApp(logger: Logger = nullLogger) {
  // null チェック不要
  logger.log('App started'); // OK
}

// non-null を要求するユーティリティ
function requireNonNull<T>(
  value: T | null | undefined,
  message?: string
): T {
  if (value == null) {
    throw new Error(message ?? 'Required value is null or undefined');
  }
  return value;
}

// 使い方
const el = requireNonNull(
  document.getElementById('root'),
  '#root element is required'
);
// el: HTMLElement（null ではない）

const user = requireNonNull(
  users.find(u => u.id === targetId),
  `User ${targetId} not found`
);
// user: User（undefined ではない）

TS2531/TS2532 解決のポイント

• strictNullChecks は常に有効にする（バグの早期発見に不可欠）
• ! の多用は避ける（ランタイムエラーの原因になる）
• ?. と ?? を組み合わせるのが実務では最も使いやすい
• Early Return / throw で型を絞り込むとコードが読みやすくなる
• 型ガード関数を自作すると、配列のフィルタリングで型が正確になる
• DOM API は常に null を返す可能性があるので、null チェックを忘れない
• React では useRef の初期値、useState の nullable state に注意

TypeScript 関連記事

• TypeScript 型の書き方 完全入門
• TypeScript よくあるエラーと解決方法
• tsconfig.json 完全ガイド
• 型の絞り込み（Type Narrowing） 完全ガイド
• TS2322の原因と解決方法
• TS2339の原因と解決方法
• TS2345の原因と解決方法
• TS7006の原因と解決方法
• TS2304の原因と解決方法