如何在实例化React组件时强制传入key属性？

我需要确保在实例化React组件并放入数组时，每个组件都必须传入key属性，但当前TypeScript类型定义报错，错误信息如下：

Argument of type 'Element' is not assignable to parameter of type 'WithKey'.
  Type 'ReactElement<any, any>' is not assignable to type '{ key: Key; }'.
    Types of property 'key' are incompatible.
      Type 'string | null' is not assignable to type 'Key'.
        Type 'null' is not assignable to type 'Key'.

原代码：

declare const user: { role: string; id: string };
import * as React from 'react';
import { Route } from 'react-router';

type WithKey = React.ReactElement & { key: React.Key }

export const App = () => {
  const routes: WithKey[] = [];

  if (user.role === 'admin') {
    // should not error
    routes.push(<Route key='1' path='/dashboarrd' />);
  }

  if (user.role === 'employee') {
    // should error
    routes.push(<Route path='/profile' />);
  }
}

问题原因 #

React.ReactElement的key属性原生类型为string | number | null | undefined，直接用交叉类型React.ReactElement & { key: React.Key }无法覆盖原有可选类型，TypeScript会取类型交集，导致key类型冲突报错。

解决方案 #

方案一：约束组件Props必须包含key #

直接定义组件的Props类型强制包含key，从源头限制元素创建时必须传入：

declare const user: { role: string; id: string };
import * as React from 'react';
import { Route, RouteProps } from 'react-router';

// 定义必须包含key的Route Props
type RouteWithKey = RouteProps & { key: React.Key };

export const App = () => {
  const routes: React.ReactElement<RouteWithKey>[] = [];

  if (user.role === 'admin') {
    // 正常，传入了key
    routes.push(<Route key='1' path='/dashboard' />);
  }

  if (user.role === 'employee') {
    // 报错：缺少key属性
    routes.push(<Route path='/profile' />);
  }
}

方案二：修改WithKey类型，覆盖key的可选性 #

通过Omit移除原ReactElement中的key属性，再强制添加必填的React.Key类型：

declare const user: { role: string; id: string };
import * as React from 'react';
import { Route } from 'react-router';

// 移除原ReactElement的key，再强制添加必填key
type WithKey = Omit<React.ReactElement, 'key'> & { key: React.Key };

export const App = () => {
  const routes: WithKey[] = [];

  if (user.role === 'admin') {
    // 正常
    routes.push(<Route key='1' path='/dashboard' />);
  }

  if (user.role === 'employee') {
    // 报错：key类型不符合要求（此处为undefined）
    routes.push(<Route path='/profile' />);
  }
}

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