打字稿：如何正确地在联合类型中进行类型推断？

Question

我定义了一个名为IConfigFactory的联合类型，它接受一个IConfig类型的参数或者返回一个IConfig类型的函数。

但它不能正确地进行类型推断，如下所示：

interface IViteConfig {
  vite?: true;
}

interface IWebpackConfig {
  vite?: false;
  plugins: string[];
}

type IConfig = IViteConfig | IWebpackConfig;

type IConfigFactory = (() => IConfig) | IConfig;

function defineConfig(config: IConfigFactory) {
  return config;
}

defineConfig({
  vite: true,   // Not prompting as expected
  plugins: [],
});

type IConfigFactory2 = IConfig;

function defineConfig2(config: IConfigFactory2) {
  return config;
}

defineConfig2({
  vite: true,
  plugins: [], // Prompting as expected
});

游乐场

但是当我定义IConfigFactory只接受IConfig类型的参数时，它运行良好。

我做错了什么，我该如何解决？

Answer 1

TypeScript discriminated unions 通过特定于“鉴别器”来工作。 在你的情况下， vite ：

interface IViteConfig {
  vite: true;                  // <--- NOTE
}

interface IWebpackConfig {
  vite: false;                 // <--- NOTE
  plugins: string[];
}

type IConfig = IViteConfig | IWebpackConfig;

type IConfigFactory = (() => IConfig) | IConfig;

function defineConfig(config: IConfigFactory) {
  return config;
}

defineConfig({ vite: true });               // ok

defineConfig({ vite: false, plugins: [] }); // ok

（ 游乐场链接）

作为旁注， I前缀，在老式 WIN32 和 C# 领域中常用，在 TypeScript 中是多余的。

没有I的相同代码更“符合人体工学”（当然，这是主观的：

interface ViteConfig {
  vite: true;
}

interface WebpackConfig {
  vite: false;
  plugins: string[];
}

type Config = ViteConfig | WebpackConfig;

type ConfigFactory = (() => Config) | Config;

function defineConfig(config: ConfigFactory) {
  return config;
}

defineConfig({ vite: true });               // ok

defineConfig({ vite: false, plugins: [] }); // ok