Archive

Typescript Day 01 - 개요 및 개발환경 구축

12 May 2021 | Typescript

Typescript Day 01 - 개요 및 개발환경 구축

What is Typescript ?

  • MS사가 개발하고 있던 오픈소스 프로그래밍 언어로 2012년 말 처음 발표
  • Javascript ES5, ES6을 모두 포함, Typescript 자체 문법도 있음
  • 대규모 SW 개발 시 타입 이슈를 해결하며 최근 각광받고 있음
  • babel처럼 TSC (TypeScript Compiler) 트렌스파일러에 의해 ES5 표준으로 변환


개발 환경 구축

  • 기본적으로 npm 패키지를 사용하므로 Node.js 설치는 필수!

  • npm i -g typescript 타입스크립트 컴파일러 설치
  • ts 파일을 만들고 터미널 명령어로 TSC를 실행시킬 수 있다
  • tsc fileName.ts 실행하면 변환된 js파일을 볼 수 있다
  • 이 js 파일을 node로 실행한다
  • ts-node 패키지는 컴파일과 실행을 동시에 할 수 있다
  • ts-node fileName.ts 명령어로 실행


프로젝트 생성

  • 타입스크립트 개발은 Node.js 프로젝트 생성 후, 개발 언어를 Typescript로 설정하는 방식
  • npm init으로 package.json 생성
  • -g 옵션으로 전역에 설치했지만, 다른 개발자를 위해 -D 옵션으로 devDependencies에 typescript 패키지와 ts-node 패키지를 추가한다
  • 타입스크립트는 웹 브라우저나 Node.js가 기본으로 제공하는 Promise 같은 타입을 알지 못하므로 추가적으로 @types/node 패키지를 설치한다
  • npm i -D @types/node
  • @types가 붙으면 typescript에서 돌아가는 패키지로 index.d.ts가 항상 들어있어, 패키지가 제공하는 함수를 검증한다
  • tsc --init으로 tsconfig.json 설정파일을 만든다
  • tsc 컴파일러는 컴파일 옵션과 대상 파일 목록 두 가지를 입력받는다
  • tsconfig.json에서 컴파일 옵션(compilerOptions)과 대상 파일 목록(include)을 작성한다
{
    "compilerOptions": {
    	"module": "commonjs",
        "esModuleInterop": true,
        "target": "es5",
        "moduleResolution": "node",
        "outDir": "dist",
        "baseUrl": ".",
        "sourceMap": true,
        "downlevelIteration": true,
        "noImplicitAny": false,
        "paths": {"*": ["node_modules/*"]}
    },
    "include": ["src/**/*", "src/index.ts"]
}

  • 자바스크립트 모듈은 웹 브라우저에서는 ASD (asynchronous module definition) 방식으로 작동하고

    Node.js와 같은 웹 브라우저 외의 환경에서는 CommonJS 방식으로 동작한다

    module 옵션은 동작 대상 플랫폼이 웹 브라우저인지 Node.js인지 구분해, 그에 맞는 모듈 방식으로 컴파일

    웹 브라우저에서의 동작은 amd 를 적는다

  • moduleResolution은 module 값이 commonjs일 경우엔 node로, amd면 classic을 적는다

  • target 옵션은 트랜스파일할 대상 자바스크립트 버전을 설정한다, es6 설정도 가능

  • baseUrl, outDir은 트랜스파일된 js파일을 저장할 디렉토리를 적는다. tsconfig.json를 기준으로 한 상대경로로 적는다. outDir은 baseUrl 기준으롤 하위 디렉토리의 이름이다

  • paths는 import 문의 from 해석 시 찾아야하는 디렉토리를 설정한다. 외부 패키지면 node_modules 디렉토리에서 찾아야하므로 위와 같이 적는다

  • esModuleInterop를 true로 설정하면 amd 방식으로 동작하는 패키지를 commonjs 환경에서 실행될 수 있도록 해준다

  • sourceMap 옵션이 true면 트랜스파일 디렉토리의 .js 이외에 .js.map 파일이 만들어져 ts와 js를 매핑해준다 소스맵 파일은 주로 디버깅시 사용

  • downlevelIteration를 true로 주어야 생성기(generator)가 정상적으로 동작한다

  • tsc는 기본적으로 타입을 명시하지 않으면 any 타입을 설정한 것으로 간주한다. noImplicitAny을 false로 주어 default를 사용하면 타입을 지정하지 않더라도 문제삼지 않는다

  • include의 src/**/*는 src 하위 디렉토리의 모든 파일을 컴파일 대상으로 포함한다는 의미


  • package.json의 scripts를 수정한다
"main": "src/index.js",
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "tsc && node dist",
    "dev": "ts-node src"
}

참고 자료

Do it 타입스크립트 프로그래밍

Related Posts