[Typescript] 타입스크립트를 사용하는 이유, 프로젝트 셋팅하기

강의를 들으면서 README 파일에 내용을 기록했으나, 잠깐 vue를 체험하고 오는 사이 낯설어져서 다시 해보는 복습 정리.

 

 

 

Why Typescript?

자바스크립트 만으로는 코드의 의도를 명확히 반영할 수 없다.

function add (a, b) {
  return a + b
}

add('10', '20')

위 코드를 자바스크립트로 실행하는 경우, 

의도는 30을 받는 것이었겠지만, 의도와 다른 데이터 타입(string)을 파라미터로 받았기 때문에 1020이라는 값을 받게된다.

 

이렇게 자바스크립트는 의도치 않은 오류를 발생시키기도 하고,

다 실행되고나서야 잘못된 지점이나 에러를 보여주기때문에 런타임에러(사용자가 만나는 에러)를 발생시킨다는 문제가 있다.

타입스크립트를 활용하면 이런 문제점을 보완할 수 있다.

타입스크립트는 코드의 목적을 명시해 작성하며, 작성 단계에서 오류를 미리 보여주기 때문에 발생할 수 있는 버그를 사전에 차단한다.

 

 

 

Typescript 작동 방식

타입스크립트는 자바스크립트로 컴파일되어 작동한다.

타입스크립트에서 에러가 나면 자바스크립트로 컴파일 되지 않으므로, 안정성을 확보할 수 있다.

 

보통 타입스크립트만을 셋팅해서 사용할 일은 거의 없고, 리액트나 뷰 등에서 타입스크립트를 설정해 사용한다.

하지만 타입스크립트 만으로는 어떻게 셋팅할 수 있는지 ARABOZA.

 

 

 

Typescript 프로젝트 셋팅하기

1. node는 당연히 깔려 있어야 한다.

2. 원하는 디렉토리에 새로운 node.js 프로젝트를 생성한다. npm init -y

( 생성된 package.json에서 main과 test script는 삭제한다. )

3. npm을 사용하여 디렉토리에 typescript를 설치한다. npm install -D typescript

4. src 폴더를 만들고, 그 안에 index.ts 파일을 만든다.

5. tsconfig.json 파일을 만든다.

(이 이름의 파일을 통해 코드 에디터가 이 프로젝트를 타입스크립트 프로젝트로 인식하고, 자동완성 기능을 제공한다.)

6. tsconfig.json에 몇가지 설정을 한다.

{
  "include": ["src"],
  // 타입스크립트가 src 폴더의 모든 파일을 확인한다는 것을 의미

  "compilerOptions": {
    "outDir": "build",
    // 자바스크립트 파일이 컴파일 될 디렉토리를 설정
    "target": "ES6",
    // 컴파일되는 자바스크립트의 버전을 설정
    "lib": ["es6", "DOM"],
    // 어떤 API를 사용하고 어떤 환경에서 코드를 실행할 것인지 설정
    // 브라우저에서 실행되는 프로그램이라면, DOM 유형을 정의해서 코드 작성 시 자동완성 기능을 활용할 수 있다.
    // TS는 declaration file을 가지고 있기 때문에 auto complete 기능을 사용할 수 있다.
    // declaration file은 node-module에 정의되어 있다. (.d.ts file)
    // 이것을 실제로 사용할 일은 거의 없지만, TS가 어떻게 localstorage등의 타입을 알고있는지 이해하기 위해 필요한 내용이다.
    "strict": true,
    // strict 모드를 활성화시키면 모든 실수로부터 코드를 보호한다.
    "allowJs": true
    // 타입을 정의한 JS파일을 직접 임포트 해와서 사용하기 위한 설정
  }
}

7. package.json에 script를 추가한다.

  "scripts": {
    "build": "tsc"
  },

8. 이제 ts 파일에 코드를 작성하고 npm run build 를 실행하면 자바스크립트 파일로 컴파일된다.

 

9. 하지만 매번 TS코드를 컴파일시켜 실행하는것은 효율적이지 못하기 때문에 npm i -D ts-node 로 ts-node를 설치해준다.

ts-node는 사전 컴파일 없이 Node.js에서 Typescript를 직접 실행할 수 있도록 한다.

npm i nodemon을 함께 설치하면 코드를 변경할때마다 서버를 자동으로 재시작 시켜준다.

 

10. package.json 파일에 아래와 같이 추가해주고, npm run dev 를 통해 코드를 실행시킨다.

  "scripts": {
    "build": "tsc",
    "dev": "nodemon --exec ts-node src/index.ts",
    "start": "node build/index.js"
  },