使用打字稿枚舉並對期望字符串道具做出反應

Question

我正在嘗試在 React 中嚴格鍵入一個 Button 組件。

我怎么能期待一個具有特定字符串值的道具？

我當前的嘗試導致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>)
}

然后警告組件使用者該值無效。

Answer 2

當您使用枚舉時，您傳遞的是 ButtonLevel.Primary 而不是“primary”，枚舉的重點是強類型並防止輸入錯誤。