cra없이 개발환경 세팅하기 - 4. Typescript

1. src 폴더 아래에 components 폴더를 생성한다.

2. typescript를 설치한다.

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을 추가설치 후 babelrc파일에 해당 설정을 추가한다.

npm install --save @babel/preset-typescript

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