javascript - 使用 typescript 枚举并对期望字符串 Prop 使用react

Question

我正在尝试在 React 中严格键入一个 Button 组件。

我怎么能期望一个具有特定字符串值的 Prop ？

我目前的尝试导致Type '"primary"' is not assignable to type 'ButtonLevel'

enum ButtonLevel {
  Primary = "primary",
  Secondary = "secondary",
  Warning = "warning"
}

interface IButtonProps {
  level: ButtonLevel,
  disabled?: boolean
}

function MyButton(props: IButtonProps) {
  return (<Button>ABC</Button>)
}

function test() {
  return (<MyButton level="primary" ></MyButton>)
}

Answer 1

对...只需输入分隔线的值

interface IButtonProps {
  level: "primary" | "secondary" | "warning",
  disabled?: boolean
}

function test() {
  return (<MyButton level="ad" disabled >Continue</MyButton>)
}

然后警告组件使用者该值无效。