[Type Script] 커스텀 타입의 유니온, any와 unknown 차이, 연습문제 풀어보기

서론

Type Script를 공부하기 전에 js를 많이 공부 안 해서 조금 힘들었다.

js도 다시 복습해야할 듯 ,,,ㅎㅎ

 

유니온이란?

유니온 타입은 변수에 지정할 수 있는 타입이 여러 개일 때 사용한다.

여기서 함수의 인자값인 padding은 string, number 등의 원시타입을 포함한 유니온 타입에 해당된다.

 

커스텀 타입을 이용한 유니온 타입

커스텀 타입은 위 코드에서 보이는 것처럼 사용자가 정의한 class, interface 등이 될 수 있다.

이 커스텀 타입을 두 개 이상 가지는 유니온 타입도 만들어볼 수 있는데, 위 코드에선 Shape가 유니온 타입이다.

 

그리고 두 interface는 kind라는 프로퍼티를 공통으로 가지고 있다.

이 프로퍼티는 두 interface를 구분하는 식별자로 사용된다.

 

이 식별자가 존재해 두 커스텀 타입을 구분할 수 있는 Shape 타입은 식별 가능한 유니온이라고 말한다.

 

금방 코드를 사용해서 kind 프로퍼티 값에 따라 shape 크기를 계산하는 area 함수를 만들 수 있다.

Rectagle 혹은 Circle 타입을 가지는 Shape 타입의 객체를 인자로 받아

그 객체의 kind 프로퍼티가 rectagle이면 그 객체의 height * width를 계산해서 반환하고,

circle이면 원주율(Math.PI) * 반지름 제곱을 계산해 반환한다.

 

타입 가드 in

타입 가드 in 은 타입 범위를 축소할 때 사용한다.

위 코드 foo함수에서 in은 특정 프로퍼티(a)가 파라미터 객체(A or B)에 포함되어 있는지 확인한다.

여기서 확인할 프로퍼티는 문자열로 입력해야 한다. ("a")

 

any와 unknown

person1의 타입은 any로 지정하고 JSON.parse 메서드로 데이터를 끌어와보자.

그 후 콘솔 창엔 undefined가 출력된다.

왜냐하면 JSON에서 끌어온 데이터의 프로퍼티 이름은 "adress"인데,

person1의 "address" 프로퍼티를 찾으려 하니 생긴 문제이다.

 

만약 person2의 타입을 unknown으로 한다면 컴파일 에러가 발생한다.

 

결론적으로 any는 값을 확인하지 않고, unknown은 값을 확인한다.

그래서 address가 person2에 없는 것을 알기 때문에 컴파일에서 에러가 발생하는 것이다.

 

금방 코드에 위 코드를 덧붙여보자.

isPerson은 어떤 객체를 받아 만약 그 객체의 discriminator 프로퍼티가 person이면 true를 반환한다.

그래서 이 isPerson에 아까 person2를 전달해 person2엔 discriminator 프로퍼티가 없으니

'person is not a Person'을 출력한다.

 

연습문제 in book

Dog, Fish라는 커스텀 타입을 class로 만들고, 각각은 생성자 안에 name 프로퍼티가 있다.

Dog는 sayHello 메서드가 있고, Fish는 divw 메서드가 있다.

 

Pet이라는 유니온 타입은 Dog 혹은 Fish 타입을 가질 수 있는 유니온 타입이다.

 

talkToPet에 Pet 타입은 pet을 인자로 받고 만약 pet의 타입이 Dog이면 pet의 sayHello 메서드를 반환하고,

Fish라면 생선은 말할 수 없습니다(Fish cannot talk, sorry)를 반환한다.

 

생성자로 myDog(name : Sammy)와 myFish(name: Nimo)를 만들고

두 객체를 talkToPet 함수로 전달하여 반환값을 출력한다.

 

출력

Dog says Hello!
Fish cannot talk, sorry.

 

담소

역시 책만 볼 땐 이해가 잘 안 갔는데 티스토리로 다시 정리하니까 이해가 됐다.

중간중간에 js 문법을 몰라서 헤매서 다시 js 복습을 해야할 것 같다.

홧팅홧팅