kingsubin

1장. 타입스크립트 알아보기

아이템 1~5

---

아이템 1. 타입스크립트와 자바스크립트의 관계 이해하기

• 모든 JS 프로그램은 이미 TS 프로그램이다. 반대로, TS는 일반적으로 유효한 JS프로그램이 아니다.
• 코드의 의도가 무엇인지 타입 구문을 통해 타입스크립트에게 알려줄 수 있기 때문에 코드의 동작과 의도가 다른 부분을 찾을 수 있다.
• TS는 JS 런타임 동작을 모델링하는 타입 시스템을 가지고 있기에 런타임 오류를 발생시키는 코드를 찾아내려고 한다. 모든 오류를 찾아낼 순 없다. 타입 체커를 통과하면서도 런타임 오류를 발생시키는 코드는 존재할 수 있다.

아이템 2. 타입스크립트 설정 이해하기

• cli 가 아닌 설정 파일(tsconfig.json)을 사용하자. 팀원과 공유하기 위함.
• 엄격한 체크를 하고 싶다면 strict 설정 고려하기.
• 가급적 noImplicitAny 설정하기

// noImplicitAny: false
// 암묵적으로 any 타입으로 간주함.
function add(a, b) {
  return a + b;
}

// noImplicitAny: true
// 오류로 표시됨, any 또는 분명한 타입을 사용하면 해결 가능
function add(a: number, b: number) {
  return a + b;
}

• strictNullChecks: null과 undefined가 모든 타입에서 허용되는지 확인하는 설정, 가급적 설정을 추천함.

// strictNullChecks: false
const x: number = null // 정상

// strictNullChecks: true
const x: number = null; // 오류

// null을 허용하고 싶으면 명시적으로 의도를 드러내야함.
const x: number | null = null;

// null을 허용하지 않으려면 null 체크 코드 또는 단언문을 추가해야함.
const el = document.getElementById('status');
el.textContent = 'ready'; // 오류

if (el) {
  el.textContent = 'ready'; // ok
}
el!.textContent = 'ready'; // ok

아이템 3. 코드 생성과 타입이 관계없음을 이해하기

• 코드 생성은 타입 시스템과 무관하다.
• TS 타입은 런타임 동작이나 성능에 영향을 주지 않는다.
• TS 타입은 런타임에 사용할 수 없다.

아이템 4. 구조적 타이핑에 익숙해지기

• 덕 타이핑: 객체가 어떤 타입에 부합하는 변수와 메서드를 가질 경우 객체를 해당 타입에 속한 것으로 간주하는 방식
• JS는 덕 타이핑 기반이다. TS는 매개변수 값이 요구사항을 만족한다면 타입이 무엇인지 신경 쓰지 않는 동작을 그대로 모델링한다.
• 클래스 역시 구조적 타이핑 규칙을 따른다.
• 구조적 타이핑을 사용하면 유닛 테스팅을 더 쉽게 할 수 있다.

interface PostgresDB {
  runQuery: (sql: string) => any[];
}
interface Author {
  first: string;
  last: string;
}

// ex1. 테스트를 위해 mocking한 PostgresDB 생성이 필요함.
function getAuthors(database: PostgresDB): Author[] {
  const authorRows = database.runQuery(`SELECT FIRST, LAST FROM AUTHORS`);
  return authorRows.map(row => ({first: row[0], last: row[1]}));
}

// ex2. 실제 DB 정보, 모킹 라이브러리 필요 없음.
interface DB {
  runQuery: (sql: string) => any[];
}
function getAuthors(database: DB): Author[] {
  const authorRows = database.runQuery(`SELECT FIRST, LAST FROM AUTHORS`);
  return authorRows.map(row => ({first: row[0], last: row[1]}));
}

아이템 5. any 타입 지양하기

• any 타입 사용은 타입 체커와 TS 언어 서비스를 무력화시킨다. 최대한 사용을 피하자.

 

---

참고: 이펙티브 타입스크립트