[TypeScript] 타입스크립트 설치 및 VSCode Code Runner설정

 

 

• 타입스크립트(TypeScript) 란?
• 타입스크립트(TypeScript) 시작하기
• 타입스크립트 with VSCode

---

- 타입스크립트( TypeScript )란?

 

타입스크립트는 별도의 새로운 언어가 아닌, 자바스크립트에 타입(type)을 추가한 확장 언어이다.

 

새로 배우는 언어는 아니기 때문에 학습 난이도는 높지 않은 편이지만, 복잡하긴 하다...ㅎㅎ

 

---

- 타입스크립트( Typescript ) 시작하기

 

타입스크립트로 작성된 코드를 실행하려면?

 

=> 타입스크립트 코드를 자바스크립트 코드로 변환해주는 작업이 필요하다.

 

이러한 변환 작업을 컴파일(compile)이라고 한다.

 

저는 Node.js를 이용하는 방법으로 진행하고자 합니다.

 

 

Step1.

실습에 사용한 폴더를 하나 생성하여 Visual Studio Code로 열어준다.

 

 

Step2.

Visual Studio Code의 가장 루트 폴더 경로 내에서 npm 초기화를 진행한다.

 npm init -y // 기본 값으로 npm 초기화
 npm install typescript --save-dev // 개발모드로 설치
 node ./node_modules/typescript/bin/tsc --init  # 타입스크립트 초기화

 

 

Step3.

아래와 같은 명령어로 타입스크립트 파일을 자바스크립트 파일로 변환할 수 있다.

node ./node_modules/typescript/bin/tsc index.ts

 

 

+ tsconfig.json 수정

 

이후 tsconfig.json을 변경한다.

{
  "compilerOptions": {
    // 컴파일된 JavaScript 코드가 호환될 ECMAScript의 버전을 지정합니다.
    // 여기서는 ECMAScript 2016 (ES7) 버전으로 컴파일됩니다.
    "target": "es2016",
    
    // 모듈 시스템을 지정합니다. CommonJS 모듈 시스템은 Node.js에서 사용되는 표준입니다.
    // 컴파일된 코드는 CommonJS 모듈 형식을 따릅니다.
    "module": "commonjs",
    
    // 컴파일된 JavaScript 파일이 출력될 디렉토리를 지정합니다.
    // 여기서는 `./dist` 디렉토리에 컴파일된 파일이 저장됩니다.
    "outDir": "./dist",
    
    // CommonJS 모듈을 ES6 모듈처럼 사용할 수 있도록 추가적인 코드 변환을 수행합니다.
    // 주로 `import` 구문을 사용할 때 유용합니다.
    "esModuleInterop": true,
    
    // 파일 이름의 대소문자 일관성을 강제합니다.
    // 파일을 불러올 때 대소문자가 일치하지 않으면 오류를 발생시킵니다.
    // 이는 특히 대소문자를 구분하는 파일 시스템에서 유용합니다.
    "forceConsistentCasingInFileNames": true,
    
    // 엄격한 타입 검사를 활성화합니다.
    // 여러 가지 타입 검사 옵션을 포함하여 더욱 엄격한 타입 체크를 수행합니다.
    "strict": true,
    
    // .d.ts 파일의 타입 검사를 건너뜁니다.
    // 이는 컴파일 속도를 높이기 위해 유용합니다.
    "skipLibCheck": true
  },
  
  // 컴파일 대상 파일을 지정합니다.
  // 여기서는 `src` 디렉토리 아래의 모든 `.ts` 파일을 포함합니다.
  "include": ["src/**/*.ts"],
  
  // 컴파일에서 제외할 파일을 지정합니다.
  // 여기서는 `node_modules` 디렉토리를 제외합니다.
  "exclude": ["node_modules"]
}

 

---

- 타입스크립트 with VSCode

 

Step1. 타입스크립트 설치

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

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

 

 

Step2. Code Runner 사용하기

 

Code Runner를 사용해 타입스크립트를 쉽게 실행해 볼 수 있다.

 

이를 사용하기 위해선 settings.json을 바꾸어야 한다.

 

Ctrl + "," 단축키를 사용한 후, 아래의 노란 박스에 있는 이미지를 클릭하고, settings.json을 수정한다.

 

 

Step3. settings.json 수정

 

Mac과 Window가 추가해야할 내용이 다르다.

 

아래의 내용을 추가하고 settings.json을 닫으면, Code Runner를 통해 타입스크립트를 실행 가능하다.

# code-runner.excutorMap 추가

# 1. Mac이면 아래의 코드 추가
"code-runner.clearPreviousOutput": true,
"code-runner.executorMap": {
  "typescript": "node_modules/.bin/ts-node"
},

# 2. Window면 아래의 코드 추가
"code-runner.clearPreviousOutput": true,
"code-runner.executorMap": { "typescript": "node -r ts-node/register" }

 

---

참고 강의: https://www.sucoding.kr/