행복을 담는 블로그

[Typescript] Typescript의 any, unknown 그리고 union 본문

FrontEnd/Typescript

[Typescript] Typescript의 any, unknown 그리고 union

hyun0zin 2024. 3. 6. 19:46

any, unknown, union 타입

1. any 타입

: typescript에서 어떤 타입의 값이든 다 저장할 수 있는 슈퍼 타입
object 타입과 같은 최상위 타입이라고 생각할 수 있다.

ex)

let anything: any;
anything = 5; // 숫자 타입으로 초기 설정
anything = 'Hello'; // 문자열 가능
anything = { id: 1, name: 'John' }; // JSON 형태로 가능

🧐 any를 typescript에서 써도 되나요?

  • typescript를 사용하는 이유는 프로그램의 타입 안정성을 확보하기 위함!
  • 근데 any 타입을 사용하면, 타입을 지정하는 것이 아니기 때문에 코드 안정성과 유지 보수성을 저해할 수 있다..!

▶️ 가급적이면 사용하지 말 것!


2. unknown 타입

: any 타입과 비슷한 역할을 하지만, 더 안전한 방식으로 동작하는 타입
unknown 타입의 변수에도 모든 타입의 값을 저장할 수 있다!

🔥 하지만, 해당 값을 다른 타입의 변수에 할당하기 위해서는 명시적으로 타입을 확인해야 한다!

ex)

let unknownValue: unknown = '나는 문자열이지롱!';
console.log(unknownValue); // 나는 문자열이지롱!

let stringValue: string;
stringValue = unknownValue; // 에러 발생! unknownValue가 string임이 보장이 안되기 때문!
stringValue = unknownValue as string;
console.log(stringValue); // 나는 문자열이지롱!

📌 Type Assertion(타입 단언)
: unknown 타입의 변수를 다른 곳에 사용하기 위해서, type assertion을 통해 해당 타입을 지정해준다!

   stringValue = unknownValue as string;


하지만, 이런 unknown 타입 또한 재할당이 일어나지 않으면, 타입 안정성이 보장되지 않는다!
이를 보완하기 위해 union 타입을 사용한다.


3. union 타입

: 여러 타입 중에서 하나를 가질 수 있는 변수를 선언할 때 사용된다!

| 연산자를 사용하여 여러 타입을 결합하여 표현한다!

ex)

// 즉, string 또는 number 타입이 가능하다는 얘기!
type StringOrNumber = string | number; // 원한다면 | boolean 이런식으로 타입 추가가 가능!

function processValue(value: StringOrNumber) {
  if (typeof value === 'string') {
    // value는 여기서 string 타입으로 간주된다.
    console.log('String value:', value);
  } else if (typeof value === 'number') {
    // value는 여기서 number 타입으로 간주!
    console.log('Number value:', value);
  }
}

processValue('Hello');
processValue(42);

🚨 Typescript를 사용하면서 명심 해야할 것!

  • 여러 타입을 하나의 변수로 해결하겠다는 생각을 지양할 것.
  • 명확한 타입이 결정되었을 때, 코드의 안정성을 높이고, 유지 보수성이 좋아진다!

'FrontEnd > Typescript' 카테고리의 다른 글

[Typescript] enum v.s. object literal 비교하기  (0) 2024.03.06
[Typescript] Typescript의 기본 타입  (1) 2024.03.06