📌 목차

✨ 한 눈에 보는 타입스크립트

💁🏻

Intro
타입스크립트 개요
개발환경
타입 기본(Types)
인터페이스 (Interface)
타입 별칭 (Type Aliases)
제네릭 (Generic)
함수
클래스
Optional
모듈
TS 유틸리티 타입
참고 자료 (References)

타입스크립트 개요

타입스크립트란?

Microsoft에서 개발하고 유지/관리하는 Apache 라이센스가 부여된 오픈소스.

왜 타입스크립트를 써야 할까?

높은 가독성과 코드 품질을 제공할 수 있고
런타임이 아닌 컴파일 환경에서 에러가 발생해 치명적인 오류를 쉽게 잡아낼 수 있다.

타입스크립트 사용법

.ts확장자를 가진 파일로 작성 가능
작성 후 타입스크립트 컴파일러를 통해 파일로 컴파일하여 사용함

$ tsc sample.ts
# compiled to `sample.js`

타입스크립트의 기능

크로스 플랫폼 지원 : 자바스크립트가 실행되는 모든 플랫폼에서 쓸 수 있다.
객체 지향 언어 : 클래스,인터페이스,모듈 등 강력한 기능을 제공하고, 순수한 객체 지향 코드를 작성할 수 있다.
정적 타입: 정적 타입을 사용하기 때문에 코드를 입력하는 동안 오류 체크 가능(단, 에디터 혹은 플러그인의 도움 필요)
DOM 제어 : 자바스크립트와 같이 DOM을 제어해 요소를 추가하거나 삭제할 수 있다.
최신 ECMAScript 기능 지원 : ES6 이상의 최신 자바스크립트 문법을 지원한다.

개발환경

VSCode와 WebStorm

두 에디터에는 타입스크립트 지원 기능이 내장되어 별도의 설정 없이 타입스크립트 파일을
(.ts,tsconfig.json 등)인식할 수 있고 코드 검사, 빠른 수정, 실행 및 디버깅 등의
다양한 기능을 바로 사용할 수 있다.
단, 컴파일러는 포함되어 있지 않기 때문에 별도로 설치해야 함
(E.g npm install typescript)

컴파일러 설치

tsc명령어를 사용하려면 타입스크립트를 전역 설치 해야함.

$ npm install -g typescript
$ tsc --version
$ tsc ./src/index.ts

단일 프로젝트에서만 사용하면 일반 지역 설치 후 npx tsc명령으로 실행

$ npm install -D typescript
$ npx tsc --version
$ npx tsc ./src/index.ts

컴파일러 옵션 타입스크립트 컴파일을 위해 다양한 옵션을 지정할 수 있다.

$ tsc ./src/index.ts --watch --strict true --target ES6 --lib ES2015,DOM --module CommonJS

위처럼 터미널에 명령어를 실행하거나 혹은 아래처럼 tsconfig.json 파일로 옵션을 관리할 수 있다.
includ와 excloud옵션을 같이 추가해, 컴파일에 포함할 경로와 제외할 경로를 설정할 수 있다.

{
  "compilerOptions": {
    "strict": true,
    "target": "ES6",
    "lib": ["ES2015", "DOM"],
    "module": "CommonJS"
  },
  "include": ["src/**/*.ts"],
  "exclude": ["node_modules"]
}

$ tsc --watch

Typescript Playground

https://www.typescript.org/play/index.html 타입스크립트 공식사이트에서 제공하는 REPL로, 작성한 내용이 컴파일러 옵션에 따라
어떻게 자바스크립트로 변환되는지 바로 확인할 수 있다.

Repl.it

https://repl.it/languages/typescript 파일과 디렉터리로 관리되는 타입스크립트 프로젝트를 손쉽게 구성할 수 있다.
간단한 프로젝트로 타입스크립트를 테스트하기 좋다.

Parcel

타입스크립트를 로컬 환경에서 빠르게 테스트할 때 쓰기 좋은 번들러.

TS Node

NodeJS 환경에서 테스트할 때 사용하는 실행 환경