hon9g / draggable Goto Github PK

기존 리액트 프로젝트에 타입스크립트 도입하기

1. 타입 스크립트 라이브러리 설치

npm i -D typescript @types/node @types/react @types/react-dom @babel/preset-typescript

2. 타입스크립트 설정 파일 생성

tsc cli 커맨드 사용을 위해

brew install typescript

타입스크립트 설정 파일 tsconfig.json 생성을 위해

tsc --init

• tsconfig.json 가 위치하는 곳이 타입스크립트 Root로 취급 됨. root를 기준으로 ./ src/ 을 프로그램에 포함하고 싶기 떄문에 tsconfig에 "include": ["./src/"], 을 추가.

3. 기존 JSX 파일을 TSX로 변환

• 기존에 작성한 자바스크립트 파일에는 대부분 타입이 설정되어 있지 않아, noImplicitAny 컴파일 에러가 다수 발생할테니 해당 옵션을 우선 off 해둔다. "noImplicitAny": false
• tsx 파일의 jsx 문법을 제대로 컴파일 할 수 있도록 jsx 관련 설정을 추가. 이 프로젝트에서는 jsx option 값을 "jsx": "preserve"로 주었음. (TS: JSX config)
• 기존에 웹팩을 사용하고 있었으므로, ts, tsx 파일을 위한 웹팩 설정을 추가한다.
• 기존에 바벨을 사용하고 있었으므로, 바벨이 타입스크립트 파일을 잘 트랜스파일링 할 수 있도록 관련 preset을 추가합니다.

webpack.config.js

module: {
        rules: [
        {
            test: /\.(js|jsx|ts|tsx)$/,
            use: ['babel-loader'],
            exclude: /node_modules/,
        }, 
        ...
        ],
    },

.babelrc

{
    "presets": [
        ...,
        "@babel/preset-typescript"
    ]
  
}

.