リファクタリング 1 - 1. 型「...」は型「...」に代入できません

<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という属性値に含まれていたまさにその値であることを認識させる必要がある！