【TypeScript】TS2339の原因と解決方法｜Property does not exist on typeを完全解説

この記事で学べること

• TS2339エラーの根本原因とエラーメッセージの読み方
• 基本的なケース（タイポ・定義不足・プロパティ追加忘れ）の解決方法
• ユニオン型・型の絞り込み（Type Guard）による解決パターン
• Object.keys()・for…in・スプレッド演算子での発生と対処法
• DOM操作（querySelector・HTMLElement）での型解決
• クラスのprivate/protected・動的プロパティでの対処
• 外部ライブラリ・JSON.parse・fetch/axiosでの型定義方法
• React/Vue（state/props/ref/event）での解決パターン
• 実務で頻出するTS2339パターンのベストプラクティス

error TS2339: Property ‘X’ does not exist on type ‘Y’.

const user = {
  name: '田中太郎',
  age: 30
};

// OK: 型に存在するプロパティ
console.log(user.name);  // "田中太郎"
console.log(user.age);   // 30

// TS2339: 型に存在しないプロパティ
console.log(user.email); // エラー!

error TS2339: Property ‘email’ does not exist on type ‘{ name: string; age: number; }’.

// JavaScript: エラーにならないが、バグ！
const user = { name: '田中', age: 30 };

// タイポに気づけない
console.log(user.naem);   // undefined（バグ！）

// 存在しないプロパティへのアクセスに気づけない
console.log(user.email);  // undefined（意図した動作？）

// 実行時にようやくエラーになる
console.log(user.email.toLowerCase()); // TypeError: Cannot read properties of undefined

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

const user: User = {
  name: '田中太郎',
  age: 30
};

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

error TS2339: Property ‘email’ does not exist on type ‘User’.

interface User {
  name: string;
  age: number;
  email: string;  // プロパティを追加
}

const user: User = {
  name: '田中太郎',
  age: 30,
  email: 'tanaka@example.com'
};

console.log(user.email); // OK: "tanaka@example.com"

ポイント：プロパティが必須でない場合は、email?: stringのようにオプショナルプロパティ（?付き）にすることもできます。

interface Product {
  productName: string;
  price: number;
  description: string;
}

function displayProduct(product: Product) {
  // TS2339: Property 'produtName' does not exist on type 'Product'.
  // Did you mean 'productName'?
  console.log(product.produtName);

  // TS2339: Property 'prce' does not exist on type 'Product'.
  console.log(product.prce);

  // TS2339: Property 'descrption' does not exist on type 'Product'.
  console.log(product.descrption);
}

error TS2339: Property ‘produtName’ does not exist on type ‘Product’. Did you mean ‘productName’?

function displayProduct(product: Product) {
  console.log(product.productName);  // OK
  console.log(product.price);        // OK
  console.log(product.description);  // OK
}

ポイント：VSCode等のエディタでは、Ctrl+Space（またはCmd+Space）で補完候補が表示されます。タイポを防ぐために、プロパティ名は常に補完機能を使って入力することをおすすめします。

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

// 後からretryCountを追加したい
function initApp(config: Config) {
  console.log(config.apiUrl);      // OK
  console.log(config.timeout);     // OK
  // TS2339: Property 'retryCount' does not exist on type 'Config'.
  console.log(config.retryCount); // エラー!
}

error TS2339: Property ‘retryCount’ does not exist on type ‘Config’.

interface Config {
  apiUrl: string;
  timeout: number;
  retryCount?: number; // オプショナルとして追加
}

function initApp(config: Config) {
  console.log(config.apiUrl);  // OK
  console.log(config.timeout); // OK
  console.log(config.retryCount ?? 3); // OK: undefinedの場合はデフォルト値3
}

// 型推論: { name: string; age: number; }
const user = {
  name: '田中',
  age: 30
};

// TS2339: Property 'email' does not exist on type '{ name: string; age: number; }'.
user.email = 'tanaka@example.com';

error TS2339: Property ‘email’ does not exist on type ‘{ name: string; age: number; }’.

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

const user: User = {
  name: '田中',
  age: 30
};

user.email = 'tanaka@example.com'; // OK

// type では宣言のマージができない
type UserType = {
  name: string;
};
// エラー: Duplicate identifier 'UserType'.
// type UserType = { email: string; };

// interface では宣言のマージが可能
interface UserInterface {
  name: string;
}
interface UserInterface {
  email: string; // OK: マージされる
}

const user: UserInterface = {
  name: '田中',
  email: 'tanaka@example.com'
};
console.log(user.name);  // OK
console.log(user.email); // OK

function getUser(): { name: string } {
  return { name: '田中' };
}

const user = getUser();
// TS2339: Property 'age' does not exist on type '{ name: string; }'.
console.log(user.age);

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

function getUser(): User {
  return { name: '田中', age: 30 };
}

const user = getUser();
console.log(user.age); // OK: 30

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

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

type Animal = Dog | Cat;

function makeSound(animal: Animal) {
  // OK: kind は Dog と Cat の両方に存在
  console.log(animal.kind);

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

error TS2339: Property ‘bark’ does not exist on type ‘Animal’.
Property ‘bark’ does not exist on type ‘Cat’.

function processValue(value: string | number) {
  // TS2339: Property 'toUpperCase' does not exist on type 'string | number'.
  //   Property 'toUpperCase' does not exist on type 'number'.
  return value.toUpperCase();
}

error TS2339: Property ‘toUpperCase’ does not exist on type ‘string | number’.
Property ‘toUpperCase’ does not exist on type ‘number’.

function processValue(value: string | number) {
  if (typeof value === 'string') {
    // この中では value は string 型
    return value.toUpperCase(); // OK
  } else {
    // この中では value は number 型
    return value.toFixed(2); // OK
  }
}

ポイント：typeofで判別できるのは 'string', 'number', 'boolean', 'bigint', 'symbol', 'undefined', 'object', 'function' の8種類です。オブジェクト同士の区別には使えません。

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

function handleError(error: Error) {
  // TS2339: Property 'field' does not exist on type 'Error'.
  console.log(error.field);
}

error TS2339: Property ‘field’ does not exist on type ‘Error’.

function handleError(error: Error) {
  if (error instanceof ValidationError) {
    // この中では error は ValidationError 型
    console.log(error.field);   // OK
    console.log(error.message); // OK
  } else {
    // この中では error は Error 型
    console.log(error.message); // OK
  }
}

interface Dog {
  bark(): void;
}

interface Cat {
  meow(): void;
}

function makeSound(animal: Dog | Cat) {
  if ('bark' in animal) {
    // この中では animal は Dog 型
    animal.bark(); // OK
  } else {
    // この中では animal は Cat 型
    animal.meow(); // OK
  }
}

注意：in演算子のチェック対象は文字列リテラルでなければなりません。変数 in objの形では型の絞り込みが行われません。

interface SuccessResponse {
  status: 'success';
  data: { id: number; name: string };
}

interface ErrorResponse {
  status: 'error';
  errorCode: number;
  message: string;
}

type ApiResponse = SuccessResponse | ErrorResponse;

function handleResponse(response: ApiResponse) {
  switch (response.status) {
    case 'success':
      // この中では response は SuccessResponse 型
      console.log(response.data.name); // OK
      break;
    case 'error':
      // この中では response は ErrorResponse 型
      console.log(response.errorCode); // OK
      console.log(response.message);   // OK
      break;
  }
}

Discriminated Union の3つの条件

• 共通のプロパティ（判別子）がすべての型に存在する
• 判別子の値がリテラル型（'success'や'error'）である
• switch文やif文で判別子を比較することで、型が自動的に絞り込まれる

interface Fish {
  swim(): void;
}

interface Bird {
  fly(): void;
}

// カスタム型ガード関数
function isFish(animal: Fish | Bird): animal is Fish {
  return (animal as Fish).swim !== undefined;
}

function move(animal: Fish | Bird) {
  if (isFish(animal)) {
    // この中では animal は Fish 型
    animal.swim(); // OK
  } else {
    // この中では animal は Bird 型
    animal.fly(); // OK
  }
}

function getLength(value: string | null) {
  // value が null の可能性があるためエラー
  return value.length; // エラー!
}

function getLength(value: string | null) {
  if (value !== null) {
    return value.length; // OK: value は string 型
  }
  return 0;
}

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

const user: User = { name: '田中', age: 30, email: 'tanaka@example.com' };

// Object.keys() の戻り値は string[]
const keys = Object.keys(user); // string[] であり (keyof User)[] ではない

keys.forEach(key => {
  // TS7053: Element implicitly has an 'any' type because expression
  // of type 'string' can't be used to index type 'User'.
  console.log(user[key]); // エラー!
});

error TS7053: Element implicitly has an ‘any’ type because expression of type ‘string’ can’t be used to index type ‘User’.

const keys = Object.keys(user) as (keyof User)[];

keys.forEach(key => {
  console.log(user[key]); // OK: key は keyof User
});

// 型安全な Object.keys
function typedKeys<T extends object>(obj: T): (keyof T)[] {
  return Object.keys(obj) as (keyof T)[];
}

typedKeys(user).forEach(key => {
  console.log(user[key]); // OK
});

注意：keyofへのキャストは、オブジェクトが型定義通りのプロパティのみを持つことが確実な場合のみ安全です。外部から渡されたオブジェクトには使わないようにしましょう。

interface Theme {
  primary: string;
  secondary: string;
  background: string;
}

const theme: Theme = {
  primary: '#0284c7',
  secondary: '#6d28d9',
  background: '#ffffff'
};

// [string, string][] が返る（[keyof Theme, string][] ではない）
Object.entries(theme).forEach(([key, value]) => {
  // key は string 型なのでインデックスアクセスでエラー
  console.log(theme[key]); // エラー!
});

// 方法1: value を直接使う（推奨）
Object.entries(theme).forEach(([key, value]) => {
  console.log(key, value); // OK: key=string, value=string
});

// 方法2: キーをキャスト
(Object.entries(theme) as [keyof Theme, string][]).forEach(([key, value]) => {
  console.log(theme[key]); // OK
});

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

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

for (const key in config) {
  // key は string 型
  console.log(config[key]); // エラー!
}

for (const key in config) {
  const typedKey = key as keyof Config;
  console.log(config[typedKey]); // OK
}

ポイント：オブジェクトのイテレーションでは、for...inよりもObject.entries()を使い、分割代入で直接値を取得する方がスッキリ書けます。

interface BaseUser {
  name: string;
}

interface UserDetails {
  age: number;
  email: string;
}

function mergeUser(base: BaseUser, details: UserDetails) {
  const merged = { ...base, ...details };
  // OK: TypeScriptは正しく推論する
  console.log(merged.name);  // OK
  console.log(merged.age);   // OK
  console.log(merged.email); // OK
  return merged;
}

// ただし、戻り値の型を明示すると問題になることがある
function mergeUserTyped(base: BaseUser, details: UserDetails): BaseUser {
  const merged = { ...base, ...details };
  return merged; // OK（余剰プロパティは許可される）
}

const result = mergeUserTyped({ name: '田中' }, { age: 30, email: 'a@b.com' });
// TS2339: Property 'age' does not exist on type 'BaseUser'.
console.log(result.age); // エラー! 戻り値型が BaseUser なので

// 方法1: 交差型を使う
function mergeUser(base: BaseUser, details: UserDetails): BaseUser & UserDetails {
  return { ...base, ...details };
}

const result = mergeUser({ name: '田中' }, { age: 30, email: 'a@b.com' });
console.log(result.name);  // OK
console.log(result.age);   // OK
console.log(result.email); // OK

interface Translations {
  hello: string;
  goodbye: string;
  thanks: string;
}

const t: Translations = {
  hello: 'こんにちは',
  goodbye: 'さようなら',
  thanks: 'ありがとう'
};

function translate(key: string) {
  return t[key]; // エラー: string は Translations のインデックスに使えない
}

function translate(key: keyof Translations) {
  return t[key]; // OK: key は 'hello' | 'goodbye' | 'thanks'
}

translate('hello');   // OK: "こんにちは"
translate('goodbye'); // OK: "さようなら"
// translate('unknown'); // エラー: 'unknown' は割り当て不可

// Record型: 任意のキーに対応するオブジェクト
const cache: Record<string, unknown> = {};
cache['any-key'] = 'any-value'; // OK
cache.anotherKey = 42;             // OK

// インデックスシグネチャ: 同様の効果
interface FlexibleObject {
  id: number;            // 固定プロパティ
  [key: string]: unknown; // 任意のプロパティも許可
}

const obj: FlexibleObject = { id: 1 };
obj.customProp = 'value'; // OK
obj.anything = 42;        // OK

// querySelector の戻り値は Element | null
const input = document.querySelector('#email');

// TS2339: Property 'value' does not exist on type 'Element'.
console.log(input.value);

// TS2339: Property 'style' does not exist on type 'Element'.
input.style.color = 'red';

// TS2339: Property 'href' does not exist on type 'Element'.
const link = document.querySelector('a');
console.log(link.href);

error TS2339: Property ‘value’ does not exist on type ‘Element’.

// HTMLInputElement として取得
const input = document.querySelector<HTMLInputElement>('#email');
if (input) {
  console.log(input.value); // OK
}

// HTMLAnchorElement として取得
const link = document.querySelector<HTMLAnchorElement>('a.nav-link');
if (link) {
  console.log(link.href); // OK
}

const el = document.querySelector('#email');

if (el instanceof HTMLInputElement) {
  console.log(el.value); // OK
  el.disabled = true;  // OK
}

if (el instanceof HTMLSelectElement) {
  console.log(el.selectedIndex); // OK
}

// querySelectorAll は NodeListOf<Element> を返す
const elements = document.querySelectorAll('.card');

elements.forEach(el => {
  // TS2339: Property 'style' does not exist on type 'Element'.
  el.style.display = 'none'; // エラー!
});

// 解決: ジェネリクスで HTMLElement を指定
const cards = document.querySelectorAll<HTMLDivElement>('.card');

cards.forEach(el => {
  el.style.display = 'none'; // OK
});

// querySelectorAll → NodeList（forEach あり）
const nodeList = document.querySelectorAll('.item');
nodeList.forEach(el => { /* OK */ });

// getElementsByClassName → HTMLCollection（forEach なし！）
const collection = document.getElementsByClassName('item');
// TS2339: Property 'forEach' does not exist on type 'HTMLCollectionOf<Element>'.
collection.forEach(el => { }); // エラー!

// 解決: Array.from で配列に変換
Array.from(collection).forEach(el => {
  console.log(el.className); // OK
});

error TS2339: Property ‘forEach’ does not exist on type ‘HTMLCollectionOf<Element>’.

document.addEventListener('click', (event) => {
  // TS2339: Property 'value' does not exist on type 'EventTarget'.
  console.log(event.target.value);

  // TS2339: Property 'classList' does not exist on type 'EventTarget'.
  event.target.classList.add('active');
});

// 方法1: instanceof で絞り込み
document.addEventListener('click', (event) => {
  if (event.target instanceof HTMLInputElement) {
    console.log(event.target.value); // OK
  }
  if (event.target instanceof HTMLElement) {
    event.target.classList.add('active'); // OK
  }
});

// 方法2: event.currentTarget を使う（リスナーが設定された要素）
const btn = document.querySelector<HTMLButtonElement>('#submit');
btn?.addEventListener('click', (event) => {
  const button = event.currentTarget as HTMLButtonElement;
  button.disabled = true; // OK
});

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

const users: User[] = [
  { id: 1, name: '田中' },
  { id: 2, name: '佐藤' }
];

// find() の戻り値は User | undefined
const user = users.find(u => u.id === 1);

// エラー: user が undefined の可能性
console.log(user.name); // エラー!

// 解決方法
if (user) {
  console.log(user.name); // OK
}

// またはOptional chaining
console.log(user?.name); // OK: User が見つからなければ undefined

// Non-null assertion（確実に存在する場合のみ）
console.log(user!.name); // OK（ただし危険）

注意：Non-null assertion演算子（!）は「この値はnullでもundefinedでもない」とTypeScriptに伝えるものですが、実行時のチェックは行いません。使用は最小限にとどめ、if文やOptional chainingを優先しましょう。

class BankAccount {
  private balance: number;
  protected accountNumber: string;

  constructor(balance: number, accountNumber: string) {
    this.balance = balance;
    this.accountNumber = accountNumber;
  }
}

const account = new BankAccount(10000, '1234-5678');

// エラー: private プロパティにはアクセスできない
console.log(account.balance);       // エラー!
console.log(account.accountNumber); // エラー!

class BankAccount {
  private _balance: number;

  constructor(balance: number) {
    this._balance = balance;
  }

  // ゲッターで読み取り専用として公開
  get balance(): number {
    return this._balance;
  }
}

const account = new BankAccount(10000);
console.log(account.balance); // OK: 10000

class Timer {
  constructor() {
    // TS2339: Property 'intervalId' does not exist on type 'Timer'.
    this.intervalId = null; // エラー!
  }

  start() {
    // TS2339: Property 'intervalId' does not exist on type 'Timer'.
    this.intervalId = setInterval(() => {}, 1000);
  }
}

error TS2339: Property ‘intervalId’ does not exist on type ‘Timer’.

class Timer {
  private intervalId: ReturnType<typeof setInterval> | null = null;

  start() {
    this.intervalId = setInterval(() => {
      console.log('tick');
    }, 1000);
  }

  stop() {
    if (this.intervalId !== null) {
      clearInterval(this.intervalId);
      this.intervalId = null;
    }
  }
}

class DynamicConfig {
  setOption(key: string, value: unknown) {
    // TS2339 or TS7053: 動的プロパティ追加はできない
    this[key] = value; // エラー!
  }
}

// 方法1: Map を使う（推奨）
class DynamicConfig {
  private options = new Map<string, unknown>();

  setOption(key: string, value: unknown) {
    this.options.set(key, value); // OK
  }

  getOption(key: string): unknown {
    return this.options.get(key); // OK
  }
}

// 方法2: インデックスシグネチャを使う
class FlexibleConfig {
  [key: string]: unknown;

  setOption(key: string, value: unknown) {
    this[key] = value; // OK
  }
}

class Shape {
  color: string;
  constructor(color: string) {
    this.color = color;
  }
}

class Circle extends Shape {
  radius: number;
  constructor(color: string, radius: number) {
    super(color);
    this.radius = radius;
  }
}

function getArea(shape: Shape) {
  // TS2339: Property 'radius' does not exist on type 'Shape'.
  return Math.PI * shape.radius ** 2; // エラー!
}

error TS2339: Property ‘radius’ does not exist on type ‘Shape’.

// 方法1: instanceof で絞り込み
function getArea(shape: Shape): number {
  if (shape instanceof Circle) {
    return Math.PI * shape.radius ** 2; // OK
  }
  return 0;
}

// 方法2: 引数の型を具体的にする
function getCircleArea(circle: Circle): number {
  return Math.PI * circle.radius ** 2; // OK
}

interface ApiData {
  userId: number;
  title: string;
  completed: boolean;
}

// 方法1: 型アサーション（簡易的）
const data = JSON.parse(jsonString) as ApiData;
console.log(data.title); // OK

// 方法2: バリデーション関数（推奨）
function isApiData(data: unknown): data is ApiData {
  return (
    typeof data === 'object' &&
    data !== null &&
    'userId' in data &&
    'title' in data &&
    'completed' in data
  );
}

const parsed: unknown = JSON.parse(jsonString);
if (isApiData(parsed)) {
  console.log(parsed.title); // OK: 型安全
}

// strictモードでは response.json() が unknown を返す場合がある
async function fetchUser() {
  const response = await fetch('/api/user');
  const data = await response.json();

  // any型なら通るが、型安全ではない
  // unknown型なら TS2339 が発生
  console.log(data.name); // 型安全ではない
}

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

// 方法1: 型アサーション
async function fetchUser(): Promise<User> {
  const response = await fetch('/api/user');
  const data: User = await response.json();
  return data;
}

// 方法2: ジェネリックなfetchラッパー（推奨）
async function typedFetch<T>(url: string): Promise<T> {
  const response = await fetch(url);
  if (!response.ok) {
    throw new Error(`HTTP error! status: ${response.status}`);
  }
  return response.json() as Promise<T>;
}

// 使い方
const user = await typedFetch<User>('/api/user');
console.log(user.name);  // OK
console.log(user.email); // OK

// TS2339: Property 'gtag' does not exist on type 'Window & typeof globalThis'.
window.gtag('event', 'page_view');

// TS2339: Property 'myApp' does not exist on type 'Window & typeof globalThis'.
window.myApp = { version: '1.0.0' };

error TS2339: Property ‘gtag’ does not exist on type ‘Window & typeof globalThis’.

// global.d.ts（プロジェクトルートに配置）
declare global {
  interface Window {
    gtag: (...args: unknown[]) => void;
    myApp: {
      version: string;
    };
  }
}

export {}; // モジュールとして扱うために必要

window.gtag('event', 'page_view'); // OK
window.myApp = { version: '1.0.0' }; // OK

// global.d.ts

// CDNから読み込んだライブラリのグローバル変数
declare const _: typeof import('lodash');
declare const $: typeof import('jquery');

// 独自グローバル変数
declare const API_BASE_URL: string;
declare const IS_PRODUCTION: boolean;

# 型定義がないライブラリでエラーが出る場合
# まず @types パッケージがあるか確認
npm install --save-dev @types/lodash
npm install --save-dev @types/express
npm install --save-dev @types/node

# @types がない場合は、独自の型宣言ファイルを作成
# src/types/some-library.d.ts
declare module 'some-untyped-library' {
  export function doSomething(input: string): string;
  export default class SomeClass {
    constructor(options: Record<string, unknown>);
    run(): void;
  }
}

ポイント：TypeScriptの@typesパッケージはDefinitelyTypedリポジトリで管理されています。npm search @types/ライブラリ名で対応する型定義を検索できます。

// env.d.ts
declare namespace NodeJS {
  interface ProcessEnv {
    NODE_ENV: 'development' | 'production' | 'test';
    DATABASE_URL: string;
    API_KEY: string;
    PORT?: string;
  }
}

// 使用例
const dbUrl = process.env.DATABASE_URL; // string 型（undefinedなし）
const port = process.env.PORT;         // string | undefined

interface ButtonProps {
  label: string;
}

const Button = ({ label, onClick }: ButtonProps) => {
  // TS2339: Property 'onClick' does not exist on type 'ButtonProps'.
  return <button onClick={onClick}>{label}</button>;
};

error TS2339: Property ‘onClick’ does not exist on type ‘ButtonProps’.

interface ButtonProps {
  label: string;
  onClick: () => void;
  disabled?: boolean;
  variant?: 'primary' | 'secondary';
}

const Button = ({ label, onClick, disabled, variant = 'primary' }: ButtonProps) => {
  return (
    <button
      onClick={onClick}
      disabled={disabled}
      className={`btn btn-${variant}`}
    >
      {label}
    </button>
  );
};

const Form = () => {
  const handleChange = (e: React.ChangeEvent) => {
    // TS2339: Property 'value' does not exist on type 'EventTarget'.
    console.log(e.target.value);
  };

  return <input onChange={handleChange} />;
};

const Form = () => {
  // ChangeEvent にジェネリクスで要素の型を指定
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    console.log(e.target.value); // OK
  };

  const handleSelectChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
    console.log(e.target.value);         // OK
    console.log(e.target.selectedIndex); // OK
  };

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    // currentTarget は常に HTMLFormElement 型
    console.log(e.currentTarget.action); // OK
  };

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

const inputRef = useRef(null);

// TS2339: Property 'value' does not exist on type 'never'.
console.log(inputRef.current.value);

import { useRef } from 'react';

// DOM要素の ref
const inputRef = useRef<HTMLInputElement>(null);
const divRef = useRef<HTMLDivElement>(null);
const canvasRef = useRef<HTMLCanvasElement>(null);

// null チェックが必要
if (inputRef.current) {
  console.log(inputRef.current.value); // OK
  inputRef.current.focus();            // OK
}

// 値の保持用 ref（DOM以外）
const countRef = useRef<number>(0);
countRef.current += 1; // OK: number型

// 戻り値の型を明示的に定義
interface UseFormReturn<T> {
  values: T;
  errors: Partial<Record<keyof T, string>>;
  handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
  handleSubmit: (e: React.FormEvent) => void;
  isValid: boolean;
}

function useForm<T>(initialValues: T): UseFormReturn<T> {
  // 実装...
}

// 使用側: すべてのプロパティに安全にアクセスできる
const { values, errors, handleChange, handleSubmit, isValid } = useForm({
  email: '',
  password: ''
});

console.log(values.email);    // OK
console.log(values.password); // OK
console.log(isValid);          // OK

import { ref, reactive } from 'vue';

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

// ref: ジェネリクスで型を指定
const user = ref<User | null>(null);

// null チェックが必要
if (user.value) {
  console.log(user.value.name); // OK
}

// reactive: 型推論が効く
const state = reactive<{ users: User[]; loading: boolean }>({
  users: [],
  loading: false
});

state.users.push({ name: '田中', age: 30 }); // OK
state.loading = true; // OK

import { ref, onMounted } from 'vue';

// テンプレートref は InstanceType または HTMLElement で型付け
const inputEl = ref<HTMLInputElement | null>(null);

onMounted(() => {
  if (inputEl.value) {
    inputEl.value.focus();              // OK
    console.log(inputEl.value.value); // OK
  }
});

// ベースの型
interface BaseUser {
  id: number;
  name: string;
}

// 拡張（新しいプロパティを追加）
interface DetailedUser extends BaseUser {
  email: string;
  role: 'admin' | 'user';
}

// 複数のインターフェースを同時に拡張
interface Timestamped {
  createdAt: Date;
  updatedAt: Date;
}

interface FullUser extends DetailedUser, Timestamped {
  lastLogin: Date;
}

// FullUser は id, name, email, role, createdAt, updatedAt, lastLogin を持つ
const user: FullUser = {
  id: 1,
  name: '田中',
  email: 'tanaka@example.com',
  role: 'admin',
  createdAt: new Date(),
  updatedAt: new Date(),
  lastLogin: new Date()
};

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

// オブジェクトにプロパティが存在するかチェックする型ガード
function hasProperty<T extends object, K extends string>(
  obj: T,
  key: K
): obj is T & Record<K, unknown> {
  return key in obj;
}

// 使用例
const data: unknown = JSON.parse('{"name": "田中"}');

if (
  typeof data === 'object' &&
  data !== null &&
  hasProperty(data, 'name')
) {
  console.log(data.name); // OK: unknown 型
}

// Record型: すべてのキーが同じ値型
const scores: Record<string, number> = {};
scores['math'] = 90;    // OK
scores['english'] = 85; // OK
scores.science = 95;     // OK

// Record型: キーを制限する
type Subject = 'math' | 'english' | 'science';
const limitedScores: Record<Subject, number> = {
  math: 90,
  english: 85,
  science: 95
};

// インデックスシグネチャ: 固定プロパティ + 動的プロパティ
interface CacheStore {
  version: number;           // 固定（常に存在）
  [key: string]: unknown;    // 動的（任意のキー）
}

interface User {
  name: string;
}

const user: User = { name: '田中' };

// TS2339: Property 'email' does not exist on type 'User'.
console.log(user?.email); // ?. を使ってもエラーは出る

// Optional chaining が有効なのは null/undefined の可能性がある場合
const maybeUser: User | null = null;
console.log(maybeUser?.name); // OK: null の場合は undefined を返す

注意：?.（Optional chaining）は「値がnullかundefinedならundefinedを返す」演算子です。「型にないプロパティへのアクセスを許可する」ものではありません。TS2339を解決するには、型定義自体を修正する必要があります。

// NG: 根拠のないアサーション（危険）
const data = {} as { name: string; age: number };
console.log(data.name.toUpperCase()); // コンパイルは通るが実行時エラー!

// OK: DOMのジェネリクスの代わりに使う
const input = document.getElementById('email') as HTMLInputElement;

// OK: APIレスポンスの型を指定（バリデーション済みの場合）
const response = await fetch('/api/user');
const user = (await response.json()) as User;

// OK: Object.keys のキャスト
const keys = Object.keys(obj) as (keyof typeof obj)[];

注意：// @ts-ignoreやas anyはTS2339を「黙らせる」ことはできますが、型安全性を失います。これらはあくまで一時的な回避策であり、本番コードには残さないようにしましょう。

error TS2339: Property ‘data’ does not exist on type ‘{}’.

// NG: 型なし
const response = await fetch('/api/users');
const result = await response.json();
console.log(result.data); // any型 or エラー

// OK: レスポンス型を定義
interface ApiResponse<T> {
  data: T;
  message: string;
  status: number;
}

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

const result = await typedFetch<ApiResponse<User[]>>('/api/users');
console.log(result.data);     // OK: User[]
console.log(result.message);  // OK: string

error TS2339: Property ‘dataLayer’ does not exist on type ‘Window & typeof globalThis’.

// global.d.ts に以下を追加
declare global {
  interface Window {
    dataLayer: Record<string, unknown>[];
    gtag: (...args: unknown[]) => void;
  }
}
export {};

// これで window.dataLayer にアクセス可能
window.dataLayer.push({ event: 'pageview' }); // OK

error TS2339: Property ‘value’ does not exist on type ‘Element’.

// パターンA: ジェネリクスで型指定（最もシンプル）
const input = document.querySelector<HTMLInputElement>('input[name="email"]');
if (input) input.value = 'test@example.com';

// パターンB: getElementById + as（IDセレクタの場合）
const form = document.getElementById('myForm') as HTMLFormElement | null;
if (form) form.submit();

error TS7053: Element implicitly has an ‘any’ type because expression of type ‘string’ can’t be used to index type ‘Config’.

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

const config: Config = { host: 'localhost', port: 3000, debug: true };

// 推奨: Object.entries で値を直接取得
Object.entries(config).forEach(([key, value]) => {
  console.log(`${key}: ${value}`); // OK
});

// 方法1: 型アサーション + 戻り値型の明示
interface Settings {
  theme: 'light' | 'dark';
  fontSize: number;
}

function loadSettings(): Settings {
  const raw = localStorage.getItem('settings');
  if (!raw) return { theme: 'light', fontSize: 14 };
  return JSON.parse(raw) as Settings;
}

const settings = loadSettings();
console.log(settings.theme);    // OK
console.log(settings.fontSize); // OK

error TS2339: Property ‘value’ does not exist on type ‘EventTarget’.

// Vanilla JS
document.querySelector('input')?.addEventListener('input', (e) => {
  const target = e.target as HTMLInputElement;
  console.log(target.value); // OK
});

// React
const handleInput = (e: React.ChangeEvent<HTMLInputElement>) => {
  console.log(e.target.value); // OK
};

# 型定義だけ更新されている可能性をチェック
npm ls @types/react

# ライブラリのCHANGELOGやMigration Guideを確認
# プロパティ名の変更やAPIの廃止が原因のことが多い

# 型定義を最新に更新
npm update @types/react @types/react-dom

// process.env.XXX は string | undefined
const port = process.env.PORT;

// undefined の可能性があるので、デフォルト値を設定
const port = process.env.PORT ?? '3000';
const portNum = parseInt(port, 10); // OK

// 必須の環境変数をチェックする関数
function getRequiredEnv(key: string): string {
  const value = process.env[key];
  if (!value) {
    throw new Error(`環境変数 ${key} が設定されていません`);
  }
  return value;
}

const dbUrl = getRequiredEnv('DATABASE_URL'); // string型が保証される

// Map: get() は V | undefined を返す
const userMap = new Map<number, User>();
userMap.set(1, { id: 1, name: '田中' });

const user = userMap.get(1); // User | undefined

// undefined チェックが必要
if (user) {
  console.log(user.name); // OK
}

// Set: has() で存在チェック、forEach で反復
const idSet = new Set<number>([1, 2, 3]);
idSet.has(1); // true
idSet.forEach(id => console.log(id)); // OK: number型

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

const user: User = { name: '田中' };

// NG: コールバック内では型の絞り込みが効かない
if (user.address) {
  setTimeout(() => {
    // user.address が undefined に変更される可能性があるため
    // コールバック内では絞り込みが効かないことがある
    console.log(user.address.city); // エラーの場合あり
  }, 1000);
}

// OK: ローカル変数に代入して使う
const address = user.address;
if (address) {
  setTimeout(() => {
    console.log(address.city); // OK: ローカル変数は変更されない
  }, 1000);
}

TS2339 解決のポイントまとめ

• 根本原因は3パターン: プロパティが本当にない、型が広すぎる、型が不明
• 最も多い原因はタイポ: エディタの補完機能を活用して防ぐ
• ユニオン型は絞り込みが必須: typeof / instanceof / in / Discriminated Union を使う
• Object.keys() は string[] を返す: keyof キャストまたは Object.entries() を使う
• DOM操作はジェネリクスで型指定: querySelector<HTMLInputElement>
• window のカスタムプロパティは global.d.ts で Window インターフェースを拡張
• 型アサーション（as）は最後の手段: まず型定義の修正や型ガードを検討する
• @ts-ignore は使わない: 根本的な解決にならず、バグの温床になる

関連記事

• TypeScript 型の書き方 完全入門 – 型の基礎から応用まで
• TypeScript クラスの型定義 完全ガイド – クラスと型の関係
• TypeScript よくあるエラーと解決方法 – エラー対処の全体像
• TypeScript 型の絞り込み 完全ガイド – Type Guard の詳細
• TypeScript TS2322の原因と解決方法 – 代入エラーの全パターン