面试题：复杂场景下 TypeScript 联合类型与交叉类型的运用

Question

假设你正在开发一个前端表单组件库，有一个组件接收的数据类型可能是多种表单字段类型（如文本框、下拉框等）的配置，同时这个配置又需要满足一些通用的属性要求（如是否必填、提示信息等）。请使用 TypeScript 的联合类型与交叉类型设计出合理的类型定义，并解释你的设计思路。

Answer 1

设计思路

1. 定义基础通用属性类型：首先定义一个包含通用属性（如是否必填、提示信息）的类型，以便其他具体表单字段类型能复用这些通用属性。
2. 定义具体表单字段类型：分别为文本框、下拉框等表单字段定义其特定的类型。
3. 使用交叉类型：将通用属性类型与具体表单字段类型通过交叉类型结合，使得每个具体表单字段类型都具备通用属性。
4. 使用联合类型：把所有结合后的具体表单字段类型通过联合类型组合起来，这样组件就能接收多种表单字段类型的配置。

代码实现

// 通用属性类型
type FormFieldCommonProps = {
  required: boolean;
  tip: string;
};

// 文本框类型
type TextField = {
  type: 'text';
  value: string;
} & FormFieldCommonProps;

// 下拉框类型
type SelectField = {
  type:'select';
  options: string[];
} & FormFieldCommonProps;

// 联合类型，组件接收的数据类型
type FormFieldConfig = TextField | SelectField;

在上述代码中，FormFieldCommonProps 定义了通用属性。TextField 和 SelectField 分别是文本框和下拉框的类型，通过交叉类型 & 结合了通用属性。最后，FormFieldConfig 使用联合类型 | 将 TextField 和 SelectField 组合起来，满足组件接收多种表单字段类型配置的需求。