논리 연산자 활용 타입

Eunji Park·2022년 7월 27일
0

TypeScript

목록 보기
7/18
post-thumbnail
post-custom-banner

✓ Type Aliases ( 타입 별칭 )

• 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
}

Interface 와 Type Alias

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 ( 합집합 )

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 ( 교집합 )

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 판별

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
  }
}
post-custom-banner

0개의 댓글