ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 1장. 타입스크립트 알아보기
    책/misc 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
킹수빈닷컴