[TypeScript] Webpack 환경에서 TypeScript 사용하기

들어가며

이 글은 Webpack을 사용해서 JavaScript를 기본적으로 구성한 이후라고 판단하여 작성합니다. 

 

필요 패키지 다운로드 

npm install --save-dev typescript @babel/preset-typescript

필요한 패키지는 타입스크립트를 사용하기 위한 typescript와

babel에서 읽기 위한 @babel/preset-typescript이다. 

 

초기 설정

먼저 프로젝트에서 사용할 tsconfig를 추가한다. 

./node_modules/typescript/bin/tsc --init

 

몇가지 옵션을 적어보자면, 

target 옵션 : 타입스크립트 파일을 어떤 버전의 자바스크립트로 변경할지 지정

                     es5로 세팅하면 es5 버전의 자바스크립트로 컴파일해준다. 

module 옵션 : 자바스크립트 파일간 import 문법을 구현할 때 어떤 문법을 쓸지 정한다. 

                       es6는 import 문법을 사용한다. commonjs는 require 문법을 사용한다. 

noImplicitAny 옵션 : any라는 타입이 의도치않게 발생하는 경우 에러를 띄워주는 옵션이다. 

strictNullChecks 옵션 : null, undefined 타입에 이상한 조작을 할 경우 에러를 띄우는 옵션 

allowJs : js 파일들을 ts에 import할 수 있는지 설정하는 옵션outDir : js 파일 아웃풋 경로 설정 

 

이제 바벨에 타입스크립트를 추가해준다. 

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": "> 0.25%, not dead",
        "useBuiltIns": "usage",
        "corejs": 3
      },
      "@babel/preset-typescript"
    ]
  ],

  // ...
}

@babel/preset-env 등 내용은 기존에 가지고 있던 설정이고, "@babe/preset-typescript"를 추가한다.

 

다음으로 webpack.config.js를 수정한다. 

const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  mode: "development",
  devtool: "source-map",
  entry: "./src/typescripts/main.ts",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "../server/public"),
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: "babel-loader",
        exclude: /node_modules/,
      },
      {
        test: /\.scss$/i,
        use: [
          MiniCssExtractPlugin.loader,
          { loader: "css-loader", options: { url: false } },
          "sass-loader",
        ],
      },
    ],
  },

  // ...
};

다른 설정은 굳이 신경 쓸 필요는 없고, entry 부분에서의 ts 경로

그리고 rules의 test 부분을 .ts로 설정한다.