[TIL] 230731

React JS -> TS 리팩토링(dom, redux)

as const

액션 함수를 통해 액션 객체를 만들면 type이 string이 아니라 실제 값을 가리킨다.

useSelector type 지정하기

const todos = useSelector<TodoState, TodoState["todos"]>(
    (todos) => todos.todos
  );

redux todos.ts type 지정하기

초기값과 각각의 payload에 타입 지정을 해줬다.

const initialState: TodoTypes[] = [
  {
    id: uuid(),
    title: "제목1",
    contents: "내용1",
    isDone: false,
  },
  {
    id: uuid(),
    title: "제목2",
    contents: "내용2",
    isDone: true,
  },
  {
    id: uuid(),
    title: "제목3",
    contents: "내용3",
    isDone: false,
  },
  {
    id: uuid(),
    title: "제목4",
    contents: "내용4",
    isDone: false,
  },
];

// action creator
export const addTodo = (payload: TodoTypes) => {
  return {
    type: ADD_TODO,
    payload,
  };
};

export const completeStateToto = (payload: TodoTypes) => {
  return {
    type: COMPLETE_STATE_TODO,
    payload: payload,
  };
};

export const deleteTodo = (payload: TodoTypes) => {
  return {
    type: DELETE_TODO,
    payload,
  };
};

// 리듀서
const todos = (
  state = initialState,
  action: { type: string; payload: TodoTypes }
) => {
  switch (action.type) {
    case ADD_TODO:
      return [...state, action.payload];

    case COMPLETE_STATE_TODO:
      return state.map((todo) => {
        if (todo.id === action.payload.id) {
          return {
            ...todo,
            isDone: !todo.isDone,
          };
        } else {
          return todo;
        }
      });

    case DELETE_TODO:
      return state.filter((todo) => {
        return todo.id !== action.payload.id;
      });

    default:
      return state;
  }
};

react router dom TS

yarn add @types/react-dom @types/react-router-dom로 설치

styled-components ts

yarn add @types/styled-components 로 설치!

단일 props type 지정하기

// ~~ = styled.button<{propsname: type}>
const BoxButton = styled.button<{bordercolor: string}>`
  background-color: white;
  border: 2px solid ${(props) => props.bordercolor};
  border-radius: 5px;
  height: 40px;
  width: 50%;
  cursor: pointer;
`;

props가 많을 경우에는 interface로 나누어서 타입을 지정하자

Error: Module build failed (from ./node_modules/babel-loader/lib/index.js)

index.ts 로 파일 이름을 지정했는데 index.tsx로 변경해주니 해결되었다.
다른 파일들도 마찬가지로 컴포넌트 형태의 경우 tsx로 변경해주어야 한다.

제네릭을 사용하는 상황

• 상태가 null일 수도 있고 아닐수도 있을 때
• 상태의 타입이 까다로운 구조를 가진 객체이거나 배열일 때

useSelector나 useState들은 고유한 타입들이 있어서 타입을 찾는데에 시간이 걸리는 것 같다. 또한, 오류가 발생하지 않더라도 명확한 타입이 필요한 경우가 있는지 생각해봐야겠다. 내일 여유시간에 문서를 더 분석해보자