파라미터 value의 경우 string 타입의 변수로만 사용가능하다.

파라미터의 타입을 string 뿐만 아니라 원하는 다른 타입으로 선언하고자 할 때는

대표적으로 any를 생각할 수 있지만, 좀 더 원하는 구체적인 타입을 지정해주고자 할 때는 | 연산자를 사용할 수 있다

이를 Union 타입이라고 하며, 하나 이상의 원하는 타입을 정해줄 수 있는 방법이다

 

유니온 뿐만 아니라 이러한 타입스크립트의 강점 중 하나는 타입 가드가 가능하다는 것

즉 특정 타입으로 타입의 범위를 좁혀나가 타입에 맞는 속성들을 바로바로 사용할 수 있다는 것이 편하다

 

인터페이스를 사용했을 때의 특징

여러 개의 인터페이스를 사용해서 매개변수로 사용할 때는 

A라는 변수가 특정 타입으로 확정되지 않은 이상

A가 접근할 수 있는 속성값은 유니온으로 설정한 모든 인터페이스에서 공통적으로 가진 속성만 뷰접근이 가능하다

타입스크립트가 변수의 속성값에 대해서 접근할 수 있는 프로퍼티는 모든 유니온을 만족시키는 공통된 프로퍼티이다

 

유니온 타입과 반대되는 연산자로 인터섹션 타입이 있다

인터섹션 타입은 & 연산자를 사용한다

유니온의 | 을 생각해본다면 인터섹션 타입은 어떤지 쉽게 예상할 수 있을 것 같다

변수 value의 뷰프로퍼티를 확인해보면 interface person과 user의 모든 속성을 사용할 수 있음을 확인할 수 있다

여기서 name 프로퍼티의 경우 공통된 속성이기 때문에 name으로 커서를 옮기면

name: string 이라고 표현되어 있고,

age로 커서를 옮기면 person.age : number을,

email로 커서를 옮기면 user.email : string으로

어떤 인터페이스의 속성과 타입인지 확인할 수 있다

 

유니온 타입과 인터섹션 타입은 함수를 호출할 때 약간의 차이가 있다

이 차이 때문에 주로 유니온 타입이 좀 더 선호되는 편이다

 

유니온 타입을 사용한 함수를 호출할 때는

유니온으로 선언한 타입 중 하나를 만족시켜서 호출하면 된다. 아래를 보자

 

인터섹션 타입을 사용한 함수를 호출할 때는

선언한 모든 타입을 만족시켜야 한다는 규칙이 있다

즉, person과 user를 인터섹션으로 사용한다면 호출할 떄 이에 필요한 모든 속성이 필요하게 된다

 

첫번째 호출은 age라는 속성을 사용하지 않았기 때문에 에러가 발생하는 것을 볼 수 있다

두번째 호출처럼 모든 속성을 만족시켜야 한다

'web > Typescript' 카테고리의 다른 글

Type Aliases  (0) 2021.01.13
Interface  (0) 2021.01.13

+ Recent posts