Refactoring 1 - 1. Type '...' is not assignable to type "..."

<Button
onClick={handleLogin}
variant="contained"
  >
    LOGIN
</Button>
<Button onClick={handleGoogleLogin}>
  <img
src={logoSrc}
alt="alternative image"
/>
  <p>Social Login</p>
</Button>

문제 발생

이런 코드를 TypeScript에서 map을 사용하여 재구축하는 과정에서 에러가 발생했다.

Type 'string' is not assignable to type '"text" | "outlined" | "contained" | undefined'."

위와 같은 에러였는데 MUI를 사용했고 MUI Button의 variant 속성의 값에서 에러를 뱉고 있었다. 이를 해결하기 위해서 한참 고민했고 StackOverFlow나 ChatGPT를 통해 열심히 뒤져보다가 마침내 찾아낼 수 있었다.

해결 방법

type Variant = "text" | "outlined" | "contained" | undefined;

interface SubmitButtonProps extends ButtonProps {
  variant?: Variant;
  onClick?: () => Promise<void>;
  contains?: React.ReactNode;
}

{loginButtonSettings.map(
  ({ onClick, contains, variant }: SubmitButtonProps, index: number) => (
    <SubmitButton
    key={index}
  	onClick={onClick}
	contains={contains}
	variant={variant}
	/>
  )
)}

위와 같은 형태로 type이라는 값을 통해 variant에 들어갈 속성값들을 미리 정하면서 interface에도 잡아줘야 한다. 사실 이 부분보다는 아래 적을 내용이 중요하다.

const loginButtonSettings = [
  {
    onClick: loginHandler,
    contains: <div>Login</div>,
    variant: "contained" as Variant, // 바로 여기!
  },

여기에 적은 것처럼 "contained"는 일반적으로 string으로 인식하기 때문에 Variant라는 속성값에 포함되었던 바로 그 값이라는 것을 인지시켜주어야 한다!