การทำให้ชนิดข้อมูลแคบลง: typeof, instanceof และยูเนียนแบบจำแนก

การทำให้ชนิดข้อมูลแคบลงคืออะไร

การทำให้ชนิดข้อมูลแคบลงด้วย typeof

function format(value: string | number | boolean): string {
  if (typeof value === 'string') {
    return value.toUpperCase(); // string here
  }
  if (typeof value === 'number') {
    return value.toFixed(2);   // number here
  }
  return String(value);        // boolean here
}

การทำให้ชนิดข้อมูลแคบลงด้วย instanceof

function processError(err: unknown) {
  if (err instanceof Error) {
    console.error(err.message); // Error methods available
  } else if (err instanceof Response) {
    console.error('HTTP error:', err.status);
  } else {
    console.error('Unknown:', err);
  }
}

การทำให้ชนิดข้อมูลแคบลงด้วยค่าความจริง

function printLength(value: string | null | undefined) {
  if (value) {
    console.log(value.length); // string here (null/undefined filtered)
  }
}

การทำให้ชนิดข้อมูลแคบลงด้วยการเปรียบเทียบความเท่ากัน

function handle(action: 'submit' | 'cancel' | 'reset') {
  if (action === 'submit') {
    // action is exactly 'submit'
    doSubmit();
  }
}

การทำให้ชนิดข้อมูลแคบลงด้วยตัวดำเนินการ in

interface Cat { meow(): void; }
interface Dog { bark(): void; }

function speak(animal: Cat | Dog) {
  if ('meow' in animal) {
    animal.meow(); // Cat
  } else {
    animal.bark(); // Dog
  }
}

ยูเนียนแบบแยกแยะ — การทำให้ชนิดข้อมูลแคบลงตามแท็ก

type LoadingState = { status: 'loading' };
type SuccessState = { status: 'success'; data: User[] };
type ErrorState   = { status: 'error'; message: string };
type State = LoadingState | SuccessState | ErrorState;

function render(state: State) {
  switch (state.status) {
    case 'loading': return '<Spinner />';
    case 'success': return renderUsers(state.data);  // state.data available
    case 'error':   return renderError(state.message);
  }
}

เพรดิเคตชนิดข้อมูล — ตัวตรวจสอบชนิดข้อมูลแบบกำหนดเอง

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

const data: unknown = await fetchJson('/api/me');
if (isUser(data)) {
  console.log(data.name); // typed as User
}

ฟังก์ชันยืนยัน

function assertIsString(val: unknown): asserts val is string {
  if (typeof val !== 'string') throw new Error('Expected string');
}

const val: unknown = getInput();
assertIsString(val);
console.log(val.toUpperCase()); // val is string here

การตรวจสอบความครบถ้วนทุกกรณี

function render(state: State): string {
  switch (state.status) {
    case 'loading': return '...';
    case 'success': return state.data.length.toString();
    case 'error':   return state.message;
    default:
      const _exhaustive: never = state;
      throw new Error('Unhandled state: ' + _exhaustive);
  }
}

การทำให้ชนิดข้อมูลแคบลงด้วย Array.isArray

function processInput(input: string | string[]) {
  if (Array.isArray(input)) {
    return input.join(', '); // string[]
  }
  return input.toUpperCase(); // string
}

ตรวจสอบอย่างรวดเร็ว

สรุป: การทำให้ชนิดข้อมูลแคบลงใน TypeScript