[TypeScript] 이렇게도 사용할 수 있다! (1)

 

CASE 1. Action 유니온을 인덱싱하여 반복 없애기

interface SaveAction {
	type: 'save';
    // ...
}

interface LoadAction {
	type: 'load';
    // ...
}

type Action = SaveAction | LoadAction
type ActionType = 'save' | 'load' // 타입이 반복된다.

// Action 유니온을 인덱싱하면 타입 반복 없이 ActionType을 정의할 수 있다.
type ActionType = Action['type'] // 타입은 'save' | 'load'

// 하지만 pick을 사용하면 다른 결과를 얻는다.
type ActionRec = Pick<Action, 'type'> // {type: 'save' | 'load'}

 

 

 

CASE 2. 상속받아 새로운 타입으로 정의하기

interface Name {
  first: string
  last: string
}
type DancingDuo<T extends Name> = [T, T]

const couple1: DancingDuo<Name> = [
  { first: 'Fred', last: 'Astaire' },
  { first: 'Ginger', last: 'Rogers' },
]

 

 

 

CASE 3. 문자열을 선언하는 경우

타입스크립트는 문맥에 따라 타입을 달리 추론할 수도 있기때문에 문맥에 대한 이해를 높이는 것이 좋다.

이런 문제를 종종 겪었었는데.. 이렇게 해결하는 것이었다니...!!

type Language = 'JavaScript' | 'TypeScript'
const setLanguage = (language: Language) => {
  return language
}

setLanguage('TypeScript') // 정상

let language = 'TypeScript'
setLanguage(language) // error: string을 Language에 할당할 수 없다.

// 해결방법 1. 타입 좁히기
let language: Language = 'TypeScript'
setLanguage(language) // 정상

// 해결방법 2. 상수로 선언하기
cont language = 'TypeScript'
setLanguage(language) // 정상

 

 

 

CASE 4. 한 값의 null 여부가 다른 값의 null 여부에 암시적으로 관련되도록 설계하지 말자!

아래와 같은 경우, undefined를 min에서만 제거했기 때문에 max는 undefined 일 수도 있어 반환타입이 [number, number]이 아니라 [number, undefined]로 추론되어 타입스크립트 오류가 발생한다.

function extent(nums: number[]) {
  let min, max
  for (const num of nums) {
    if (!min) {
      min = num
      max = num
    } else {
      min = Math.min(num, min)
      max = Math.max(num, max) // error
    }
  }
  return [min, max]
}

 

이 경우, 반환타입을 명확히 지정해준다. 아래 예제에서는 기존에는 [number, undefined]였던 반환 타입이 [number, number] | null이 되어 오류가 발생하지 않는다.

// 이렇게 해결할 수 있다.
function extent(nums: number[]) {
  let result: [number, number] | null = null
  for (const num of nums) {
    if (!result) {
      result = [num, num]
    } else {
      result = [Math.min(num, result[0]), Math.max(num, result[1])]
    }
  }
  return result
}

// !(단언문)을 사용하면 min, max를 얻을 수 있다.
const [min, max] = extent([0, 1, 2])!

 

 

 

---

 

 

출처

댄 밴터캄, 이펙티브 타입스크립트 (프로그래밍 인사이트, 2021)

 

 

 

---

개인적으로 공부한 내용을 정리하는 블로그로
잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.