[타입스크립트] 타입스크립트 시작하기

💡 tl;dr

---

• typescript 소개
• typescript 세팅

타입스크립트가 필요한 이유

---

약한 타입 언어 자바스크립트

• 자바스크립트는 타입 시스템이 없는 동적 프로그래밍 언어다.
• 자바스크립트 변수는 문자열, 숫자, 불린 등 여러 타입의 값을 가질 수 있다.
• 이를 약한 타입 언어라고 표현한다.
• 때문에 비교적 유연하게 개발할 수 있는 환경을 제공한다.
• 그러나 런타임 환경에서 쉽게 에러가 발생할 수 있다.

강한 타입 언어 타입스크립트

• 타입스크립트는 이러한 자바스크립트에 강한 타입 시스템을 적용한 것이다.
• 대부분의 에러를 컴파일 환경에서 코드를 입력하는 동안 체크할 수 있다.
• 높은 가독성과 코드 품질 등을 제공할 수 있다.
• 치명적인 오류를 더욱 쉽게 잡아낼 수 있다.
• JS의 모든 기능을 사용할 수 있을 뿐만 아니라, 추가 장점 기능들을 모두 사용할 수 있는 슈퍼셋이다.
• 자바스크립트를 대체한다가 아닌 슈퍼셋의 입장으로 공생의 전략을 취하는 언어다.

TypeScript 예시 코드

// custom type을 생성하여 명시적 선언 가능
type Centimeter = number;
type RainbowColor = 'red'|'orange'|'yellow'|'green'|'blue'|'navy'|'purple';

// 변수 뒤에 :type을 명시 
let age:number = 10;
let weight:number = 80;
let height:Centimeter = 176; 
let color:RainbowColor = 'orange';

// it will be error
color = 'black';

JS 프로젝트를 TS 프로젝트로 바꾸기

---

[parcel.js 기준]

1. 변경할 파일의 파일명 확장자 변경

   • 변경된 파일명 참조값 확인

2. tsconfig.json 파일 생성

   • 폴더 root에 tsconfig.json 파일을 생성

tsconfig.json 옵션

---

{
   "compilerOptions": {
       "strict": true,
       "target": "ES5",
       "module": "CommonJS",
       "alwaysStrict": true,
       "noImplicitAny": true,
       "sourceMap": true,
       "downlevelIteration": true
   }
}

• strict : 코드 작성시 TS 규칙을 강하게 적용할지 여부
• target : TS 파일을 컴파일하여 생성된 JS 파일이 사용할 문법체계 버전
• module : 모듈 시스템 버전 선택
• alwaysStrict : 코드를 ECMAScript Strict 모드로 분석하고 각 소스파일들에 적용
• noImplicitAny : Any 타입 사용 여부 (true 선택시 명확히 타입 기술 필요)
• sourceMap : TS 결과를 출력해놓은 dist 폴더에 소스맵 파일 저장 여부
  • 소스맵 파일 : 변환된 JS파일에서 문제점을 찾기 어려울 수 있으므로 작성한 TS 코드를 그대로 저장해 놓은 데이터 파일
• downlevelIteration : 다운레벨링(이전 버전의 자바스크립트로 변환) 방법 결정
  • 활성화시 importHelpers 를 통해 tslib 를 사용하여 인라인 자바스크립트의 양을 줄일 수 있음
  • 비활성화시 모든 object의 루프가 기존 루프(for/ of for)로 다운레벨화

TSConfig 상세 문서