kingsubin

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

책/misc

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

kingsubin 2022. 7. 17. 21:23

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 언어 서비스를 무력화시킨다. 최대한 사용을 피하자.

 


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

' > misc' 카테고리의 다른 글

알림 시스템 설계  (0) 2022.07.09
분산 시스템을 위한 유일 ID 생성기 설계  (0) 2022.07.09
안정 해시 설계  (2) 2022.06.21
처리율 제한 장치의 설계  (3) 2022.06.19
3장. HTTP 메시지  (0) 2022.05.02
0 Comments
댓글쓰기 폼