[TypeScript] 이상적으로 타입스크립트 사용하기

 

1. 모든 변수에 타입을 넣지 않는다.

- 타입스크립트는 결국 타입을 위한 언어이기 때문에 변수를 선언할 때마다 타입을 명시해야한다고 생각할 수 있다. 하지만 모든 변수에 타입을 선언하는 것은 비생산적이며, 타입스크립트가 타입을 추론할 수 있다면 타입 구문을 작성하지 않는 것이 좋다.

- 이상적인 타입스크립트 코드는 *메서드 시그니처에 타입 구문을 포함하지만, 함수 내에서 생성되는 지역변수에는 타입 구문을 넣지 않는다. 타입 구문을 생략하여 방해되는 것들을 최소화하고 코드를 읽는 사람이 구현 로직에 집중할 수 있게 하는 것이 좋다.

* 메서드 시그니처란? 메서드 이름 + 파라미터의 조합이 메서드 시그니처가 된다. 메서드 시그니처가 같다는 말은 메서드 이름과 파라미터가 같다는 뜻이다.

- eslint 규칙 중 'no-interrable-types'를 사용하여 모든 타입 구문이 정말 필요한 지 확인할 수도 있다.

- 하지만 타입스크립트가 타입추론을 할 수 있는 경우에도 객체 리터럴과 함수 반환에는 타입을 명시하는 것이 좋다.

 

 

 

 

2. 값의 모음을 나타내기 위해서는 열거형(enum)이 아닌 유니온을 사용하자.

아래와 같이 숫자 열거형이나 문자열 열거형을 사용한다. 하지만 숫자 열거형에서 열거된 숫자와 다른 숫자(아래 예제에서는 0, 1, 2 외의 다른 숫자)가 할당되면 위험하다.

// 숫자 열거형
enum Flavor {
  VANILLA,
  CHOCOLATE,
  STRAWBERRY,
}

// 문자열 열거형
enum Flavor {
  'VANILLA' = 'VANILLA',
  'CHOCOLATE' = 'CHOCOLATE',
  'STRAWBERRY' = 'STRAWBERRY',
}

 

그리고 자바스크립트와 타입스크립트는 다르게 동작하기 때문에, 문자형 열거형은 사용하지 않는 것이 좋다.

enum Flavor {
  'VANILLA' = 'VANILLA',
  'CHOCOLATE' = 'CHOCOLATE',
  'STRAWBERRY' = 'STRAWBERRY',
}

const scoop = (flavor: Flavor) => {
  // ..
}

// 자바스크립에서는 이렇게 문자열로 할당해도 정상적으로 동작한다.
scoop('VANILLA')
// 하지만 타입스크립트에서는 문자열 대신 열거형을 사용해야 한다.
scoop(Flavor.VANILLA)

 

이렇게 값의 모음이 필요한 경우에는 리터럴 타입의 유니온을 사용하면 된다.

리터럴 타입의 유니온은 열거형만큼 안전하며 자바스크립트와 호환되는 장점이 있다.

type Flavor = 'VANILLA' | 'CHOCOLATE' | 'STRAWBERRY'

 

 

 

3. 단순히 객체의 키와 값을 순회하는 경우에는 Object.entries()를 사용하자.

타입스크립트에서 for문을 사용하다보면 key 타입이 너무 한정되거나 너무 많은 경우 에러가 발생할 수 있다.

단순히 객체의 키와 값을 순회하고자 한다면 Object.entires()를 사용하면 된다.

 

for(const [k, v] of Object.entries(testObj)) {
	console.log(typeof k) // 타입: string
	console.log(typeof v) // 타입: any
}

 

 

 

 

 

---

 

 

 

출처

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

 

 

 

 

---

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