TypeScript 환경 설정

 

TypeScript 사용하기 위한 단계별 가이드

타입스크립트 프로젝트를 시작하기에 앞서, 타입스크립트를 사용할 수 있는 환경을 설정해야합니다.

이번 포스팅에서는 타입스크립트를 연습하기 위해 사용했던 타입스크립트 환경 설정 과정을 다뤄보겠습니다.

 

1. Node.js 설치

• Node.js 공식 웹사이트에서 LTS 버전을 다운로드하고 설치합니다.
• 설치 후 터미널에서 node -v와 npm -v 명령어로 설치를 확인합니다.

Node.js — Run JavaScript Everywhere

 

2. 프로젝트 초기화

• 새 디렉토리를 만들고 그 안에서 프로젝트를 초기화합니다:

mkdir ts-studyhard 
cd ts-studyhard 
npm init -y

 

3. TypeScript 설치

• TypeScript를 설치합니다:
  • 버전을 확인하는 방법 `npx tsc -v (로컬)`
  • `tsc -v (전역)`

npm i typescript (로컬) or npm install -g typescript (전역)

 

4. TypeScript 설정 파일 생성

• tsconfig.json 파일을 생성합니다:
  • 이 파일에서 컴파일러 옵션을 설정할 수 있습니다.

npx tsc --init (로컬) tsc --init (전역)

 

연습용으로 TypeScript를 사용한다면, 로컬 설치를 권장합니다. 로컬 설치를 하면 프로젝트마다 독립적으로 환경을 구성할 수 있습니다.

다만, 특정 이유로 전체 시스템에서 TypeScript를 간편하게 사용하고자 할 때는 전역 설치를 선택할 수 있습니다.

 

참고로, tsconfig.json파일은 다음과 같이 작성할 수도 있습니다. 내용을 추가할수록 작성이 좀 더 엄격해지는데, 저는 연습할때 다음과 같은 tsconfig.json을 사용하였습니다.

↓하단의 '더보기' 를 클릭하여 코드 내용 확인

{
	// tsc --init 명령어로 생성하면 전체 주석이 포함된 파일이 생성됩니다.
	// 필요한 옵션만 남기고 나머지는 삭제하셔도 됩니다.
	//
	"compilerOptions": {
		"target": "ES2020",
		// 컴파일된 JavaScript의 ECMAScript 버전을 지정합니다.
		// 'ES3'(기본값), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', 또는 'ESNEXT' 중 선택할 수 있습니다.

		"module": "ES2015",
		// 모듈 코드 생성 방식을 지정합니다.
		// 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', 또는 'ESNext' 중 선택할 수 있습니다.

		"outDir": "./dist",
		// 컴파일된 파일의 출력 디렉토리를 지정합니다.

		"rootDir": "./src",
		// 입력 파일의 루트 디렉토리를 지정합니다. --outDir과 함께 사용하여 출력 디렉토리 구조를 제어합니다.

		"removeComments": true,
		// 컴파일된 출력에서 주석을 제거합니다.

		"noEmitOnError": true,
		// 에러가 있을 경우 컴파일된 파일을 출력하지 않습니다.

		"strict": true,
		// 모든 엄격한 타입-체크 옵션을 활성화합니다.

		"noUnusedLocals": true,
		// 사용되지 않는 지역 변수에 대해 에러를 보고합니다.

		"noUnusedParameters": true,
		// 사용되지 않는 매개변수에 대해 에러를 보고합니다.

		"noImplicitReturns": true,
		// 함수의 모든 코드 경로가 값을 반환하지 않을 때 에러를 보고합니다.

		"noFallthroughCasesInSwitch": true,
		// switch문에서 fallthrough 케이스에 대해 에러를 보고합니다.

		"noUncheckedIndexedAccess": true,
		// 인덱스 시그니처 결과에 'undefined'를 포함합니다.

		"esModuleInterop": true,
		// CommonJS와 ES Modules 간의 상호 운용성을 가능하게 합니다.
		// 모든 가져오기에 대해 네임스페이스 객체 생성을 통해 CommonJS와 ES 모듈 간의 상호 운용성을 활성화합니다.
		// 'allowSyntheticDefaultImports'를 암시합니다.

		"forceConsistentCasingInFileNames": true
		// 파일 이름의 대소문자 일관성을 강제합니다.
		// 같은 파일에 대해 일관성 없는 참조를 허용하지 않습니다.
	},
    "lib": ["ES6", "DOM"] // ES6+DOM API 사용을 위한 표준 라이브러리를 포함합니다.
}

 

 

5. TypeScript 코드 작성

• .ts 확장자로 파일을 생성하고 TypeScript 코드를 작성합니다.
• 예: src/index.ts 파일 생성

 

6. TypeScript 컴파일

• TypeScript 코드를 JavaScript로 컴파일합니다:
  • 특정 파일만 컴파일하려면: `npx tsc src/index.ts`
  • Watch 모드로 TypeScript 파일의 변경을 감지 `npx tsc -w`
  • 변경된 파일을 자동으로 재 컴파일하여 JavaScript 파일 생성

npx tsc -w (로컬) or npx tsc (전역)

 

7. 컴파일된 JavaScript 실행

• Node.js를 사용하여 컴파일된 JavaScript 파일을 실행합니다:

node dist/index.js

 

8. npm 스크립트 설정 (선택사항)

• package.json 파일의 "scripts" 섹션에 유용한 명령어를 추가할 수 있습니다.

"scripts": { 
	"build": "tsc", 
    "start": "node dist/index.js", 
    "dev": "tsc -w" 
}