Union Type

• 2개 이상의 type을 합쳐 새로운 type을 만든다

✅ 아래의 코드를 숫자 or 문자가 가능한 array/object 로 지정해보시오.

let member :number[] = [1,'2',3];
let object :{a:string} = {a:'123'}

💻My Code

let member: (number | string)[] = [1, "2", 3];
let object: { a: string | number } = { a: "123" };

Any

• 타입을 지정하기 애매할 때 사용한다.
• 모든 자료형을 허용해준다. typescript 타입 실드 해제 문법이다.(js 처럼 사용 가능)
• 하지만 any를 너무 많이 사용하게 되면 js 보다 못하다는 단점이 있다.(대표적으로는 타입 관련 에러를 잡아내지 못한다는 단점이 존재)

let str: any = 'hi'
let num: any = 10;
let arr: any = ['a',2, true];

let name: any;
name = 123;
name = {};

unknown

• any와 마찬가지로 타입을 지정하기 애매할 때 사용하고, 모든 자료형을 허용해준다.

let name: unknown;
name = 123;
name ={};

Any vs Unknow

• unknown은 any보다 안전하다. 왜냐하면 unknown은 type shield가 발동하기 때문이다.

let name1:string = name; // error. name1은 string만 가능하다. type shield가 발동하기 떄문.

• unknown타입은 단어의 뜻과 동일하게 ‘알 수 없다, 모른다’라는 의미를 가진다. unknown 타입은 any 타입과 동일하게 모든 값을 허용하지만, 할당된 값이 어떤 타입인지 모르기 때문에 함부로 프로퍼티나 연산을 할 수 없다.

  let name: unknown;
  name - 1 //error. unknown은 number type이 아님. 

type script의 엄격함(연산)

• 같은 type일 경우에만 연산이 가능하다.

let name : string | number;
name +1; // error

let name1 :unknown =1;
name -1; // error

🚨위의 예를 보면 name의 type이 string or number로 타입이 맞는데 왜 에러가 날까?

타입스크립트는 앞서 말했던대로 매우 엄격하다📐

변수 name의 타입은 string 혹은 number인 것이 아니라, string | number라는 또 다른 type을 만들어 낸것이다 (custom hook처럼?)

물론 string | number 타입일 때 string 혹은 number 타입이 허용되는것은 맞다.

또한 +연산자는 string, number type에서 모두 가능하므로 error가 발생하지 않을것 같다.


하지만 변수의 type이 string인지 number인지 확실히 정해지지 않은 상황에서 +1을 하니 error가 발생되는 것이다. 이 부분에서 새삼 엄격하다고 느꼈다...🤣

js에서는 "문자" + 숫자일 경우 문자 type이 되지만 TypeScript에서는 "문자" +숫자가 된다.

name1은 unknown 타입이기 때문에 error가 발생한다.

✅ Q1. 변수 4개에 타입을 지정해보시오.

let user = 'kim';
let age = undefined;
let married = false; 
let 철수 = [user, age, married];

💻First Code

let user: string = "kim";
let age: unknown = undefined;
let married: boolean = false;
let name: [string | unknown | boolean] = [user, age, married];

export {};

💻Second Code

let user: string = "kim";
let age: undefined = undefined;
let married: boolean = false;
let name: (string | undefined | boolean)[] = [user, age, married];

export {};

✅ Q2. 학교라는 변수에 타입을 지정해보시오.

let 학교 = {
    score : [100, 97, 84],
    teacher : 'Phil',
    friend : 'John'
}
학교.score[4] = false;
학교.friend = ['Lee' , 학교.teacher]

💻First Code

let 학교: {
  score: (number | boolean)[];
  teacher: string;
  friend: string;
} = {
  score: [100, 97, 84],
  teacher: "Phil",
  friend: "John",
};
학교.score[4] = false;
학교.friend = ["Lee", 학교.teacher];
export {};

💻Second Code

let 학교: {
  score: (number | boolean)[];
  teacher: string;
  friend: string| string[];
} = {
  score: [100, 97, 84],
  teacher: "Phil",
  friend: "John",
};
학교.score[4] = false;
학교.friend = ["Lee", 학교.teacher];
export {};

---

What I Learned?

✅ string type일 때는 +연산자만 가능하다.
✅ union type을 사용하더라도 변수를 해당 union type에 맞는 type으로 확실히 지정해줘야 error를 방지할 수 있다.
✅ union type이 지정된 경우의 연산에 대한 개념이 헷갈렸다.
직접 코드를 치고 error를 확인해보니 헷갈렸던 개념을 다시 이해할 수 있었다.