Typescript 입문 (typescript란?, 설치, 사용법, 학습자료)

1. 타입스크립트란?

typescript 깃허브 : https://github.com/microsoft/TypeScript

• typescript란? 마이크로소프트에서 mono repo 생산성 개선 목적으로 만든 javascript의 상위 호환 언어
• Javascript 할 수 있는거 다 할 수 있는데 부가적인 기능 제공
  • typescript로 작성하면 javascript로 변환(컴파일 === transfile)해서 실행한다. 모든 TS 파일은 JS 파일이기도 하다.
  • 타입 검사 제공
    • 작성하면서 Error 미리 잡아줌 (모든 자바스크립트 버그의 15%가 사전에 타입스크립트로 감지할 수 있다고 한다)
  • typescript에서만 제공하는 추가 문법 제공 JS를 OOP적으로 짤 수 있게 도움 
    • 인터페이스, 상속, 모듈 등과 같은 객체 지향 프로그래밍 패턴 제공
    • C# 개발자가 만들었다. 즉 타입이 있으면 얼마나 좋은지 필요성 느낀 OOP 전문가가 만든 언어다.
  • vscode에서 플러그인, 메서드 추천과 같은 부가 기능 제공
• 대규모 애플리케이션을 위한 언어 (작은 규모면 그냥 Javascript 사용하자. 코드양 늘어나고 설정, 컴파일 등등 추가 되는 이유)

[참고 출처]

• 달달한 타입스크립트, 사용 이유
• 무서워하지 말아요. 타입스크립트

2. 타입 스크립트 설치

2.1. typescript 설치

• (nvm 통한 node, npm 설치 선행 필요 ->  https://yeoon.tistory.com/101 )
• typescript 설치하기

$ npm install -g typescript
$ tsc --version # 설치 확인
$ tsc --help # 명령어 확인 

2.2. typescript 도구 설치

• ts-node 설치
  • 컴파일 없이 ts 파일 바로 실행해주는 도구
  • https://github.com/TypeStrong/ts-node

$ npm i -g ts-node

• @types/node 설치
  • Node.js에서 typescript 사용할때 type definitions을 추가해주는 라이브러리
  • 외부라이브러리를 불러올때 기본적으로 타입 없으면, 추가해주는 역할?
  • https://www.npmjs.com/package/@types/node

npm i -g @types/node

2.3 설치한 typescript 사용 방법

• 명령어로 tsconfig.json 생성
  • 타입스크립트가 자바스크립트로 컴파일 될 때 필요한 옵션을 지정
  • 더 많은 옵션은 공식 문서 참고 ((https://www.staging-typescript.org/tsconfig))

$ tsc --init # tsconfig 파일 생성

• tsconfig.json 파일

{
  "compilerOptions": {
    "target": "es5", // 컴파일된 코드가 어떤 환경에서 실행될 지 정의합니다
    "module": "commonjs", // 파일된 코드가 어던 모듈 시스템을 사용할지 정의합니다. commonjs는 디폴트
    "strict": true, // 모든 타입 체킹 옵션을 활성화한다는 것을 의미합니다.
    "esModuleInterop": true, // commonjs 모듈 형태로 이루어진 파일을 es2015 모듈 형태로 불러올 수 있게 해줍니다.
		"outDir": "./{경로}" // [옵션값]컴파일된 파일들이 저장되는 경로를 지정 할 수 있습니다. 
  }
}

• Ts파일 컴파일, 실행하기

$ tsc # 전체 파일 ts -> js로 컴파일하기
$ tsc {파일명.ts} # 특정 파일만 컴파일 하기
$ node {/위치/파일명.js} # 컴파일된 js node로 실행하기

$ ts-node {파일명.ts} # 2.2에서 설치한 ts-node로 컴파일-실행 한번에 하기

• 컴파일, 실행 자동화 하기

$ tsc --watch {파일명.js}
$ nodemon {파일명.js}

$ nodemon --exec 'node -r ts-node/register' index.ts

3.1 TypeScript 학습자료

• 타입스크립트 8 best practice
• 벨로퍼트 님의 타입스크립트 기초 연습
• 마이크로소프트-learn-typescript
• TypeScript Handbook [번역]
• TypeScript: 인터페이스(Interface)
• TypeScript와 함께하는 Fullstack Development
• TypeScript Deep Dive [영문]
• 타입스크립트를 위한 클린코드 - 한글번역판
• 자바스크립트 개발자를 위한 타입스크립트
• TypeScript 4.0 릴리즈 노트 [번역]
• TypeScript 개발자의 TypeScript 3.4 인터뷰