ProgrammingLanguageTypeScript

[TypeScript] typeof, instanceof, literal로 타입 보호하기

, , , , ,

타입을 보호하는 기술을 익혀 코드의 견고성을 강화하는 여정을 시작하겠습니다. typeof, instanceof, literal을 사용하면 정확한 타입을 적용하고 타입스크립트 프로젝트 초기에 잠재적인 오류를 잡아낼 수 있는 힘을 얻을 수 있습니다. 이러한 기술을 자세히 살펴보면서 의도하지 않은 동작으로부터 코드를 강화하고 더 높은 수준의 유형 안전을 달성하는 방법을 알아보세요.

typeof

typeof 연산자를 사용하면 값이나 변수의 유형을 확인할 수 있습니다. 타입 가드에서 타입을 좁히기 위해 자주 사용됩니다.

1
2
3
4
5
6
7
8
9
function logMessage(message: string | number) {
  if (typeof message === 'string') {
    // 이 블록 내에서 TypeScript는 'message'가 'string' 유형임을 알고 있습니다.
    console.log(message.toUpperCase());
  } else {
    // 이 블록 안에서, 타입스크립트는 'message'의 타입이 'number'라는 것을 알고 있습니다.
    console.log(message.toFixed(2));
  }
}

instanceof

instanceof 연산자는 객체가 특정 클래스 또는 생성자 함수의 인스턴스인지 여부를 확인합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
class Dog {
  bark() {
    console.log('Woof!');
  }
}

class Cat {
  meow() {
    console.log('Meow!');
  }
}

function petSound(animal: Dog | Cat) {
  if (animal instanceof Dog) {
    // 이 블록 안에서, 타입스크립트는 'animal'이 'Dog' 타입임을 알고 있습니다.
    animal.bark();
  } else {
    // 이 블록 안에서, 타입스크립트는 'animal'이 'Cat' 타입임을 알고 있습니다.
    animal.meow();
  }
}

Literal Types

TypeScript의 Literal 타입을 사용하면 변수의 정확한 값을 지정할 수 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function handleStatus(status: 'success' | 'error' | 'pending') {
  // 'status'는 리터럴 타입 'success', 'error' 또는 'pending'으로 좁혀집니다.
  switch (status) {
    case 'success':
      console.log('Operation succeeded!');
      break;
    case 'error':
      console.log('An error occurred.');
      break;
    case 'pending':
      console.log('Operation is pending.');
      break;
  }
}

이 예제에서 status 매개변수는 지정된 리터럴 값 중 하나만 가질 수 있습니다.

마무리

이러한 기술을 사용하면 TypeScript가 조건부 블록 내에서 보다 구체적인 유형을 이해하고 적용하여 코드의 유형 안전성을 향상시킬 수 있습니다.

Share