TypeScript 초기설정

TypeScript 설치

npm install -g typescript

• package.json 파일에 "build": "tsc" or "npx tsc"를 작성

{
  "name": "typescript-in",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "socket.io": "^4.5.1",
    "ts-node": "^8.4.1",
    "typescript": "^4.6.4"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "tsc"
  },
  "author": "",
  "license": "ISC"
}

---

TypeScript 설정파일

• tsconfig.json 파일을 직접 만들어준다.
• npx tsc --init을 입력하면 tsconfig.json 파일이 자동 생성된다.
  • 안에 속성도 자동 생성

{
	"compilerOptions": {
		"target": "es6",
		"module": "commonjs",
		"strict": true,
		"esModuleInterop": true
	}
}

설정파일 속성

• target
  • 컴파일된 코드가 어떤 환경에서 실행될지 정의
  • 화살표 함수를 사용하고 target를 es5로 한다면 일반 function 키워드를 사용하는 함수를 변환해준다.
  • es6로 설정한다면 화살표 함수를 그대로 유지
• module
  • 컴파일된 코드가 어떤 모듈 시스템을 사용할지 정의
  • common으로 하면 export default Sample을 하게 됐을 때 컴파일 된 코드에서는 exports.default = text 로 변환
  • es2015로 하면 esport default Sample을 그대로 유지
• strict
  • 모든 타입 체킹 옵션을 활성화한다는 것을 의미
• esModuleInterop
  • commonjs 모듈 형태로 이루어진 파일을 es2015 모듈 형태로 불러올 수 있게 해준다.
  • 참고: https://stackoverflow.com/questions/56238356/understanding-esmoduleinterop-in-tsconfig-file

Understanding esModuleInterop in tsconfig file

• outDir
  • 컴파일된 파일들이 저장되는 경로를 지정할 수 있다.

{
	"compilerOptions": {
		"target": "es6",
		"module": "commonjs",
		"strict": true,
		"esModuleInterop": true,
		"outDir": "./dist"
	}
}

---

• .ts 파일을 만들어 준 다음 npm run build 입력
• .ts 파일이 .js 파일로 컴파일된다.