[코딩애플] ts part 1-3. 타입을 미리 정하기 애매할 때(union type, any, unknown)

타입을 미리 정하기 애매할 때(union type, any, unknown)

Union Type

• 타입 2개 이상 합친 새로운 타입 만들 수 있음

문자 or 숫자 들어올 수 있는 변수 만들기

let 회원 :number | string = 123; // 하나로 확정되어 type이 이제 number임

let 회원 :(number | string | boolean) = 123; // 소괄호 쳐도 됨

숫자 or 문자가 가능한 array /object 타입 지정하기

let 회원들 :(number | string)[] = [1,'2',3];
let 오브젝트 :{ a: number | string } = { a: '123' }

소괄호 없이 쓰면 큰일남.

let 회원들 :number | string[] = [1,'2',3]

이건 number 혹은 ['2']가 된다는 의미임. 그래서 꼭 소괄호를 써주자.

any

• 모든 자료형 허용해줌 (**타입실드 해제 문법**임)
• 일반 자바스크립트 변수처럼 쓸 수 있다.
• 그래서 타입관련 버그가 나도 잡아주지 않음

let 이름 :any;
이름 = 123;
이름 = [];
이름 = 'Kim';

하지만 너무 남용하면 ts를 쓰는 이유가 없어진다.

unknown

최신형, 모든 자료형 허용해줌.

1. any랑 기능은 같긴한데 unknown이 더 안정성있다.

let 이름 :unknown;
이름 = 123;
이름 = {};

let 변수1 : string = 이름; // 에러 발생

여기서 변수1이 string 실드를 치고 있으니까 string이 아닌 {}데이터를 가진 이름이 들어오니까 에러를 일으킨다.

근데 여기서 unknown -> any로 바꾸게되면 에러가 발생하지 않는다. any를 보이면 무조건 실드가 죽는다!

2. 간단한 수학연산도 타입이 맞아야한다.

let 이름 :unknown;
이름 - 1; // 에러남

**타입스크립트의 타입 엄격함**

• 간단한 수학연산도 타입이 맞아야 함
• unknown은 number 타입이 아니다

숫자끼리만 사칙연산 가능하다. 이름은 type이 unknown이니까 뺄셈을 못한다. ts는 이처럼 간단한 연산을 할 때도 타입을 엄격하게 지켜야만 한다.

예제

Q. 타입이 맞는데 왜 +1이 안되나?

let 나이 :string|number;
나이 + 1; // 에러 발생

js에서는 문자, 숫자 둘 다 +1이 된다.

• 문자에서 +1 : 'kim'+1 = 'kim1'
• 숫자에서 +1 : 3 + 1 = 4

**ts에서는 엄격한 걸 좋아한다!**

• string 타입 +1 (허용)
• number 타입 +1 (허용)
• string | number 타입 +1 (안돼)

**union type은 새로운 타입**이다. 그래서 union type에선 연산을 할 수 없다.

Q. 변수가 분명 1인데 왜 -1이 안되는 것?

let 나이 :unknown = 1;
나이 - 1;

타입스크립트는 엄격한거 좋아한다 했다! 그래서 type이 숫자타입인 것만 가능하다.

'나이'에 숫자 1이 들어가 있다고 하더라도 **type이 숫자타입이어야 숫자처럼 연산해준다!**

자바스크립트처럼 코드를 그냥 막 짜면 안된다. 무조건 타입에 맞춰서 연산을 해야 한다.

나중에 Narrowing / Assertion 배워서 엄격하게 코드를 짜면 된다.

숙제

(숙제1) 다음 변수 4개에 타입을 지정해봅시다.

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

허전하니까 변수 4개에 타입빨리 집어넣어봅시다.

(조건) age 변수엔 undefined 말고 숫자도 들어올 수 있습니다.

➡️

let user :string = 'kim';
let age :(undefined | number) = undefined;
let married :boolean = false; 
let 철수 :(string|undefined|number|boolean)[]= [user, age, married];

(숙제2) 학교라는 변수에 타입지정해보십시오.

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

타입지정을 안해줬더니 터미널에 에러가 나는군요.

에러안나게 학교라는 변수에 타입좀 지정해줍시다.

➡️

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