[코딩애플] 4.Type Script

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

🍎 Union Type

Union type : | (OR) 연산자와 같이 A이거나 B이다.

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

 

array, object 자료 : union type (OR 연산자) 방법

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

위 array와 object 자료에 numder 또는 string이 들어올 수 있게 수정해보세요.

 

답.

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

 

 

🍎 any Type

아무 자료나 넣을 수 있는 타입입니다. (실드해제)

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

 

any type은 실드해제 문법이기 때문에 갑자기 타입을 바꿔도 에러가 나지 않습니다.

단, 타입관련 버그가 생길 경우 왜 그런지 추적하기 어렵습니다.

그래서 비상시 쓰는 변수 타입체크 해제기능으로 씁니다. 

🍎 unknown Type

unknown도 any와 똑같이 모든 타입을 집어넣을 수 있습니다. 

let 이름: unknown = 'kim';
이름 = 123;
이름 = undefined;
이름 = [];
// 에러가 나지 않습니다.

 아직 어떤 타입이 들어올지 모를 경우, 다양한 타입을 집어 넣어야할 경우 unknown type을 사용해 보시길 바랍니다. 

 

중요한 특징!

1. unknown 타입엔 모든 자료 다 집어넣을 수 있음

2. 자료집어넣어도 타입은 그대로 unknown type

let 이름: unknown;

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

당연히 unknown type을 다른 곳에 집어 넣으려고 하면 실드가 발동해서 에러가 납니다. (any는 안 그럼)

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

에러가 납니다.  (any는 안그럼)

 

이유

타입스크립트는 정확하고 확실한 스크립트이기 때문입니다.

어떤 타입이 들어올 지 모르는 상황에서 타입을 선언할 수 없기 때문입니다.

그래서 아직 무엇을 집어 넣을지 모르겠는데

약간의 안정성을 도모하고 싶으면 unknown 타입을 써봅시다.

---

 Q1. 이 코드는 왜 에러가 나는 것이죠?

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

 

 

Q2. 이 코드도 왜 에러가 나는 것이죠?

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

 

답.

타입스크립트는 언제나 확실한걸 좋아한다고 했습니다.
지금 변경하려는 변수의 타입이 확실해야 연산을 할 수 있습니다.
그래서 -1은 확실하게 왼쪽 number type일 때만 가능합니다.
unknown은 number type이 아닙니다.
string | number 도 number type이 아닙니다.

 

(참고)
unknown type인 변수를 조작하려면  내가 조작할 변수의 타입이 무엇인지 확실하게 체크하는 narrowing 또는 assertion 스킬을 사용해야합니다. 그것이 타입스크립트의 근간이 되는 코딩방법입니다. 변수에 뭐가 들어있을지 아직 모르는데 그 변수를 사용하고 조작해야하는 경우 narrowing 또는 assertion을 반드시 사용해야 에디터가 오류가 발생하지 않습니다. 좀 길어서 그건 뒤에 나오는 강의에서 알아봅시다.
- 코딩애플 -

---

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

let user = 'kim';
let age = undefined; // (조건) age 변수엔 undefined 말고 숫자도 들어올 수 있습니다. 
let married = false; 
let 철수 = [user, age, married];

위의 변수 4개에 타입 집어넣어봅시다. 

 

답.

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

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

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

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

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

 

답.

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

---

참고 사이트 : https://codingapple.com