[TypeScript] union type · any · unknown

🐣 union type · any · unknown 공통점이랄까?

---

들어가기 전에 이 세가지의 공통점을 생각해보면! 어떤 타입의 종류가 들어올지 확실하게 모를 때 사용한다는 점을 들 수 있다. 프로젝트 내에서 사용할 때에도 해당 타입을 사용하는 경우는 number 혹은 string 타입 둘 중에 들어온다든지...아니면 어떤 타입이 들어올 지 몰라서 설정한다든지... 무튼..!_! 해당 세 가지의 개념에 대해서 다뤄보도록 하자!_! 꼬우꼬우!

(애니 타입을 위한 애니를 가져옴)

 

애니

 

 

참고로 typescript 설치 및 개념에 대해서 알고 싶다면 이전 정리글 참고

[TypeScript] 타입스크립트

 

 

🐣 유니온 타입 (Union Type)

---

1. 개념

지정된 여러 유형을 보유할 수 있는 유형으로, 변수가 여러 유형 중 하나가 될 수 있음. 이 변수에 string 혹은 number 들어올 수 있다라고 타입 지정하고 싶을 때 사용. | 연산자 사용

• 타입 2개 이상 합친 새로운 타입

// string 혹은 number
let value: string | number = "Hello";

 

2. 코드로 다시 살펴보기

array 혹은 obejct 일 경우 ?

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

 

 

🐣 애니 타입 (Any Type)

---

1. 개념

모든 값을 보유할 수 있는 유형으로, 유형 검사를 비활성화하고 최대의 유연성을 제공.

• 모든 자료형을 허용
• 타입 스크립트 사용하는 의미가 사라질 수도 있으니, 필요할 때만 사용하기
• 타입 버그 관련 에러를 발생시켜주지 않음

// 아무 타입이나 올 수 있음
let anything: any = 42;

 

2. 코드로 살펴보기

아래의 경우 코드를 살펴볼 때 에러를 발생시켜 주지 않는 것을 확인 할 수 있음. 사람1의 경우 any 타입이고 마지막에 [] array를 담았지만, 변수1 타입을 string으로 했을 때 사람1(array)이 들어가도 error를 뿜뿜 하지 않음.

let 사람1: any; //아무거나 들어올 수 있음
사람1 = 123;
사람1 = [];

// 에러를 발생시켜주지 않음
// 위에서 사람는 []로 되어있고, 변수1은 string이어서 맞지 않지만 에러를 발생시켜주지 않음
// any이기 때문에 말그대로 아무거나 올 수 있기 때문
let 변수1: string = 사람1;

 

3. 더 나아가서!

변경하려는 변수의 타입이 명확해야 함. 아래의 경우 string 혹은 number이 들어온다 했는데 +1을 할 경우, 타입에 따라 해당 결과 값이 달라지기 때문에 error 뿜뿜.

만약 기존에 '1' 혹은 1이 할당 되어 있었다면?  string의 경우 '11'이 되고 number의 경우 2가 되기 때문임!_! 

let 계산: string | number //union type은 새로운타입을 만들어 내는 것
계산 + 1; //error

 

그럼 string과 number 각 다시 살펴보면 해당 결과 값이 이렇게 나온다는 것을 확인 할 수 있음!_! 

let 계산1: string = '123';
let 계산2: number = 123;
계산1 + 1; //'1234'
계산2 + 1; //124

 

🐣 언노운 타입 (Unknown)

---

1. 개념

모든 값을 보유할 수 있지만 작업을 수행하기 전에 유형 확인이나 유형 어설션이 필요한 유형. 최근에는 any 보다는 unknown을 사용한다고 함. any와 같이 모든 타입을 넣을 수 있음. 

// 아무 타입이나 올 수 있지만 any타입보다 안전
// unknown은 특정 방식으로 사용 전에 유형 확인 필요 
let unknownValue: unknown = "Could be anything";

2. any 타입과 다른 점?

'unknown' 유형은 'any'보다 안전한 대안. 어떤 값이든 담을 수 있지만 any와는 달리 특정 방식으로 사용하기 전에 유형 확인이나 어설션을 수행 필요. 

• 모든 자료 넣을 수 있음 (any 공통점)
• 자료 넣어도 타입은 그대로 unknown (any와 다른점 - any 보다 안전한 이유)

 

3. 코드로 살펴보기

위에서 살펴본 것과 같이 unknown에는 모든 타입의 종류를 넣을 수 있지만, 타입은 그대로 unknwon 이라는 것을 알 수 있다. 그렇기 때문에 해당 unknown 타입을 다른 곳에 넣으려고 하면 error가 뿜뿜 난다. 다음 코드에서 살펴보면 알 수 있음!

// unknown 타입 (any보다 안전)
let 사람4: unknown;
사람4 = 123;
사람4 = {};

// 에러 발생 : 위에서 사람 4 {} 되어있고, 변수2는 string이기 때문에 맞지 않음
let 변수2: string = 사람4; //error

// 정상 작동 : 위에서 사람 4 {}, 변수3도 {} 이기 때문 
// strict모드에서는 x 
// 자료 집어넣어도 타입은 그대로 unknown
let 변수3: {} = 회원4; // // strict모드에서는 error

 

4. 더 나아가서!

다음의 경우 계산3 - 1에서 error가 나는데, 그 이유는 unknown이 number 아니기 때문임

let 계산3: unknown = 1;

//숫자타입이여야 숫자처럼 연산함. unknown이 왔기 때문에 error
계산3 - 1; //error

 

 

🐣 이건 어때!

---

let user = 'ham';
let age = undefined;
let married  = false; 
let 햄 = [user, age, married];

let user :string = 'ham';
let age : undefined | number = undefined; //undefined로 넣으면 strict 모드에서는 error
let married :boolean = false; 
let 햄1: (string | number | undefined | boolean)[] = [user, age, married];

 

---

타입 정리 오랜만이군!_!
다음 시간에는 void type 에 대해서 살펴보자꾸!

 

[TypeScript] void type