如何用TypeScript实现Vue向导组件配置的类型智能提示？

当前TypeScript完全支持实现你的需求，核心是通过泛型类型推断和条件类型捕获各个步骤的具体字段名字面量，为回调函数提供精确的智能提示。以下是具体的实现方案：

步骤1：定义泛型化的类型结构 #

先将单个步骤和整体配置的类型改为泛型，让TypeScript能捕获具体的字段名字面量：

// 单个步骤类型，泛型TFieldNames限定当前步骤的字段名字面量
type WizardStep<TFieldNames extends string> = {
  name: string;
  fields: Array<{ fieldName: TFieldNames }>;
  // watchers参数为当前步骤的字段名数组，带智能提示
  watchers: (fieldNames: TFieldNames[]) => void;
};

// 整体向导配置类型，泛型TSteps捕获步骤数组的具体类型
type WizardConfiguration<TSteps extends WizardStep<string>[]> = {
  steps: TSteps;
  // globalWatchers参数为所有步骤的字段名联合数组
  globalWatchers: (
    fieldNames: Array<TSteps[number] extends WizardStep<infer F> ? F : never>
  ) => void;
};

步骤2：用辅助函数自动推断泛型 #

为了避免手动指定泛型参数，编写一个辅助函数让TypeScript自动推断配置中的字段名：

function createWizardConfig<TSteps extends WizardStep<string>[]>(
  config: WizardConfiguration<TSteps>
) {
  return config;
}

步骤3：使用配置并验证智能提示 #

现在编写配置时，TypeScript会自动为watchers和globalWatchers的参数提供精确的智能提示：

const config = createWizardConfig({
  steps: [
    {
      name: "Step 1",
      fields: [
        { fieldName: "Field 1 1" },
        { fieldName: "Field 1 2" }
      ],
      watchers: (fieldNames) => {
        // 此处自动提示："Field 1 1"、"Field 1 2"
        console.log(fieldNames);
      }
    },
    {
      name: "Step 2",
      fields: [
        { fieldName: "Field 2 1" },
        { fieldName: "Field 2 2" }
      ],
      watchers: (fieldNames) => {
        // 此处自动提示："Field 2 1"、"Field 2 2"
        console.log(fieldNames);
      }
    },
  ],
  globalWatchers: (fieldNames) => {
    // 此处自动提示所有字段："Field 1 1"、"Field 1 2"、"Field 2 1"、"Field 2 2"
    console.log(fieldNames);
  }
});

原理说明 #

• WizardStep<TFieldNames>通过泛型约束，将fields中的fieldName从宽泛的string限定为具体的字面量类型，为watchers的参数提供类型依据。
• WizardConfiguration<TSteps>利用条件类型infer F提取所有步骤的字段名联合类型，确保globalWatchers能获取全量字段的智能提示。
• 辅助函数createWizardConfig触发TypeScript的自动泛型推断，无需手动指定类型参数，简化使用流程。

内容的提问来源于stack exchange，提问作者kondz1v