【TypeScript】オプショナルチェーン(?.)でnullチェックをすっきり書く方法

TypeError: Cannot read property 'address' of undefined

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

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

// オプショナルチェーンを使用しない場合
const street1 = user.address ? user.address.street : undefined;

// オプショナルチェーンを使用する場合
const street2 = user?.address?.street;  // undefined

interface User {
  name: string;
  getMessage?: () => string;
}

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

// オプショナルチェーンを使用しない場合
const message1 = user.getMessage ? user.getMessage() : undefined;

// オプショナルチェーンを使用する場合
const message2 = user?.getMessage?.();  // undefined

const users: User[] = [];

// オプショナルチェーンを使用しない場合
const firstName1 = users && users[0] ? users[0].name : undefined;

// オプショナルチェーンを使用する場合
const firstName2 = users?.[0]?.name;  // undefined

interface ApiResponse {
  data?: {
    user?: {
      profile?: {
        email?: string;
      };
    };
  };
}

async function getUserEmail(id: string): Promise<string | undefined> {
  const response: ApiResponse = await fetchUserData(id);

  // オプショナルチェーンを使用することで、安全にデータにアクセスできます
  return response?.data?.user?.profile?.email;
}

interface FormEvent {
  target?: {
    elements?: {
      [key: string]: {
        value?: string;
      };
    };
  };
}

function handleSubmit(event: FormEvent) {
  // フォームの入力値を安全に取得
  const email = event?.target?.elements?.email?.value;
  const password = event?.target?.elements?.password?.value;

  // 処理の続き...
}

interface State {
  auth?: {
    user?: {
      settings?: {
        theme?: string;
      };
    };
  };
}

function getTheme(state: State): string {
  // デフォルト値との組み合わせ
  return state?.auth?.user?.settings?.theme ?? 'light';
}

interface User {
  name: string;
  settings?: {
    theme?: string;
    language?: string;
  };
}

const user: User = {
  name: '山田花子'
};

// デフォルト値の設定
const theme = user?.settings?.theme ?? 'light';
const language = user?.settings?.language ?? 'ja';

interface Order {
  items?: {
    product?: {
      price?: number;
    };
  }[];
}

function calculateTotal(order: Order): number {
  if (!order?.items?.length) {
    return 0;
  }

  return order.items.reduce((total, item) => {
    return total + (item?.product?.price ?? 0);
  }, 0);
}

interface User {
  id: string;
  profile?: {
    email?: string;
  };
}

function isValidEmail(email: unknown): email is string {
  return typeof email === 'string' && email.includes('@');
}

function processUserEmail(user: User): string {
  const email = user?.profile?.email;

  if (!email || !isValidEmail(email)) {
    throw new Error('有効なメールアドレスが必要です');
  }

  return email;
}

// 多くのチェックが必要
const value = obj?.prop1?.prop2?.prop3?.prop4?.prop5;

// 型ガードを使用して一度チェックする方が効率的な場合も
if (obj && 'prop1' in obj) {
  const value = obj.prop1.prop2.prop3.prop4.prop5;
}

// 避けるべき例
const value = obj?.prop1?.prop2?.method?.()?.result?.value;

// より良い例
if (!obj?.prop1?.prop2) {
  return;
}

const result = obj.prop1.prop2.method();
const value = result?.value;

{
  'compilerOptions': {
    'target': 'ES2020',  // ES2020以上を推奨
    'strict': true
  }
}