TS webpack 수동으로 작성하기

개요

Next.JS, Create-React-App로 TypeScript 프로젝트를 만들어주는 것은 라이브러리, 프레임워크, 패키지 등이 webpack 프로젝트를 대신 만들어주는 것이다. 때때로 직접 수동으로 webpack 프로젝트를 만들어야할 일이 생길 수도 있기때문에 수동으로 webpack을 구성하는 방법에 대해 알아보자.

수동으로 프로젝트 작성

프로젝트 생성 및 ts 설치

npm init -y

npm i -D typescript

D: devDependencies 설치하기 위한 명령어

• package.json을 확인해보면 devDependencies에 TypeScript 의존성이 생긴 걸 확인할 수 있다.

.json 구성하기

tsconfig.json

include : ts 파일이 위치한 경로를 알려주기 위함
compilerOptions : 컴파일 시 사용할 옵션

• outDir: 변환될 js 파일이 생성될 위치
• target: 컴파일 시 적용될 js 버전 설정 ex) ES6

lib: js가 실행될 환경에 대한 설정 ex) ES6 ver, DOM(Browser)

• DOM 설정을 하고 ts 파일에서 document를 입력하면 자동 완성이 되는 걸 확인할 수 있다.
• ts에서 기본적인 js 타입에 대해 type definition이 되어있다.

strict: 정의해놓은 코드에서 강하게 타입을 정의할 수 있고 추후에 일어날 수 있는 타입 정의에 대한 오류 대응하여 실수를 방지하게하는 옵션

package.json

scripts: npm run으로 실행할 명령어 지정 ex) npm run build

"scripts": {
    "build": "tsc"
  },