[TS] 🧤JS로 작성된 React 프로젝트를 TS로 바꾸는 방법

▷ typescript 환경 설정

CRA로 typescript 시작할 시

npx create-react-app my-app --template typescript

기존 javascript로 작성된 React 프로젝트에 typescript를 추가하게 될 경우

npm install typescript @types/node @types/react @types/react-dom @types/jest @types/react-router-dom

# 리덕스 툴킷
npm install --save-dev @reduxjs/toolkit @types/react-redux

# 스타일드 컴포넌트
npm install @types/styled-components

# 스토리북
npm install --save-dev @storybook/preset-typescript

# tsconfig.json 생성
npx tsc --init

# npm install @types/react를 해줬는데도 안 떠서 다시 설치함
# npm install --save-dev @types/react

---

🧤 tsconfig.json에 내용 추가

"compilerOptions": {
  "jsx": "react",
  "types": ["styled-components"],
}

---

🧤 index.tsx

const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);

root.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
);

---

🧤 svg, png... 이미지 파일 인식 못하는 경우

src폴더 안에 custom.d.ts파일 생성

/* src/custom.d.ts */

declare module "*.svg" {
  const content: any;
  export default content;
}

declare module "*.png" {
  const content: any;
  export default content;
}

tsconfig.json에 내용 추가

/* tsconfig.json */

"include": ["src", "src/custom.d.ts"],
"exclude": ["node_modules"]

---

▷ Redux에서 typescript 사용법

🧤 Store

Store/index.ts

/* Store/index.ts */
import { legacy_createStore as createStore, combineReducers } from "redux";
import { todoReducer } from "../Reducers";

const rootReducers = combineReducers({ todoReducer });
export type RootState = ReturnType<typeof rootReducers>; // 여기 추가

const store = createStore(rootReducers);

export default store;

---

🧤 Actions

Actions/action.tsx

⒈ 타입지정 및 as 지정

export const CREATE: string = "create" as const;

⒉ enum으로 타입 지정

export enum ActionTypes {
  CREATE = "create",
  REMOVE = "remove",
  TOGGLE = "toggle",
  DOING_FILTER = "doingFilter",
  COMPLE_FILTER = "compleFilter",
  CHANGE_TEXT = "changeText",
}

⒊ 액션 함수에 맞게 리턴 타입 지정

// 인터페이스
export interface ITodos {
  id: number;
  text: string;
  done: boolean;
}

interface ICreateAction {
  type: ActionTypes.CREATE;
  payload: ITodos;
}
.....

// 액션 함수
export const create = (todo: ITodos): ICreateAction => {
  return {
    type: ActionTypes.CREATE,
    payload: todo,
  };
};
.....

// 액션 타입들
export type TTodoAction = ICreateAction | IRemoveAction | IToggleAction | IDoingFilterAction | ICompleFilterAction | IChangeTextAction;

---

🧤 Reducers

Reducers/initialState.js

mport { ITodos } from "../Actions/action";

export interface ITodosArr {
  todos: ITodos[];
  doing: ITodos[];
  completed: ITodos[];
}

export const initialState: ITodosArr = {
  todos: [
    {
      id: 1,
      text: "간지나게 숨쉬기",
      done: true,
    },
 .....

---

Reducers/index.js

export const todoReducer = (state: ITodosArr = initialState, action: TTodoAction) => {
  switch (action.type) {
    case CREATE:
      const createPayload = action.payload as ITodos; // payload 타입을 분기 처리
      return Object.assign({}, state, { todos: [...state.todos, createPayload], doing: [...state.doing, createPayload] });

    case REMOVE:
      const removePayload = action.payload as { id: number }; // payload 타입을 분기 처리
      const removeTodos = state.todos.filter((el: ITodos) => el.id !== removePayload.id);
     .....
      
    case CHANGE_TEXT:
      const changeTextPayload = action.payload as { id: number; text: string }; // payload 타입을 분기 처리
      const changeTodos = state.todos.map((el: ITodos) => {
        if (el.id === changeTextPayload.id) return { ...el, text: changeTextPayload.text };
        return el;
      });
      .....

---

▷ React 컴포넌트에서 typescript

🧤 children

React.ReactNode

export interface ITemplateProps {
  children: React.ReactNode;
}

const TodoTemplateNotice = ({ children }: ITemplateProps) => {
  return (
    <TodoTemplateBlock>
      <RealTemplateBlock>{children}</RealTemplateBlock>
    </TodoTemplateBlock>
  );
};

---

🧤 MouseEvent

MouseEvent

useEffect(() => {
    const outInput = (e: MouseEvent) => {
      const node = e.target as Node;
      if (isEditable && inputRef.current && !inputRef.current.contains(node)
      .....

---

🧤 e.target.value

React.ChangeEvent<HTMLInputElement>

  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setValue(e.target.value);
  };

---

🧤 e.preventDefault

React.FormEvent

const onSubmit = (e: React.FormEvent) => {
  e.preventDefault();
}

---

🧤 useRef

<HTMLInputElement>

const inputRef = useRef<HTMLInputElement>(null);

---

🧤 setState

React.Dispatch<React.SetStateAction<타입>>

interface IAdcButtonProps {
  setBtnTxt: React.Dispatch<React.SetStateAction<string>>;
  setAll: React.Dispatch<React.SetStateAction<boolean>>;
  setFilterTxt: React.Dispatch<React.SetStateAction<string>>;
}

const AdcButton = ({ setBtnTxt, setAll, setFilterTxt }: IAdcButtonProps) => {