TS 정리 (한 입 크기로 잘라먹는 타입스크립트(TypeScript)) - 01

해당 포스팅은 한 입 크기로 잘라먹는 타입스크립트(TypeScript)를 학습하면서 알게된 정보들을 정리하였습니다.

 

https://inf.run/EvrS5

한 입 크기로 잘라먹는 타입스크립트(TypeScript) 강의 | 이정환 Winterlood - 인프런

 

TypeScript 탄생

TypeScript는 C#의 창시자로 알려진 앤더스 하일스버그의 손에서 만들어짐

 

TypeScript는 https://github.com/microsoft/TypeScript 오픈소스로 공개되어져 있음

GitHub - microsoft/TypeScript: TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

 

TypeScript란

TypeScript는 C나 JAVA와 같은 정적 타입 시스템과 Python과 JavaScript와 같은 정적 타입 시스템을 혼합하여 사용함

 

타입이 지정되어져 있는 변수들은 타입을 미리 결정하고, 타입이 지정되어있지 않은 변수들은 타입스크립트가 자동으로 타입을 추론함 (점진적 타입 시스템)

 

모든 변수에 일일이 타입을 지정해주지 않아도 되고, 코드의 타입 오류를 컴파일 단계에서 미리 검사할 수 있음

 

다음과 같이 타입을 지정하지 않았지만, a라는 변수가 number타입이라는 것을 알고 있음

let a = 1;

타입스크립트의 실행 과정

• 컴파일

1. TypeScript -> AST(추상 문법 트리)
2. AST -> 타입 검사(Type Checking) -> JavaScript(타입 에러가 발생할 가능성이 낮은 JS)

• 런타임

1. JavaScript -> AST
2. AST -> 바이트 코드
3. 바이트 코드 -> 실행

개발 환경 세팅

준비물

• node.js
• Vscode

1. 터미널에 npm init으로 nodejs의 패키지를 초기화
2. npm i @types/node으로 nodejs가 제공하는 내장 기능들에 대한 타입 정보 추가
3. npm i typescript으로 타입 스크립트 추가
4. npm i tsx로 ts를 js로 변경해주는 tsc 명령어 없이, ts 파일을 바로 실행 가능

ts 컴파일 옵션

ts에서 js로 컴파일하는데 적용하는 옵션들

• tsconfig.json

  {
  "compilerOptions": {
    "target": "ESNext",             // 컴파일 되는 자바스크립트의 버전 지정 가능
    "module": "ESNext",             // 컴파일된 javaScript의 모듈 버전 지정
    "outDir": "dist",               // 컴파일된 javaSciprt의 폴더 위치 지정
    "strict": true,                 // 코드 컴파일을 엄격하게 체크함
    "moduleDetection": "force",     // ts를 js처럼 모든 파일들이 단독 모듈로 작동하도록 할 수 있음
  },                                // TypeSciprt를 변환하는 과정이나, Type 옵션 변경과 같은 상세안 옵션 수정
  "include": ["src"],               // 폴더를 컴파일 할 수 있도록 해주는 옵션
  "skipLibCheck": true              // 타입 정의 파일의 타입 검사를 생략하는 옵션
  }