[TS] TypeScript 기초 - 1

안녕하세요, Einere입니다.

(ADblock을 꺼주시면 감사하겠습니다.)

 

2020/01/24 - [programing/JavaScript] - [TS] TypeScript 기초 - 1

2020/01/25 - [programing/JavaScript] - [TS] TypeScript 기초 - 2

2020/01/26 - [programing/JavaScript] - [TS] TypeScript 기초 - 3

2020/01/28 - [programing/JavaScript] - [TS] TypeScript 기초 - 4

2020/01/31 - [programing/JavaScript] - [TS] TypeScript 기초 - 5

2020/02/01 - [programing/JavaScript] - [TS] TypeScript 기초 - 6

---

이번 포스트에서는 타입스크립트 핸드북을 간단하게 정리한 글입니다.

한글로 번역된 좋은 페이지도 있으므로, 글 하단에 링크 남겨두겠습니다.

 

 

TypeScript

타입스크립트는 프로그래밍 언어입니다.

타입스크립트는 Compiled Language라고 합니다. 그러나 전통적인 compiled language와는 다르기 때문에, transpiled language라고 부르기도 합니다. (TS는 링킹 과정도 없습니다.)

타입스크립트는 정적 타입 언어입니다.

TS는 컴파일을 통해 JS로 변환됩니다.

 

compiled vs interpreted

	Compiled	Interpreted
컴파일 필요성	필요함	필요없음
컴파일러 필요성	필요함	필요없음
컴파일 시점	컴파일 타임	없음
실행 대상	컴파일된 결과물	코드 자체
실행 시점	컴파일된 결과물을 실행할 때	런타임

 

정적 타입 언어 vs 동적 타입 언어

정적 타입 언어는 컴파일 타임때 자료형을 다 검사하며, 자료형을 명시해야 합니다. 따라서 코드의 안정성이 높지만, 생산성은 낮습니다.

동적 타입 언어는 런타임때 자료형을 유추하며, 자료형을 명시하지 않습니다. 따라서 생산성은 높지만 코드의 안정성이 낮습니다. 코드의 안정성을 높이기 위해 TDD를 이용합니다.

 

 

TS compiler

설치

NPM

// global install
npm i -g typescript

// local install
npm i typescript

// version check
tsc --version

 

컴파일

• cli 명령어로 컴파일
• npm 스크립트로 컴파일 (package.json 이용)
• 프로젝트 디렉토리에서 TS 컴파일러 설정에 맞춰 컴파일
• 프로젝트 디렉토리에서 TS 컴파일러 설정에 맞춰 컴파일 (watch 모드)

tsconfig.json이 있다면 tsc만으로도 컴파일이 가능하다.

 

초기화

tsc --init

tsconfig.json파일을 생성합니다.

 

설정

https://www.typescriptlang.org/docs/handbook/tsconfig-json.html

https://www.typescriptlang.org/docs/handbook/compiler-options.html

http://json.schemastore.org/tsconfig

위 링크에 자세히 나와있습니다.

 

 

TSLint

설치

npm i tslint -D

TSLint는 2019년에 폐기되고, ESLint로 마이그레이션 한다고 합니다. (참고 링크 : https://github.com/palantir/tslint/issues/4534)

따라서 ESLint를 설치하는 것을 권장드립니다.

 

ESLint

설치

npm install eslint --save-dev

 

초기화

npx eslint --init

cli를 통해 여러가지 질문을 하며, 적절하게 대답을 하면 ESLint 설정 파일을 생성합니다.

 

검증

npx eslint yourfile.js

 

WebStorm에서 사용하기

https://github.com/idok/eslint-plugin

위 링크를 참고하세요.

 

 

참고

https://typescript-kr.github.io/

TypeScript 한글 문서