React 에 Typescript 적용하기(2)

이남수·2020년 2월 29일
0

세팅

//tsconfig.json
{
  "compilerOptions": {
    "strict": true,
    "lib": [
      "ES5", 
      "ES2015", 
      "ES2016", 
      "ES2017", 
      "DOM"],
    "jsx": "react"
  }
}

extensions : 허용할 파일 형태

entry : webpack으로 묶을 파일경로

output :

  • filename : [name].js 로 entry에 있는 파일을 묶음 ([name]은 entry의 app을 읽어 app.js로 변경)
  • path : 묶은 파일의 경로

rules : tsx 파일은 awesome-typescript-loader로 옛날 파일로 변경할것을 세팅

//webpack.config.js
const path = require('path');
const webpack = requrie('webpack');

module.exports = {
  mode: 'development',  //production
  devtool: 'eval',      //production으로 변경시 hidden-source-map
  resolve: {
    extensions: ['.jsx', '.js', '.tsx', '.ts']
  },

  entry: {
    app: './client'
  },
  module: {
    rules: [{
      test: /\.tsx?$/,
      loader: 'awesome-typescript-loader',
    }]
  },

  output: {
    filename: '[name].js',
    path: path.join(__dirname, 'dist')	// /dist/app.js에 생성
  }
}

React의 경우 commonJs로 만들어졌기때문에 다음과 같은 형식으로 import 해줘야한다.

//client.tsx
import * as React from 'react';
import * as ReactDom from 'react-dom';

d.ts 파일에서 commonJs 형식으로 되어있을 경우(ex: export = React;) 아래와 같은 써줘야한다.
만약 exports default가 선언이 되있는 경우
import React from 'react'; 로 import 가능하다.

profile
큘슈호윤

0개의 댓글