[TypeScript] union type, any, unknown

qwe8851·2022년 10월 25일
0

🙆‍♂️ TypeScript

목록 보기
4/9

변수에 들어올게 string일지 number일지 아직 애매하다면
몇가지 방법이 있음

✨ Union type

let 이름: string | number = 'kim';
let 나이: (string | number) = 100;

"이 변수에 string 또는 number가 들어올 수 있다~"라고 |(파이프)문자를 사용해 알려주는것
할당하는 순간 타입이 string 또는 number 중 하나로 변함


var 어레이: (number | string)[] = [1,'2',3]
var 오브젝트: {data : (number | string) } = { data : '123' }

array나 object자료에서는 이런식으로 사용할 수 있음.

특징은 변수에 정의된 Union 타입은 할당과 동시에 OR 역할이 사라집니다.

array, object에 정의된 Union 타입은 OR 연산자가 유지됩니다.




✨ any

let 이름: any = 'kim';
이름 = 123;
이름 = undefined;
이름 = [];

any는 실드 해제 문법임

얘는 실드를 해제하는 문법이기 때문에 갑자기 타입을 막 바꿔도 에러가 발생하지 않음.
그럼 타입관련 버그가 생기면 왜 그런지 추적하기 어렵고, 타입실드를 안씌우면 ts를 쓸 이유가 없어짐.

그래서 비상시 쓰는 변수 타입체크 해제기능용도로 쓰임



✨ unknown

any보다는 나음 unknown문법이 있음

let 이름: unknown = 'kim';
이름 = 123;
이름 = undefined;
이름 = [];

any처럼 모든 타입을 넣을 수 있는데,
아직 어떤 타입이 들어올지 모르는 경우, 다양한 타입을 집어넣어야할 경우 사용하면 좋음.

중요한 특징은
1. unknown타입엔 모든 자료를 다 집어넣을 수 있음.
2. 자료를 집어넣어도 타입은 그대로 unknown임


let 이름: unknown;

let 변수1: string = 이름;
let 변수2: boolean = 이름;
let 변수3: number = 이름;

당연히 unknown 타입을 다른 곳에 집어넣으려고 하면 그쪽 실드가 발동해 에러가 남
(any는 안그럼)


et 이름: unknown;
이름[0];
이름 - 1;
이름.data;

이래도 에러남
(any는 안그럼)

왜냐면 ts는 정확하고 확실한걸 좋아하기 때문임
확실하지 않은 타입에 뺄셈을 해주지 않음
(숫자가 아닌걸 뺄셈할 수 없기 때문)

그래서 타입스크립트에선 뺄셈은 number타입에만 가능하고 .name이런건 object타입에만 할 수 있다고 미리 정의되어 있음.





그래서 결론은 ...

아직 뭘 넣어야할 지 모르겠는데 약간의 안정성을 도모하고 싶으면 unknown
(any, unknown은 사실 쓸 기회가 별로 없음)





📎 응용문제 풀어보기

Q1. 아래 코드는 왜 에러가 나는걸까?

let 나이 : string|number;
나이 +1;

Q2. 아래 코드는 왜 에러가 나는걸까?

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

A. 둘 다 같은 이유임

타입스크립트는 확실한걸 좋아해서 지금 변경하려는 변수의 타입이 확실해야 연산을 수행해 줌.

그래서 -1은 확실하게 왼쪽에 있는 number타입일 때만 가능한것

unknown타입은 number타입이 아니고
string|number또한 number타입이 아님(uniontype)

💡 참고
그래서 unknown타입인 변수를 조작하려면 내가 조작할 변수의 타입이 무엇인지 확실히 체크하는 narrowing 또는 assertion스킬을 사용해야 함

profile
FrontEnd Developer with React, TypeScript

0개의 댓글