js: 为 function arguments 定义选项

Question

我有一个关于 Javascript/Typescript functions arguments and clean code的问题。 所以我会用一个简单的例子来说明我的意思。

我创建了一个以view属性作为道具的 React 组件：

<Grid view="Horizontal" />

type PropsInterface = {
  view: string
}

const Grid = ( { view }:PropsInterface )=>{
    ...
}

view可以有多个选项。 例如：“水平”、“垂直”等。

问题：定义view选项的最佳方式是什么，以便我不会忘记它们或其他开发人员可以轻松理解？ 底部方法好吗？ 有更好的方法吗？

type PropsInterface = {
  view: "Horizontal" | "Vertical"
}

Answer 1

Typescript 具有枚举类型 -

enum ViewDirection {
  Horizontal = "Horizontal",
  Down = "Vertical",
}

来自TypeScript 文档：

在现代 TypeScript 中，当带有 const 的 object 就足够时，您可能不需要枚举：

所以你可以这样做：

const ViewDirection = {
  Horizontal = "Horizontal",
  Down = "Vertical",
} as const;

VS 字符串类型

如果字符串的值可能会发生变化，那么使用字符串枚举意味着仅更改 1 个字符串文字，而使用字符串类型意味着在使用它们的任何地方都进行更改。

在外行术语中，您可以将Horizontal = "Horizontal"更改为Horizontal = "H"而无需在使用字符串枚举时在任何地方进行更改。

在这里更深入：

TS 中字符串枚举和字符串文字类型之间的区别