使用扩展运算符时的类型映射：测试Setup函数的正确类型定义

我在测试中编写了如下setup函数，希望调用它时能传递类型信息，从而获得智能提示且无需忽略ESLint报错。代码如下：

function setup(): SomeType {
  return {
    user: userEvent.setup(),
    ...render(
      <Assessment />
    ),
  };
}

我曾尝试如下写法，但显然是错误的：

interface SomeType {
  [Key in keyof RenderResult]: Result
  user: UserEvent,
}

我需要获取每个属性的类型，希望有更简洁的实现方式。

解决方案 #

你可以用**交叉类型（Intersection Type）**来简洁定义SomeType，直接合并render返回值的类型和user属性的类型：

import type { RenderResult } from '@testing-library/react';
import userEvent from '@testing-library/user-event';

// 合并RenderResult与user属性的类型
type SomeType = RenderResult & {
  user: ReturnType<typeof userEvent.setup>;
};

function setup(): SomeType {
  return {
    user: userEvent.setup(),
    ...render(<Assessment />),
  };
}

说明： #

1. RenderResult是render函数返回值的内置类型，直接复用即可，无需手动映射每个属性
2. ReturnType<typeof userEvent.setup>会自动推导userEvent.setup()返回值的具体类型，避免硬写UserEvent可能导致的类型不匹配
3. 交叉类型&会将两个类型的属性完全合并，完美匹配你返回对象的结构，同时能提供完整的智能提示

你之前的写法错误在于：interface不支持直接使用映射类型（[Key in keyof ...]），映射类型仅能用于type定义，而且手动映射完全没必要，交叉类型是最简洁的实现方式。

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