타입스크립트 마이그레이션 피드백

[jake920220]

여러분 늦은 시간까지 고생 많이 하셨고 다들 잘 하셨어요! TS migration 피드백 남깁니다.

1.

any 타입 최소화

src/components/AlertToast.tsx src/components/ConfirmToast.tsx src/components/ToastContainer.tsx

기본적으로 파일 내에 any 타입을 최대한 간소화 해주는 것이 좋습니다. any타입을 많이 사용하면 사용할 수록 typescript가 갖는 강력한 이점이 사라지게 됩니다. 아직은 우리가 typescript에 대해 익숙하지 않아서 어떤 타입을 넣어줘야 되는지 알 수 없는데, 우리가 아예 모르는것에 대한 타입일때는 저번에 챌린지반 수업에서 재상님이 다루었던 것처럼 타입을 훔쳐오는 방법을 사용하거나, 구글링을 해보는 방법이 있고, 존재하지 않는 타입에 대한 명시를 해줄때는 interface나 type등을 통해 해당 객체 형태를 지정해주는 것이 좋습니다.

2.

src/utils/toast.ts

as-is

https://github.com/ldcumg/first-sparta-open-source-library/blob/836158576f759f6ce97576d7590080d009dd2320/src/utils/toast.ts#L50-L54

Promise를 반환하는 confirm 같은 경우 return값에 대한 타입을 명시해주는 것이 좋습니다.

to-be

const confirm = (message: string, option: ToastOptionType): Promise<boolean> => {
  return new Promise((resolve) => {
    EventBus.publish("SHOW_CONFIRM_TOAST", { message, ...option, resolve });
  });
};

3.

src/components/ToastContainer.tsx

as-is

https://github.com/ldcumg/first-sparta-open-source-library/blob/836158576f759f6ce97576d7590080d009dd2320/src/components/ToastContainer.tsx#L38-L40

any 타입의 generics를 사용했는데, useState에도 타입을 구체적으로 명시해주는 것이 좋습니다. 우리가 어떤 형태의 옵셔널한 값들이 useState에 들어가는지를 알고 있다면, interface로 미리 구현체를 만들어 둘 수 있습니다.

AlertToast와 ConfirmToast에서 각각 ToastOptionType, AlertToastType 을 set해주는데, 그렇다면 해당 type의 generics를 사용하는게 바람직합니다.

4.

src/components/ToastContainer.tsx

as-is

https://github.com/ldcumg/first-sparta-open-source-library/blob/836158576f759f6ce97576d7590080d009dd2320/src/components/ToastContainer.tsx#L9-L30

(일단 initialStateType 스펠링 수정이 필요해요) initialState도 타입지정이 필요해보입니다.

to-be

const initialState: Record<string, ToastOptionType[]> = {
  "t-l": [],
  "t-c": [],
  "t-r": [],
  "c-l": [],
  "c-c": [],
  "c-r": [],
  "b-l": [],
  "b-c": [],
  "b-r": []
};

Record는 타입스크립트에서 자주 사용되는 유틸리티 타입인데요. 객체의 키와 값 타입을 명확히 지정해줄수있게 도와줍니다. 저렇게 사용하면 initialState는 key는 문자열, 값은 ToastOptionType의 배열 이라는 형태로 명시가됩니다.

[ldcumg]

최고입니다 감사합니다 튜터님!