타입스크립트란 ?

타입스크립트는 Microsoft에서 만들어졌습니다. 바닐라 자바스크립트 Superset(상위 호환)으로 생각하면 편합니다.

타입스크립트 왜 쓸까 ?

C#과 Java같은 c계열 언어들에서 사용하는 강한 타입 시스템은 런타임이 아닌 컴파일 환경에서 에러가 발생해 치명적인 오류를 보다 빠르게 잡아낼 수 있습니다.

반대로 자바스크립트는 타입 시스템이 없는 동적 타입 언어입니다. 자바스크립트 변수는 문자열, 숫자, 불리언, 등 여러 타입의 값을 가질 수 있습니다. 이를 약한 타입언어라고 하며 비교적 유연하게 개발할 수 있는 환경을 만듭니다. 하지만 런타임 환경에서 쉽게 에러가 발생할 수 있는 단점을 가지고 있습니다.

타입스크립트 기능

• 크로스 플랫폼 지원: 자바스크립트가 실행되는 모든 플랫폼에서 사용할 수 있습니다.

• 객체 지향 언어 : 클래스, 인터페이스, 모듈 등의 기능을 제공하고 순수 객체 지향 코드를 사용할 수 있습니다.

• 정적 타입 : 정적 타입을 사용하기 때문에 코드를 입력할 때 오류를 해결할 수 있습니다.

• DOM 제어 : 자바스크립트와 같이 DOM을 제어해 추가, 삭제할 수 있습니다.

• Es6 기능 지원

타입스크립트 시작하기

자바스크립트는 .js 확장자를 가진 파일로 작성하는 것 처럼 타입스크립트는 .ts 확장자를 가진 파일로 작성합니다. .ts파일에서 작성 후 자바스크립트 파일로 컴파일하여 사용하게 됩니다.

컴파일러 설치

tsc 명령을 사용하기 위해서 타입스크립트를 전역 설치할 수 있습니다.
npm install -g typescript
tsc --version
tsc ./src/index.ts

단일, 프로젝트에서만 사용하길 희망한다면
npm install -D typescript
npx tsc --version
npx tsc ./src/index.ts

컴파일 설정하기

tsconfig.json 파일을 만듭니다.

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

터미널 창에서 입력
tsc --watch

타입스크립트 연습환경

1. 타입스크립트 공식 페이지

타입스크립트는 공식 페이지에서 Repl를 제공하고 있습니다.
별도의 설정 없이 브라우저에서 바로 typescript가 어떻게 컴파일 되는지 확인할 수 있습니다.

https://www.typescriptlang.org/play/index.html

2. Repl.it

파일과 디렉토리만으로 쉽게 타입스크립트 프로젝트를 쉽게 구성할 수 있습니다.
가벼운 프로젝트를 테스트하기 좋습니다.

3. Parcel

로컬 환경에서 빠르게 테스트하고 싶다면 Parcel 번들러를 사용하는게 좋습니다.

터미널에서 다음과 같이 입력
mkdir typescript-test
cd typescript-test
npm init -y
npm install -D typescript parcel-bundler

tsconfig.json 파일을 생성하고 원하는 옵션을 추가합니다.
예시

{
  "compileOptions": {
    "strict": true
  },
  "exclude": [
    "node_modules"
  ]
},
  

4. TS Node

TS Node는 NodeJS환경에서 테스트할 수 있습니다.

mkdir typescript-test
cd typescript-test
npm init -y
npm install -D typescript @types/node ts-node

tsconfig.json예시

{
  "compileOptions":{
  	"strict": true,
     "module": "CommonJS"
  },
  "exclude": [
    "node_modules"
   ]
}  

터미널에서 확인

npx ts-node main.js

참고 자료

타입스크립트 공식문서 : https://www.typescriptlang.org/
HEROPY Tech : https://heropy.blog/2020/01/27/typescript/