타입스크립트(typescript) 설치 및 실행

타입스크립트 설치 이전에 node가 설치되어 있어야 합니다

node 설치 방법은 아래 글을 참고해주세요!!

https://hoho325.tistory.com/309

윈도우 node.js, npm 설치 방법

 

설치환경: windows 10
터미널: git bash

 

1. 폴더 생성

새 폴더를 아무 이름으로 생성합니다
저는 typeScript-exam으로 생성했습니다

 

2. 프로젝트 폴더 생성

npm init

위 명령어를 수행하고 엔터를 계속 치면
package.json 파일이 생성됩니다

 

3. typescript 설치

npm i typescript

install 대신 줄여서 i만 써도 설치를 진행할 수 있습니다.
컴퓨터에 전역으로 설치하고 싶다면 -g 옵션을 붙여주면 됩니다.
저는 해당 프로젝트에만 설치하려고 합니다.
그러면 package.json에 아래와 같이 등록 됩니다. 또한 node_modules 폴더가 생성되면서 설치 됩니다
이 파일만 있으면 npm i 명령을 통해 설치하여 프로젝트 환경을 꾸릴 수 있습니다

  "dependencies": {
    "typescript": "^4.3.5"
  }

 

4. ts-node 설치

typescript를 node에서 실행시킬 수 있는 런타임을 설치합니다

npm i ts-node --save-dev

그러면 ts-node가 ts를 js로 컴파일 하고 js를 실행시키도록 도와줍니다
그러면 package.json에 아래와 같이 추가되며 설치 됩니다

  "devDependencies": {
    "ts-node": "^10.0.0"
  }

 

5. tsconfig.json 생성

typescript 컴파일에 관한 설정 파일을 root 폴더 위치에 만들어 줍니다

{
    "compilerOptions": {
        "strict": true,
        "module": "commonjs",
        "moduleResolution": "node",
        "lib": ["es2015","es2016","es2017","es2018","es2019","es2020"],
        "target": "ES5",
        "outDir": "./dist",
        "esModuleInterop": true
    },
    "exclude": ["node_modules"],
    "include": ["src/**/*"]
}

옵션에 관한 자세한 내용은 생략

 

6. test 파일 작성

src 폴더를 생성하고 그 밑에 index.ts 파일을 만듭니다. 폴더 구조는 아래 참조!!!

console.log('Hello TypeScript!!')

만약 Cannot find name 'console'. 에러가 발생한다면 아래 명령어를 통해 설치를 진행합니다.
node typing을 위해서는 아래처럼 설치가 필요하다고 합니다
typescript를 하다보면 @types/Name의 형식으로 설치를 많이 하던데 이 부분은 더 살펴봐야 할 것 같습니다

 

npm i @types/node --save-dev

그러면 에러가 사라지게 됩니다

 

7. 실행

7.1 컴파일 후 node로 실행

아래 명령어를 통해 js로 변환합니다. typescript를 global로 설치하지 않았지만 npx를 통해 실행 가능합니다

npx tsc

그러면 dist 폴더 밑에 js 파일이 생성됩니다

 

이제 node 명령을 통해 컴파일된 js 파일을 실행합니다.

node dist/index.js

 

7.2 ts-node로 바로 실행

아까 설치한 ts-node를 이용해 바로 실행할 수 있습니다

npx ts-node src/index.ts

 

8. 자동화

package.json의 script에 작성하여 컴파일하고 실행을 한 번에 진행할 수 있습니다
아래와 start가 있는 줄을 추가합니다

  "scripts": {
    "start": "tsc && node dist/index.js"
  },

 

그리고 다음 명령어 실행하면 컴파일 후 바로 node로 실행!!

npm run start

 

이제 typescript를 구동할 기본 준비는 끝났습니다

typescript 열공 하세요!!