TypeScript란?

• 2012년 Microsoft에서 개발한 오픈소스 정적 타입을 지원하는 JavaScript의 상위 언어

• JavaScript 코드에 타입을 부여하여, 정적 타입 체크 가능

  • 정적 타입: 하나의 변수에 타입을 선언을 하게 되면, 다른 타입을 넣을 수 없게 된다.
  • 사이즈가 커졌을 때 변수가 많이 존재하게 되고, 그러므로 타입 불일치 버그가 날 가능성이 높다.

• 핵심 원칙 중 하나는 타입 검사가 값이 있는 형태에 집중한다는 것

  a = {
   id : 1, 
   name: 'h'
  } 
  
  // 데이터 형태가 중요. (구조적 타이핑) 
  // 객체안에 들어가 있는 프로파티가 어떤 형태로 되어 있는가?  
  // 명시적 타이핑 (다른 강타입 언어) 
  

  • 덕 타이핑(duck typing) 또는 구조적 타이핑(structural typing) 이라고 부름

• 작성한 코드를 JavaScript로 트랜스파일(Transpile) 하여 실행

  • .ts / .tsx => .JS

• ES6+ 문법 지원

• noEmitOnError 설정을 통해 컴파일 타임에 에러 감지 가능

  • 컴파일 타임: 트랜스파일하는 단계(타입 에러는 미리 감지 가능)

TypeScript의 장점

• 정적 타입 지원으로 코드 작성 및 컴파일 타임에서 타입 에러를 감지하여 안정성 향상
• IDE 지원 강화
• 대형 프로젝트에서 유지보수성 향상
• 다양한 타입 선언 가능 (외부 라이브러리의 타입 등)

TypeScript의 단점

• JS에 익숙하더라도 타입 시스템이나 문법 등의 러닝 커브 발생
• 초기 설정이 필요
• ts 코드를 js코드로 변환하는 트랜스파일 과정이 필요
• 프로젝트 규모가 커질수록 트랜스파일 소요시간 증가

TypeScript 설치

• 아래 명령어로 설치

  • express.js에서 Typescript를 쓸려면 따로 설치해야 한다.

  npm install typescript
  npm i @types/node
  
  // 한번에 install 할 때 
  npm install typescript  @types/node  // 한 칸 띄운 다음 install하기 
  

• 아래 명령어로 TypeScript의 초기 설정

  // npx: 특정 node 실행 
  // tsc: 프로그램 이름
  // init: 명령어 
  
  npx tsc --init
  

  • root에 tsconfig.json 파일이 생성됨
    • tsconfig.json 번역