VSCode TypeScript 프로젝트 생성하기

---

타입의 세계에 오신것을 환영합니다!

타입스크립트는 이른바 타입이 존재하는 자바스크립트라고 불리며, 

자바스크립트의 장점이자 단점이였던 지나치게 지나친 유연성을 엄격하게 강제하기 위해 만들어졌습니다.

타입검사가 없으니 잘못된 인자를 넘겨주는 경우가 부지기수였고, 

다른 사람이 작성한 코드라면 십중팔구죠.

function addTwoNumber(x, y){
  return x + y;
}

const num =  123 ;
const str = '456';
const ans = addTwoNumber(num, str); // '123456'

자바스크립트가 말하길...

동적타입에 고통받으신 여러분들을 위해,

안전한 타입스크립트의 세계로 안내해드리겠습니다.

---

준비물 챙기기

타입스크립트의 세계를 경험하기 위해서는, 먼저 준비물부터 챙겨야 합니다.

먼저 각 준비물을 클릭하여 설치하도록 합시다.

• 비주얼 스튜디오 코드
• 노드 JS

설치가 모두 끝났다면, 프로젝트를 저장할 폴더를 생성하고 VSCode로 연 뒤,

노드가 잘 설치되었는지 확인하기 위해 새 터미널(Ctrl+Shift+`)에서 다음과 같이 입력합니다.

node -v

다음에는 의존성 관리도구인 npm을 사용하기 위해 다음과 같이 입력합니다.

npm init -y

---

타입스크립트 설치하기

여기까지 잘 따라오셨다면, 타입스크립트를 설치하기 위한 준비는 끝났습니다.

이제 본격적으로 타입스크립트를 설치합니다.

다음과 같이 입력하여 타입스크립트를 글로벌로 설치합니다.

글로벌로 설치하면 다른 프로젝트에서도 타입스크립트 빌드 명령어를 사용할 수 있게됩니다.

npm install -global typescript

다음과 같이 입력하면 타입스크립트의 환경설정 파일인 tsconfig.json이 생성됩니다.

만약 tsconfig.json이 보이지 않는다면, 아래 사진처럼 Refresh 버튼을 눌러줍시다.

tsc --init

이 단계에서는 아래처럼 권한에러가 발생할 수 있습니다.

파워셀을 관리자권한으로 실행하여 다음과 같이 입력하면 해결됩니다.

<발생에러>

tsc : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Users\aerocode\AppData\Roaming\npm\tsc.ps1 파일을 로드할 
수 없습니다. 자세한 내용은 about_Execution_Policies(https://go.microsoft.com/fwlink/?LinkID=135170)를 참조하십
시오.
위치 줄:1 문자:1
+ tsc --init
+ ~~~
    + CategoryInfo          : 보안 오류: (:) [], PSSecurityException
    + FullyQualifiedErrorId : UnauthorizedAccess

<해결방법>

Set-ExecutionPolicy Unrestricted

다음으로 tsconfig.json을 열어서 다음 2개의 컴파일러 옵션을 수정합니다.

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

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

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

다음으로 아래의 코드를 복사하여 .vscode/launch.json으로 저장합니다.

이 프로젝트는 /src/index.ts 파일을 진입점으로 시작하며, 

"program" 속성값으로 진입점을 변경할 수 있습니다. 

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "program": "${workspaceFolder}/src/index.ts",
      "outFiles": ["${workspaceFolder}/**/*.js"]
    }
  ]
}

---

Hello, TypeScript!

다음 코드를 복사하여 /src/index.ts 경로에 붙여넣기합니다.

진입점을 변경했다면 해당 경로에 붙여넣습니다.

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

터미널에 tsc를 입력하면 rootDir에 있는 모든 타입스크립트 코드가 

자바스크립트 소스로 컴파일되어 outDir에 저장됩니다.

tsc

[F5] 버튼을 누르면 디버그 모드로 프로젝트를 시작합니다.

하지만 또 다른 에러가 저희를 반겨주는군요!

Cannot launch program '--full-path-to-project--/src/index.ts' because corresponding JavaScript cannot be found.

<에러원인>

에러 메시지를 해석해보면 index.ts에 해당하는 자바스크립트 파일이 없다! 라는 뜻인데,

노드가 ts파일과 js파일의 대응관계를 알 수 없기 때문에 발생한 에러입니다.

<해결방법>

tsconfig.json에서 "sourceMap" 옵션을 true로 설정합니다.

("sourceMap"은 ts파일과 js파일의 대응관계를 생성하여 map 확장자로 저장합니다.)

다시 tsc를 입력하여 컴파일을 진행한 뒤, 디버그 모드로 진입합니다.

---

컴파일 자동화

바뀐 소스코드를 실행하려면 매번 tsc를 입력하여 컴파일해주어야 하는데,

Build Task를 생성하면 코드가 변경될 때마다, 자동으로 tsc가 실행되게끔 할 수 있습니다.

먼저 아래 코드를 복사하여 .vscode/tasks.json 파일로 저장하고,

빌드 테스크 실행(Ctrl+Shift+B)을 눌러 tsc: watch-tsconfig을 클릭합니다.

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558 
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
        {
            "type": "typescript",
            "tsconfig": "tsconfig.json",
            "option": "watch",
            "problemMatcher": [
                "$tsc-watch"
            ],
            "group": "build"
        }
    ]
}

이제 소스코드가 변경될 때 마다, 알아서 tsc가 호출됩니다.

이제 가벼운 마음으로 타입스크립트를 배워봅시다!