TS技巧：交叉类型增强联合类型推导

需求场景

  TS开发中，常常碰到这样的场景：一个 string 联合类型，既包含了明确的固定值，又允许自定义任意的 string 类型。

  例如，Color组件，接收color参数，主要支持 green、yellow、red ，也可以输入任意string类型。

interface TypeColorProps {
  /**
   * @param color 主要支持三种颜色
   */
  color: "green" | "yellow" | "red" | string;
}

const Color: React.FC<TypeColorProps> = ({ color }) => {
  return <span style={{ color }}>Color</span>;
};

export default Color;

导致的问题

  这样实现的 TypeColorProps 接口 color 参数，虽然不会提示类型错误，但会导致失去自动类型推导的提示功能。

  因为 color 可以是 green、yellow、red 中的一个值，或是任意的 string 类型。而 green、yellow、red 本身就是字符串，从而导致代码编辑器，失去对 green、yellow、red 具体类型的推导提示。

解决方案

  其实TS已经给了我们解决方案，那就是使用交叉类型 (string & {}) ，完善 TypeColorProps 接口 color 字段定义，如下：

interface TypeColorProps {
  color: "green" | "yellow" | "red" | (string & {});
}

 调用Color组件，这样就可以看到 color 属性，会提示 green、yellow、red 并且可输入其他任意字符，如图所示：

总结

  通过使用交叉类型(string & {}) ，完善了 TypeColorProps 接口 color 字段 ，即可以传递任意字符串，也保留了对具体值（green、yellow、red）的推导提示功能。