1. src 폴더에 components 폴더 생성

  2. typescript 설치

    npm install --save @types/react
    npm install --save @types/react-dom
    npm install --save-dev typescript
  3. typescript 설정 파일 추가
    root폴더에 tsconfig.json 생성 후 아래 코드 입력

    {
     "compilerOptions": {
         "outDir": "./dist/",
         "sourceMap": true,
         "noImplicitAny": true,
         "module": "commonjs",
         "target": "es5",
         "jsx": "react"
     },
     "include": [
         "./src/**/*"
     ]
    }
  1. components 폴더에 Hello.tsx 파일 생성
    아래코드 입력
    import * as React from "react";
    export interface HelloProps { compiler: string; framework: string; }
    // 'HelloProps'는 props의 형태을 만듭니다.
    // State가 설정되어 있지 않아 '{}'타입을 사용합니다.
    export class Hello extends React.Component<HelloProps, {}> {
     render() {
         return <h1>Hello from {this.props.compiler} and {this.props.framework}!</h1>;
     }
    }
  1. src폴더의 index.js의 확장자명을 .tsx로 변경
    변경 후, 아래 코드와 같이 Hello 컴포넌트 추가
    import * as React from "react";
    import * as ReactDOM from "react-dom";
    import { Hello } from "./components/Hello";
    ReactDOM.render(
     <Hello compiler="TypeScript" framework="React" />,
     document.getElementById("example")
    );
  1. babel 추가 설치 및 설정
    npm install --save @babel/preset-typescript
    .babelrc 파일에 아래 코드 추가
    {
     "presets": [
       "@babel/preset-env",
       "@babel/preset-react",
       "@babel/preset-typescript" // <-추가
     ]
    }
  1. webpack.config.js 설정 변경
    ...
    module: {
    rules: [
    {
      test: /\.(js|jsx|ts|tsx)$/, // <-<-.ts , .tsx 확장자 추가
      exclude: /node_modules/,
      use: ['babel-loader']
    }
    ]
    },
    resolve: {
    extensions: ['*', '.js', '.jsx','.ts','.tsx'] // <-.ts , .tsx 확장자 추가
    },
    ...