4) 타입스크립트의 타입들2

TypeScript만의 고유 자료형과 기타 사용방법들에 대해 기술한 페이지

Intro

TypeScript를 사용하다 보면 변수의 타입을 명확히 알 수 없는 상황이 있습니다. 예를 들어, 외부 API로부터 데이터를 받아 오려는데 API 명세가 아직 완성되지 않은 경우입니다. 이런 상황에서 사용할 수 있는 타입 지정 방식에는 다음과 같은 것들이 있습니다

1. 모든 타입을 허용하는 any타입 사용하기

2. 어떤 타입이든 저장 가능하지만 안전성을 유지하는 unknown타입 사용하기

3. 가능한 타입들을 나열하여 묶는 Union타입 사용하기

---

1. Any Type

any 타입은 TypeScript에서 가장 유연한 타입으로, 어떤 값도 저장할 수 있습니다. 이는 JavaScript 코드와의 호환성 및 마이그레이션을 돕기 위해 도입되었습니다.

단, any 타입을 사용하면 타입스크립트의 정적 타입 검사 기능이 무력화됩니다. 따라서 any 타입을 쓰면 타입스크립트를 사용하는 의미가 없다고 볼 수 있으므로 되도록 any타입은 사용하지 않는게 좋습니다.

---

2.Unknown Type

unknown 타입도 any타입처럼 어떤 값이든 할당할 수 있는 최상위 타입입니다. 그럼 any나 unknown이나 비슷해 보이는데 차이점이 뭘까요?

any는 타입스크립트의 타입체크기능을 우회하도록 설계되었지만, unknown 타입은 any처럼 모든 값을 받을 수 있지만, 다른 타입에 대입하려고 하면 타입 검사를 거치지 않으면 오류가 발생합니다. 이는 타입 안정성을 유지하기 위한 장치이며, any보다 훨씬 안전한 타입입니다.

따라서 타입의 자료형이 정해지지 않은 경우 unknown타입을 사용하는 것이 가장 적절한 방법입니다.

---

3. Union Type(type | type)

Union 타입은 여러 개의 타입을 | 연산자를 통해 하나로 묶을 수 있는 기능입니다. 예를 들어, string | number는 해당 변수에 문자열 또는 숫자 중 하나의 값만 허용합니다.

let value: string | number;

value = "hello"; // 문자열 → OK
value = 42;      // 숫자 → OK
value = true;    // ❌ boolean은 허용되지 않음

---

4. Literal Type

• 값(Literal) 자체를 타입으로 사용하는 타입

• 여러 값들을 하나의 타입으로 묶은 집합형태로 타입을 관리한다.

let direction:'left'|'right'|'top'|'bottom'; // direction은 상,하,좌,우 값만 가질 수 있음

5. as const

• 객체나 배열에 저장된 값을 리터럴 타입으로 고정시켜 타입 안정성을 확보할 수 있게 도와주는 기능

• 일반적으로 TypeScript의 컴파일러는 객체 및 배열의 데이터의 타입추론시 일반적인 타입으로 추론한다.

  • const obj = {name : 'mkm', gender: 'M'} // obj :{name:string , gender:string}

• 하지만, gender에 들어가는 타입이 항상 M, F여야 한다면 컴파일러의 타입추론에 맡겨선 안된다.

  • const obj = {name : 'mkm', gender: 'M'} as const   // obj : {name:'mkm',gender:'F'}