04 개발환경 설정

1.타입스크립트의 이해

1.1. 정의

자바스크립트에 타입(type)을 추가한 확장 언어로 새로운 언어가 아니다.

1.2. 설치

https://www.typescriptlang.org/ko/download/ 웹브라우저는 자바스크립트 만을 해석할수 있으므로 타입스크립트로 개발후 자바스크립트로 변환(compile) 해야 한다. 다양한 방법중 NodeJs를 사용하도록 한다.

1.2.1. 프로젝트 환경설정

빈 폴더 생성 후 vscode로 열기
터미널 창에 아래의 명령어 실행

1
// 타입스크립트 설치 로컬/전역중 택일
2
  //// 로컬
3
  npm install typescript --save-dev
4
  //// 전역
5
  npm install -g typescript
6

7
//타입스크립트 옵션보기
8
npx tsc
9

10
// 타입스크립트로 초기화
11
npx tsc --init

1.2.1.1. Window 에서 PSSecurityException 에러 발생

타입스크립트 설치 단계에서 위와 같은 오류가 났을 경우 아래 두가지 방법중 하나를 선택하여 해결한다.

Vscode 터미널을 Gitbash 로 열고 프로젝트 폴더로 이동한 다음 install 한다.

🔗방법2

1.2.2. 타입스크립트작성

index.ts 파일생성

1
const a: number = 1;
2
console.log(a);

1.2.2. 컴파일

아래의 명령어 중 하나를 입력하면 컴파일이 수행된다.

1
npx tsc 경로|파일명
2
npx tsc --watch
3
npx tsc -w

아래의 명령어를 입력하면 결과가 출력된다

1
node index.js

1.3. tsconfig

타입스크립트 개발환경으로 초기화(npx tsc --init)한 프로젝트 폴더에는 tsconig.json 파일이 생성된다 일반적으로 config 라는 키워드가 있으면 환경설정 값을 갖고 있는 것으로 이해하자. tsconfig.json 은 ts(타입스크립트)config(환경설정).json(제이슨형식) 이라고 읽을수 있으며 이 파일은 아래의 내용을 저장하고 있다.
tsconig.json

1
{
2
  "compilerOptions": {
3
    // 컴파일된 JavaScript 코드가 호환될 ECMAScript의 버전을 지정합니다.
4
    // 여기서는 ESNext 항상 최신버전으로 컴파일됩니다.
5
    "target": "ESNext",
6

7
    // 모듈 시스템을 지정합니다. CommonJS 모듈 시스템은 Node.js에서 사용되는 표준입니다.
8
    // 컴파일된 코드는 CommonJS 모듈 형식을 따릅니다.
9
    "module": "commonjs",
10

11
    // 컴파일된 JavaScript 파일이 출력될 디렉토리를 지정합니다.
12
    // 여기서는 `./dist` 디렉토리에 컴파일된 파일이 저장됩니다.
13
    "outDir": "./dist",
14

15
    // CommonJS 모듈을 ES6 모듈처럼 사용할 수 있도록 추가적인 코드 변환을 수행합니다.
16
    // 주로 `import` 구문을 사용할 때 유용합니다.
17
    "esModuleInterop": true,
18

19
    // 파일 이름의 대소문자 일관성을 강제합니다.
20
    // 파일을 불러올 때 대소문자가 일치하지 않으면 오류를 발생시킵니다.
21
    // 이는 특히 대소문자를 구분하는 파일 시스템에서 유용합니다.
22
    "forceConsistentCasingInFileNames": true,
23

24
    // 엄격한 타입 검사를 활성화합니다.
25
    // 여러 가지 타입 검사 옵션을 포함하여 더욱 엄격한 타입 체크를 수행합니다.
26
    "strict": true,
27

28
    // .d.ts 파일의 타입 검사를 건너뜁니다.
29
    // 이는 컴파일 속도를 높이기 위해 유용합니다.
30
    "skipLibCheck": true
31
  },
32

33
  // 컴파일 대상 파일을 지정합니다.
34
  // 여기서는 `src` 디렉토리 아래의 모든 `.ts` 파일을 포함합니다.
35
  "include": ["src/**/*.ts"],
36

37
  // 컴파일에서 제외할 파일을 지정합니다.
38
  // 여기서는 `node_modules` 디렉토리를 제외합니다.
39
  "exclude": ["node_modules"]
40
}

따옴표 사이의 값을 삭제후 단축키를 입력하면 suggest 목록이 나온다

1.4.IDE설정

아래 명령어 실행

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

1.4.1. Code Runner 설정

vsc 에서 setting을 열고 아래의 그림처럼 설정하세요

1
# setting
2
# code-runner.excutorMap 추가
3
"code-runner.clearPreviousOutput": true,
4

5
# 맥사용자의 경우
6
**"code-runner.executorMap": { "typescript": "node_modules/.bin/ts-node"},
7

8
**# 윈도우 사용자의 경우**
9
"code-runner.executorMap": { "typescript": "node -r ts-node/register" },**