개발환경-설정

목차

1.타입스크립트의 이해

🔗공식홈

1.1. 정의

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

1.2. 설치

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

1.2.1. 프로젝트 환경설정

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

// 타입스크립트 설치 로컬/전역중 택일
	//// 로컬
	npm install typescript --save-dev
	//// 전역 
	npm install -g typescript

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

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

1.2.1.1. Window 에서 PSSecurityException 에러 발생

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

**방법1**

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

🔗방법2

1.2.2. 타입스크립트작성

index.ts 파일생성

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

1.2.2. 컴파일

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

npx tsc 경로|파일명
npx tsc --watch
npx tsc -w

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

node index.js

1.3. tsconfig

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

{
  "compilerOptions": {
    // 컴파일된 JavaScript 코드가 호환될 ECMAScript의 버전을 지정합니다.
    // 여기서는 ESNext 항상 최신버전으로 컴파일됩니다.
    "target": "ESNext",
    
    // 모듈 시스템을 지정합니다. 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"]
}

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

1.4.IDE설정

1. 아래 명령어 실행

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

1.4.1. Code Runner 설정

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

# setting
# code-runner.excutorMap 추가
"code-runner.clearPreviousOutput": true,

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

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

경고:

작업폴더를 VSCode 에서 루트로 열어야 컴파일이 잘된다!!!