개념
TypeScript
- javascript의 대체 언어이다.
- .ts 확장자를 사용하고 컴파일의 결과, .js 파일로 출력한다. 최종적으로 javascript 코드를 구동시키는 것 javascript 와 달리 타입을 명시 할 수 있어 코드 작성시 에러를 줄 일 수 있다.
자바스크립트는 C나 Java와 같은 C-Family 언어와는 구별되는 특성이 몇 가지 있다.
- Prototype-based Object Oriented Language
- Scope와 this
- 동적 타입 언어 (느슨한 타입 언어)
TypeScript는 자바스크립트 대체 언어 중 하나로써 자바스크립트(ES5)의 상위확장(Superset)이다.
- Microsoft에서 2012년 발표한 오픈소스
- 정적 타이핑을 지원하며 ES6의 클래스, 모듈 등과 ES7의 Decorator 등을 지원한다.
- ES5의 Superset이므로 기존의 JS 문법을 그대로 사용할 수 있다.
TypeScript 장점
- 쉽게 오류 탐지
- 컴파일 시 정적 타입 체크
- 객체 지향 프로그래밍
- javascript와 100% 호환
- 특정 기능 및 파일에만 적용 가능
개발환경 구축
TypeScript 파일은 브라우저에서 동작하지 않으므로 타입스크립트 컴파일러를 이용해 자바스크립트 파일로 변환해야한다. 이를 컴파일 혹은 트랜스파일링이라 한다.
로컬에서 시작하기
$ npm i -g typescript
$ tsc -v
Version 4.7.2
트랜스파일링을 위해
$ tsc [${file_name} -t ${version}]
위와 같이 명령어를 실행할 수 있다.
file_name : 트랜스 파일링 대상
version : 트랜스 파일링을 통해 만들어질 js 파일의 버전
디폴트 버전은 ES3이며, ‘ES5’, ‘ES2015’, ‘ES2016’, ‘ES2017’, ‘ES2018’, ‘ES2019’, ‘ESNEXT’로 선택가능하다.
매번 옵션 지정을 하지 않도록 다음과 같이 tsc 옵션 설정 파일(tsconfig.json)을 생성할 수 있다.
$ tsc --init
message TS6071: Successfully created a tsconfig.json file.
단, tsc 명령어 뒤에 파일명을 지정하면 tsconfig.json이 무시되므로 주의한다.
파일명을 지정하지 않으면 프로젝트 폴더 내 모든 TypeScript 파일이 모두 트랜스파일링된다.
tsconfig.json
컴파일할 때마다 다양한 옵션을 반복 지정하는 것은 번거롭기에 tsconfig.json을 사용한다.
- TypeScript를 위한 프로젝트 단위의 환경 파일로써 컴파일 옵션과 컴파일 대상에 대한 설정 등을 기술한 것이다.
compilerOptions: 컴파일 옵션을 설정files: 컴파일 대상 파일을 지정. files 프로퍼티를 정의하였다면 include 프로퍼티는 무시된다.
컴파일 대상 파일의 상대 경로 혹은 절대 경로를 명시적으로 설정한다.include: 컴파일 대상 파일 리스트를 설정exclude: 컴파일 대상에서 제외할 파일 리스트를 설정allowJs: true로 설정 시 .js와 .jsx 파일도 컴파일 대상이 된다.
