답변.

질문의 역사

JavaScript에서 typeof 연산자는 실행 중 원시 값의 타입을 확인하는 데 사용됩니다. TypeScript는 이 메커니즘을 확장하고 타입 가드를 통해 타입 축소(type narrowing) 시스템의 일부로 만듭니다. TypeScript는 코드 블록 내에서 변수의 타입을 명확하게 하기 위해 typeof 연산자의 결과를 사용하며, 특히 유니온 타입(union types) 작업 시 함수의 동작을 더 정확하게 설명할 수 있게 됩니다.

문제

일반 JavaScript는 typeof를 사용하여 값의 타입을 확인한 후에는 어떤 타입 보장이 존재하지 않기 때문에 프로그래머는 코드의 특정 구역에서 어떤 일이 일어나는지를 기억해야 합니다. 그러나 TypeScript의 경우 다양한 타입과 유니온 타입이 존재하기 때문에, 올바른 타입 축소 없이 쉽게 실수를 할 수 있으며, 예를 들어 존재하지 않는 메서드에 접근하는 경우가 있습니다. 또한 이 연산자에는 특정 제약 사항이 있습니다. 예를 들어, 배열이나 객체에 대해 'object'를 반환합니다.

해결책

TypeScript는 typeof 연산자를 자체 타입 분석과 결합하여 코드 블록 내에서 변수의 타입을 축소할 수 있게 합니다. 이것은 안전성을 자동으로 증가시키며, 컴파일러는 코드가 어떤 타입으로 작업하는지 알고 잠재적인 속성과 메서드를 제안합니다.

코드 예:

function printId(id: number | string) {
  if (typeof id === 'string') {
    // 이 블록에서 id: string
    console.log(id.toUpperCase());
  } else {
    // 이 블록에서 id: number
    console.log(id.toFixed(2));
  }
}

주요 특징:

• 원시 타입에 대해서만 작동: 'string', 'number', 'boolean', 'symbol', 'undefined', 'object', 'function', 'bigint'.
• TypeScript는 코드 블록 내에서 유니온 타입을 특정 원시 타입으로 축소하는 데 도움을 줍니다.
• 배열과 객체를 구분하지 않으며 항상 'object'를 반환합니다.

트릭 질문.

typeof 연산자가 배열을 구분할 수 있나요?

아니요, 배열과 객체에 대해 typeof는 동일한 값을 반환합니다 — 'object'. 배열을 구별하려면 Array.isArray() 메서드를 사용하는 것이 좋습니다.

코드 예:

const arr = [1, 2, 3];
console.log(typeof arr); // 'object'
console.log(Array.isArray(arr)); // true

typeof를 사용하여 null과 객체를 구분할 수 있나요?

아니요, typeof null은 'object'를 반환하며, 이는 JavaScript의 역사적 특징입니다.

코드 예:

console.log(typeof null); // 'object'

typeof로 사용자 정의 클래스를 확인할 수 있나요?

아니요, 클래스 인스턴스의 경우 typeof 역시 'object'를 반환합니다. 이를 위해서는 instanceof 연산자나 사용자 정의 타입 가드 기능을 사용해야 합니다.

코드 예:

class User {}
const u = new User();
console.log(typeof u); // 'object'
console.log(u instanceof User); // true

타입 오류 및 안티패턴

• 복잡한 데이터 구조(예: 배열, null, 객체)에 대해 typeof를 사용하는 것.
• 보다 정확한 타입 축소를 위해 instanceof 및 Array.isArray() 연산자의 사용을 소홀히 하는 것.
• 정적 검사를 무시하고 런타임 수준에서만 타입을 확인하는 것.

실생활 사례

부정적 케이스

프로그래머가 typeof를 통해 value가 배열인지 확인하고 그 결과에 따라 다른 메서드를 호출하려는 함수를 작성했습니다.

장점:

• 코드가 간단하게 작성되었습니다.
• 추가 함수가 필요하지 않습니다.

단점:

• 배열을 전달할 경우 함수가 깨지며: 배열이 객체로 인식되어 런타임 오류가 발생합니다.

긍정적 케이스

Array.isArray 사용 및 타입 가드와의 조합.

장점:

• 안전한 정적 타입 지정.
• 객체와 배열 간의 타입 오류 없음.

단점:

• 다양한 타입 가드 도구를 기억해야 합니다.