TypScript 학습

npx create-react-app . --template typescript

1. 타입스크립트 개론

점진적 타입 시스템이다

• 타입이 정의된 변수들에 대해서는 타입을 미리 결정하고,
  타입이 정의되어 있지 않은 변수들에 대해서는 타입스크립트가 초기화된 값을 기준으로 알아서 타입을 추론한다
• 코드 실행 전 검사를 통해 타입 안정성을 확보한다

컴파일 과정

• 타입스크립트는 AST(추상 문법 트리)와 Type 검사 과정을 거치는데 성공하면 AST가 JavaScript 코드로 변환된다
• 만약 코드에 오류가 있어서 Type 검사를 실패하게 되면 컴파일은 종료된다
• 타입 오류가 없는 타입스크립트 코드는 컴파일 시 Type 검사를 통과하고 타입 관련 문법들은 삭제된 안전한 자바스크립트 코드로 변환된다

자료 출처: winterlood

컴파일 옵션 설정

• tsconfig.json 자동 생성

  tsc --init
  

• tsconfig.json 커스텀

  {
   "compilerOptions": {
     "target": "ESNext", //컴파일 결과 생성되는 자바스크립트 코드의 버전을 설정
     "module": "ESNext", //변환되는 자바스크립트 코드의 모듈 시스템을 설정
     "outDir": "dist", //컴파일 결과 생성할 자바스크립트 코드의 위치를 결정
     "strict": true, //타입스크립트 컴파일러의 타입 검사 엄격함 수준
     "moduleDetection": "force" //타입스크립트의 모든 파일은 기본적으로 전역 파일(모듈)로 취급되는데 해당 옵션을 "force"로 설정하면 자동으로 모든 타입스크립트 파일이 로컬 파일(모듈)로 취급
  },
   "include": ["src"] //tsc에게 컴파일 할 타입스크립트 파일의 범위와 위치를 알려줌
  }
  

2. 타입스크립트 기본

• 원시타입과 리터럴타입
• 배열과 튜플
• 객체
• 타입 별칭과 인덱스 시그니처
• enum 타입
• any와 unknown 타입
• void와 never 타입

3. 타입스크립트 이해하기

타입 계층도

• 타입 계층도와 함께 기본타입 살펴보기
• 객체 타입의 호환성
• 대수 타입
• 타입 추론
• 타입 단언
• 타입 좁히기
• 서로소 유니온 타입

4. 함수와 타입

• 함수 타입
• 함수 타입 표현식과 호출 시그니쳐
• 함수 타입의 호환성
• 함수 오버로딩
• 사용자 정의 타입 가드

5. 인터페이스

• 인터페이스
• 인터페이스 확장하기
• 인터페이스 선언 합치기

6. 클래스

• 타입스크립트의 클래스
• 접근 제어자
• 인터페이스와 클래스

7. 제네릭

• 제네릭 소개
• 타입 변수 응용하기
• map, forEach 메서드 타입 정의하기
• 제네릭 인터페이스, 제네릭 타입 별칭
• 제네릭 클래스
• 프로미스와 제네릭

8. 타입 조작하기

• Indexed Access 타입
• keyof 연산자
• Mapped 타입
• Template Literal 타입

9. 조건부 타입

• 조건부 타입
• 분산적인 조건부 타입
• infer - 조건부 타입 내에서 타입 추론하기

10. 맵드 타입 기반의 유틸리티 타입

• Partial, Required, Readonly
• Pick, Omit, Record
• Exclude, Extract, ReturnType