[TypeScript] VSCode에서 타입스크립트 실행하기

이번에는 REPL이 아닌 프로젝트를 생성하여 TypeScript를 적용해보려고 한다.

 

이전 포스팅에서 열심히 무언가를 했던 작업 폴더를 과감히 삭제했다. (사실 뭐 한 것도 없지만.)

 

다시 새로운 작업 폴더를 만들었다.

터미널을 열어서 아래 명령어를 입력한다.

>> npm init -y

 

그리고 타입 스크립트 설치를 위해 아래 명령어를 입력한다.

>> npm i typescript

 

타입 스크립트의 환경설정 파일 설치를 위해 아래 명령어도 입력한다.

>> tsc --init

 

이렇게 하면 tsconfig.json 파일까지 생성이 된 것이다.

혹시 tsconfig.json 파일이 보이지 않는다면, 새로고침을 누르면 된다.

 

root경로에 src폴더와 out폴더도 생성한다.

 

그리고 tsconfig.json 파일을 열어서 아래 내용을 추가한다.

(없으면 추가하고, 있으면 수정한다.)

나의 경우에는 주석처리가 되어 있었다.

{
	"compilerOptions": {
		"outDir": "./out",
		"rootDir": "./src"
	}
}

타입 스크립트 소스파일은 src 폴더에 있고,

컴파일 결과물(자바스크립트 소스파일)은 out 폴더에 저장하라는 의미이다.

 

그리고 .vscode/launch.json 파일을 생성하여 아래 코드를 추가한다.

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "program": "${workspaceFolder}/src/index.ts",
            "outFiles": ["${workspaceFolder}/**/*.js"]
        }
    ]
}

이 프로젝트는 /src/index.ts 파일을 진입점으로 시작하며, "program" 속성 값으로 진입점을 변경할 수 있다. 

 

이제 설정은 끝났으니, src폴더 내에 index.ts파일을 만들어보자.

그리고 아래 코드를 입력한다.

const hello: string = "Hello World!";
console.log(hello);

 

그리고 터미널에 tsc를 입력하니.. out 폴더에 index.js파일이 생겼다.

 

그리고 F5를 눌렀더니! 오류가 발생했다.

Missing initializer in const declaration

 

뭐냐 이건...

좀 찾아보니.. 소스파일을 javascript로 인식해서 그런 것 같다고 하는데.. 천천히 찾아봐야겠다.

vscode의 'Code Runner'라는 확장 프로그램을 설치하여 ts파일을 직접 run 시켰더니 정상적으로 출력된다.

 

마지막으로,

매번 tsc를 입력하여 컴파일을 할 수 없기 때문에, 컴파일을 자동으로 하는 옵션을 추가했다.

.vscode/tasks.json 파일 생성 후 아래 코드 입력한다.

{
    "version": "2.0.0",
    "tasks": [
        {
            "type": "typescript",
            "tsconfig": "tsconfig.json",
            "option": "watch",
            "problemMatcher": [
                "$tsc-watch"
            ],
            "group": "build"
        }
    ]
}

 

그리고 Ctrl+Shift+B를 누르면 감시 모드가 실행된다.

버전에 따라 tsc: watch-tsconfig을 클릭해야 할 수도 있다.

 

감시 모드가 실행되어 있는 상태에서 src 폴더 내에 ts파일을 생성하면 자동으로 out 폴더에 js파일이 생기는 것을 확인할 수 있다.

 

지금까지 타입 스크립트에 대한 개념과 사용방법을 간단히 공부해봤는데,, 아직은 좀 익숙하지가 않은 것 같다.

습관이 좀 되어야겠지만 Vue나 React 등 프로젝트를 진행할 때 처음에 타입 스크립트에 대한 설정을 미리 해두고 진행을 해야 할 것 같다.

---

참고: https://aerocode.net/303