重构 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 按钮的变体属性值中出现了错误。为了解决这个问题，我挣扎了一段时间，在通过 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 值为变量预先定义属性值，还需要将其附加到接口上。事实上，这一部分比我们下面要写的内容更重要。

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

正如你所看到的，"contained（包含）"一般被识别为字符串，因此我们需要确保它是变量属性值中包含的值！