为 Typescript Union Types 编写更多描述性智能感知文档

Question

给定以下代码，当我们调用该baz函数时，预先输入将显示“a”和“b”作为可能的值。

但是，如果我想为每个值提供附加文档，我该怎么做？例如，如果这样的行为是所需的行为：

我认为我应该提供更多关于我正在尝试做的事情及其原因的背景信息：

考虑以下示例：

const paintColor = {
  /** This color is good fo X */
  Waltz: "#d9e5d7",
  /** This color is good fo Y */
  "Indiana Clay": "#ed7c4b",
  /** This color is good fo Z */
  Odyssey: "#575b6a"
};

const locations = {
  /** There are no good school at this location*/
  City: "123 city center road",
  /** There are lots of parking at this location but it is very far*/
  West: "245 some other road"
};

interface HouseProp {
  color: keyof typeof paintColor; //"Waltz" | "Indiana Clay" | "Odyssey"
  location: keyof typeof locations; //"City" | "West"
}

const House = ({ color, location }: HouseProp) => {
  ...
};

其中 House 是一个 React 组件，它根据颜色和位置道具渲染房屋。

这个 House 组件在整个项目中随处可见。

在当前设置下，我可以像这样使用 House：

<House color="Indiana Clay" location="City" />

问题是，IntelliSense 无法识别我作为代码的一部分编写的文档：

我想要的是这样的：

PS我知道我可以将paintColor和 位置转换为枚举，并使用如下内容：

import House, {HouseColor, HouseLocation} from './House';
<House color={HouseColor["Indiana Clay"]} location={HouseLocation.City} />

但该组件接口并不像我最初的提议那么好。

Answer 1

您无法真正注释工会成员。但是，您可以通过使用重载或选择使用枚举来以不同的方式表达您的联合 \xe2\x80\x94 。

\n

解决方案#1：函数重载

\n

/**\n * a is good fo X\n */\nfunction baz(param: \'a\'): number;\n/**\n * b is an excellent choice for Y\n */\nfunction baz(param: \'b\'): number;\nfunction baz(param: \'a\' | \'b\'): number {\n  return 1;\n}\n

\n

截屏

\n

解决方案#2：作为接口重载

\n

interface Baz {\n  /**\n   * a is good fo X\n   */\n  (param: \'a\'): number;\n  /**\n   * b is an excellent choice for Y\n   */\n  (param: \'b\'): number;\n}\n\nconst baz: Baz = (param: \'a\' | \'b\') => {\n  return 1;\n}\n

\n

截屏

\n

解决方案#3：使用枚举代替

\n

enum Foo {\n  /**\n   * a is good fo X\n   */\n  A = \'a\',\n  /**\n   * b is an excellent choice for Y\n   */\n  B = \'b\',\n}\n\nfunction baz(param: Foo) {\n  return 1;\n}\n

\n

截屏

\n

我知道这并不完全是您想要的，但这是您的第二个最佳选择。

\n