Vite에서 React-JavaScript를 React-TypeScript로 마이그레이션하기

Vite로 프로젝트의 시작을 프레임워크 React, JavaScript로 선택한 프로젝트를 TypeScript로 변환해보자.

먼저 기본적인 JavaScript파일들을 TypeScript로 변환하는 과정은 본인은 아래와 같은 순으로 변환한다.

 

1.  tsconfig.json  /   tsconfig.node.json  /  vite.config.ts 등 설정파일 생성,작성하기

( 나는 프로젝트를 본인 환경에서만 사용해서 tsconfig.json만 파일을 추가해서 작업했다. 기존 js 설정파일은 삭제)

2.  main.jsx를 먼저 tsx로 바꾸고 타입 추가하기

3.  파일명 바꾸기 ( 파일 하나씩 진행하기, 여러개를 한번에 바꾸고 진행하게되면 오류가 많음 )

4.  파일명을 바꿨을때의 타입오류를 추가해주면서 오류 없얘기( Props또는 함수들의 타입들 설정 )

 

 

막상 JavaScript에서 TypeScript로 바꾸려면 tsconfig.json에서 몇 가지 옵션을 추가하고 봐야한다.

TypeScript는 js파일로부터 jsx문법을 해석할 수 없는 등 변경했을때 여러가지 문제가 있기 때문이다.

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

main.tsx에서 createRoot메서드는 Null 타입의 반환값을 받지 않는데 document.getElementById의 값이 null 이 될 수 있어서 타입오류가 발생할 것이기에 NonNull 단언인 "!"를 뒤에 붙이거나 타입단언은 "as HTMLElement" 를 작성해주면 오류가 사라진다.

 

나머지 파일들의 확장자를 tsx로 바꾸면서 useReducer에 사용될 Action들의 타입, 함수들을 자식컴포넌트에게 뿌리기 위해 ContextAPI에 넣을 함수들의 매개변수와 반환값 타입 설정, Hook들의 타입, onChange함수들의 타입, 함수형 컴포넌트 타입정의(React.FC)등을 해주었다.

 

 

ContextAPI 함수 타입설정

Action객체 타입설정, state 초기값 및 데이터 형태 타입 설정

 

 

혹시나 아래와 같은 오류가 뜬다면 index.html의 <script>태그 내부에 src주소를 main.tsx로 바꾸어 주어야 한다.

main.jsx를 찾는데 없어서 나는 오류

<script type="module" src="/src/main.tsx"></script>

 

본인은 확장자 문제인줄 알고 vite.config.ts나 tsconfig.json에서 이것저것 설정들을 다 끌어와서 하다가 문제가 가까운데 있는걸 몰랐다. 아래는 더러워진 나의 예전 vite.config.ts이다. 사실 아래 코드중에서 몇 가지를 없애도 제대로 동작 할 거 같다.

import path from "path";
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "/@/": path.resolve(__dirname, "src/"),
    },
    extensions: [".tsx", ".ts", ".jsx", ".js"],
  },
  build: {
    outDir: "dist",
    emptyOutDir: true,
    minify: true,
    sourcemap: true,
    rollupOptions: {
      input: {
        main: path.resolve(__dirname, "./src/main.tsx"),
      },
    },
  },
});

 

참고한 블로그 및 여러 사이트

• https://onlydev.tistory.com/185
• https://oris9.tistory.com/97