• Type Alias는 의미 없는 반복을 줄이고 타입을 명시적으로 사용하도록 돕는다.
• let
, const
를 선언하여 초기화 하듯이 사용한다.
• 컴파일러가 따로 추론하지 않는다.
보통 변수를 선언하고 초기화할 때 다음과 같이 작성한다.
Type Alias 도 이와 유사한 형식으로 작성한다.
const str = 'str'
const num = 123
const arr = []
const obj = {}
const func = function() {}
다음은 Type Alias를 선언한 코드이다.
Type Alias는 type
키워드를 사용해 선언하고 다음과 같은 방법으로 지정한다.
type
타입_별칭 = 타입
type str = string
type num = number
type arr = num[] // 이미 선언한 타입 재활용 가능하다.
type func = () => void
type Person = { // 객체도 넣을 수 있다.
name: str
age: num
counts: arr
getInfo: func
}
▶ Type Alias
Type Alias 은 컴파일러가 따로 추론하지 않는다.
type str = string
type num = number
type arr = num[]
type Person = {
name: str
age: num
counts: arr
}
▶ Interface
Interface는 컴파일러가 따로 추론한다.
또한 구조화하기 적합하다.
그외에도 확장 등의 다양한 기능들이 제공된다.
type str = string
type num = number
type arr = num[]
interface PersonInterface {
name: str
age: num
counts: arr
}
▶ Union Type ( 합집합 )
Union Type( 유니언 타입 )은 OR ( 또는 ) 과 같다. ➜ 둘을 합친 결과 ( 둘 중 하나 )
아래의 예시를 통해 이해해보자.
type StringOrNumber = string | number // string 또는 number 타입을 수용
type GenderType = 'M' | 'F' // 'M' 또는 'F' 타입을 수용
const a:StringOrNumber = 'STR'
const b:StringOrNumber = 123
// const c:StringOrNumber = boolean // ➜ StringOrNumber는 string 또는 number 타입만 가능
type Person = {
name: string
age: number
}
type Me = {
name: string
generType: GenderType
}
// Person 타입 또는 Me 타입을 만족시켜야 한다.
// ➜ Person 타입만 만족하거나, ( name, age )
// ➜ Me 타입만 만족하거나, ( name genderType )
// ➜ 둘다 만족하거나 ( name, age, genderType )
const obj: Person | Me = {
name: 'Jang',
age: 99,
generType: 'M'
}
▶ Intersection Type ( 교집합 )
Intersection Type( 교차 타입 ) 은 AND( 그리고 ) 와 같다. ➜ 둘의 공통 분모
type StringAndNumber = string & number
type GenderType = 'M' | 'F'
// string 이면서도 number 일 수 없기 때문에 Error 발생
// const a:StringAndNumber = 'STR'
// const b:StringAndNumber = 123
// const c:StringAndNumber = boolean
type Person = {
name: string
age: number
}
type Me = {
name: string
generType: GenderType
}
// Person 타입과 Me 타입을 모두 만족시켜야 한다.
// ➜ name, age, genderType 중 하나라도 빠지면 Error 발생
const obj: Person & Me = {
name: 'Jang',
age: 99,
generType: 'M'
}
Union Type 을 무분별하게 사용하다 보면 타입 추론이 어려워진다.
이러한 경우에는 타입 가드를 사용해서 타입을 좁히는 작업이 필요하다.
interface Male {
name: string
age: number
genderType: 'M'
}
interface Female {
name: string
age: number
genderType: 'F'
}
type Person = Male | Female
function createMale({ name, age, genderType }: Person): Male {
return {
name, age, genderType
}
}
function createFemale({ name, age, genderType }: Person): Female {
return {
name, age, genderType
}
}