리액트에서 타입스크립트로 마이그레이션 하기 III - 확장자 변경시 에러 수정 목록 redux, props, component type 수정,,,

 

 

타입스크립트 마이그레이션을 위해 설치한 서드파티 라이브러리 목록

---

 

"@craco/craco": "^7.1.0",
"@types/react": "^18.2.37",
"@types/react-dom": "^18.2.15",
"@types/bootstrap": "^5.2.9",
"@types/react-router-dom": "^5.3.3",
"typescript": "5.2.2"

 

 

 

 

 

 redux 수정 - Returntype

---

 

 

@types/react-redux 설치

 

 

 

수정전

 

redux 수정 후

  const loadingState = useSelector((state: RootState) => state.loading.open);

 

 

export type RootState = ReturnType<typeof store.getState>;

 

 

 

createSlice 수정

---

 

 

1. loading.tsx

import { createSlice } from "@reduxjs/toolkit";

interface LoadingState {
  open: boolean;
}
const initialState = { open: false } as LoadingState;

const loadingSlice = createSlice({
  name: "loading",
  initialState: initialState,
  reducers: {
    open(state) {
      state.open = true;
    },
    close(state) {
      state.open = false;
    },
  },
});

export const loadingActions = loadingSlice.actions;

export default loadingSlice.reducer;

 

 

initialState의 타입 interface로 설정

 

2. userLogin.tsx 

 

 

 

 

컴포넌트의 타입 명시 

---

 

 

 

 

const App = (): React.ReactElement => {

 

 

props 수정

---

 

 

자식컴포넌트에 props의 타입 명시

const LoadingLayer = React.memo((props<{message: string}>) => {

 

 

exact 삭제 

---

 

<Route path="/" exact element={<Home />} />

 

더이상 exact는 사용되지 않음

(react router v6 doesn't support exact anymore.)

 

 

 

declaration.d.ts 파일 설정

---

 

 

module.css파일의 존재 typescript에게 알리기

 

 

 

declare module "*module.css" {
  import { CSSResult } from "lit-element";
  const css: CSSResult;
  export default css;
}

 

 

 

tsconfig.json에 추가

 

  "include": ["./src/", "craco.config.js", "./typings"],

 

 

 

참고 자료 

https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/basic_type_example/