윈도우에서 타입스크립트(typescript)와 Code Runner 설정하기

**타입스크립트(TypeScript)**를 VSCode에서 사용하는 방법과, 윈도우 사용자들을 위한 설정 변경 방법을 알아볼게.

타입스크립트는 자바스크립트의 슈퍼셋으로, 정적 타입 검사를 추가해서 코드의 품질을 높여주는 언어야. 그럼 시작해볼까?

---

설치

타입스크립트를 사용하려면 먼저 타입스크립트와 관련 패키지를 설치해야 해. 터미널에서 아래 명령어를 입력해줘.

> npm i typescript
> npx tsc -v  # 버전 확인

> npm i ts-node
> npx ts-node -v # 버전 확인

🤚🏻npm은 뭐고 npx는 뭐에요?

 

• npm: 패키지를 설치하고 관리하는 도구.
  • 예: npm install 패키지이름 (패키지 설치)
• npx: 패키지를 실행하는 도구, 패키지를 설치하지 않고도 일회성으로 실행 가능.
  • 예: npx 패키지이름 (패키지 실행)

 

위 명령어로 타입스크립트와 ts-node를 설치할 수 있어. ts-node는 타입스크립트 파일을 직접 실행할 수 있게 해주는 도구야.

 

Code Runner 설정

VSCode에서 타입스크립트 코드를 쉽게 실행하려면 Code Runner 확장을 사용할 수 있어. 먼저 VSCode에 Code Runner를 설치하고, 설정 파일을 수정해보자.

extention에서 coderunner를 검색하면 돼.

 

그 후 설정을 하기 위해서

VSCode 설정 파일인 settings.json을 열고 아래 내용을 추가해줘.

우측 상단

그리고 다음의 코드로 교체해줘.

{
  "editor.unicodeHighlight.nonBasicASCII": false,
  "security.workspace.trust.untrustedFiles": "open",
  "editor.minimap.enabled": false,
  "git.autofetch": true,
  "editor.tabSize": 2,
  "github.copilot.chat.welcomeMessage": "never",
  "settingsSync.ignoredSettings": ["github.gitAuthentication"],
  "workbench.settings.applyToAllProfiles": ["github.gitAuthentication"],
  "javascript.updateImportsOnFileMove.enabled": "always",
  "github.copilot.editor.enableAutoCompletions": true,
  "workbench.iconTheme": "material-icon-theme",
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "code-runner.clearPreviousOutput": true,
  "code-runner.executorMap": {
    "typescript": "node -r ts-node/register"
  },
  "github.copilot.chat.localeOverride": "ko",
  "github.copilot.editor.enableCodeActions": false,
  "prettier.arrowParens": "avoid"
}

이 설정은 ts-node를 등록 모드로 실행해서 타입스크립트 파일을 실행하도록 해. 이렇게 하면 윈도우 환경에서도 문제없이 타입스크립트 코드를 실행할 수 있어.

앞으로 타입스크립트를 Crtl+Alt+n 을 이용해서 바로 실행할 수 있어.

---

간단한 타입스크립트 코드 작성해보기

이제 간단한 타입스크립트 코드를 작성해보고 실행해보자. hello.ts 파일을 만들어 아래와 같이 작성해봐.

const greeting: string = "Hello, TypeScript!";
console.log(greeting);