React 개발환경 세팅하기(without CRA) - 4. typescript 설치 및 설정

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/**/*"
    ]
}

4. 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>;
    }
}

5. 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")
);

6. babel 추가 설치 및 설정

npm install --save @babel/preset-typescript

.babelrc 파일에 아래 코드 추가

{
	"presets": [
      "@babel/preset-env",
      "@babel/preset-react",
      "@babel/preset-typescript" // <-추가
    ]
}

7. 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 확장자 추가
},
...