[TypeScript] union 타입 | any 타입 | unknown 타입

이진경·2023년 2월 22일
0

🌐 TypeScript

목록 보기
4/10
post-thumbnail

✅ 타입을 미리 정하기 애매할 때

1️⃣ union type

변수 안에 값의 타입이 여러개 올 수 있다면 | 연산자를 사용하여 타입을 지정한다.
or 연산자 같은 느낌인데 이런 타입을 union type이라고 부른다.

  let name: string | number = 'jinkyung' ;
  let name: string | number = '325' ;
  let name: string | number = true ; 😡

위처럼 할당하는 순간 타입은 string 또는 number 중 하나로 변하고 두 타입만 타입으로 지정 가능하다.

💡 union type에서의 연산

let age: string | number

age + 1 ; 😡

자바스크립트에서는 문자에서도 +1이 가능하고 숫자에서도 +1이 가능하지만 위의 코드에서 오류가 난다. 그 이유는 타입스크립트는 굉장히 엄격하기때문에 변수의 타입이 확실해야 연산을 수행해준다.

  • string type + 1 (허용)
  • number type + 1 (허용)
  • string | number type + 1 (안돼 돌아가 😡)

⭐️ 변수 ? :number는 사실상 변수 : number | undefined와 같은 의미이다.

👉 array나 object에서 union type를 사용할때

::array

    let member: (string | number)[] = [1, '2', 3];
    let member1: string | number[] = [1, '2', 3]; 😡

배열에서 사용할때는 꼭 소괄호로 union type을 묶어줘야된다. 그렇지 않으면 위에 예시를 봤을때 string타입 또는 number타입의 배열만 입력 가능하다는 의미가 되기때문이다.

::object

    let object: {a: string | number} = {a: 123};

object에서는 일반적으로 |을 사용해서 union type을 사용하면 된다.

:: 예시문제

    let 학교: 
    {score: (boolean | number)[]; 
    teacher: string; 
    friend: string | string[]} = {
        score: [100, 97, 84],
        teacher: 'Phil',
        friend: 'John',
    };

    학교.score[4] = false;
    학교.friend = ['Lee', 학교.teacher];
  • score에서는 배열 안에 boolean도 들어가기때문에 (boolean | number)[]으로 지정해줬다.
  • friend에서는 'John'이라는 string도 들어가지만 ['Lee', 학교.teacher]이라는 string 타입의 배열도 들어가기때문에 string | string[]으로 지정해줬다.

2️⃣ any type

any타입은 모든 자료형을 다 허용해준다. 그치만 any를 사용하면 타입스크립트를 사용하는 의미가 없고, 타입관련 버그가 나도 잡아주지 않는다. 그래서 사용을 지양하는 것이 낫다.

any타입을 사용할때는 타입실드 해제문법이라고 생각하면 되고 일반 자바스크립트 변수처럼 만들고 싶을때 사용하면 된다.

let name :any;
name = 'jinkyung' ; 😙 -> string type
name = [] ; 😙 -> array type

3️⃣ unknown type

any type과 비슷하게 모든 자료형을 허용해준다. 유연한 변수를 만들고 싶을 때 주로 사용하고, any type 보다 안전하다.

unknown 타입에 모든 자료를 다 집어 넣어도 그대로 unknown type을 유지하기때문 unknown type을 다른 곳에 넣으려고 하면 에러가 발생한다 (any type은 그렇지 않음)

let name :unknown;
name = 'jinkyung' ; 😙 -> unknown type
name = 12345 ; 😙 -> unknown type

unknown type에서의 연산

위에 union tyoe에서 설명한 것처럼 타입스크립트는 엄격한걸 좋아해서 숫자 unknown type에서는 연산을 해주지 않는다.

profile
멋찐 프론트엔드 개발자가 되자!

0개의 댓글