如何确保TypeScript对React组件所有Props进行类型检查？

问题背景 #

在TypeScript + React开发中遇到两个类型检查相关的问题：

1. 当组件的某个Prop不符合类型定义时，后续的错误Prop不会再被TypeScript进行类型检查（WebStorm IDE中无错误提示）。
2. 使用@ts-ignore或@ts-expect-error忽略单个错误Prop时，后续所有错误Prop的提示都会被屏蔽。曾反馈为TypeScript Bug，但官方明确这是预期行为。

测试代码 #

import { React, FunctionComponent } from 'react'

export const MyComponent: FunctionComponent<{
  validProp: string
}> = (props) => {
  return <>MyComponent</>
}

export const MyComponent2: FunctionComponent<{}> = () => {
  return (
    <>
      <MyComponent
        validProp='validProp'
        invalidProp1
        invalidProp2
      />
      <MyComponent
        validProp='validProp'
        // @ts-expect-error
        invalidProp1
        invalidProp2 {/* 此处本该提示Prop无效，但实际无提示 */}
      />
      <MyComponent
        validProp='validProp'
        invalidProp1
        // @ts-expect-error
        invalidProp2
      />
    </>
  )
}

可行优化方案 #

1. 单个Prop单独使用类型断言 #

对需要忽略类型检查的单个Prop，使用as any或针对性的类型断言，仅屏蔽该Prop的错误，不影响其他Prop的检查：

<MyComponent
  validProp='validProp'
  invalidProp1={undefined as any}
  invalidProp2 {/* 此处会正常提示错误 */}
/>

2. 临时扩展组件Props类型 #

通过类型扩展，临时允许特定的错误Prop，明确放宽单个Prop的限制，其他Prop保持严格检查：

// 临时扩展允许invalidProp1
type TempMyComponentProps = typeof MyComponent['props'] & {
  invalidProp1?: unknown;
};

<MyComponent {...({
  validProp: 'validProp',
  invalidProp1: true,
  invalidProp2: true
} as TempMyComponentProps)} />
{/* 若添加未在TempMyComponentProps中声明的Prop，仍会触发错误提示 */}

3. 用ESLint规则约束注释使用 #

配置ESLint规则辅助规范@ts-expect-error的使用：

• 启用@typescript-eslint/prefer-ts-expect-error：强制使用@ts-expect-error替代@ts-ignore，确保注释对应明确的错误。
• 启用@typescript-eslint/no-unused-ts-expect-error：检查@ts-expect-error是否真的对应了错误，避免无效注释导致的误屏蔽。

关于TypeScript的设计限制 #

目前这种行为确实是TypeScript的设计限制：

• 当解析到一个类型错误后，为避免大量连锁的无意义错误提示，TypeScript会停止对当前节点后续内容的类型检查。
• @ts-expect-error和@ts-ignore在JSX元素中的作用范围是当前注释之后的所有Prop，这是官方明确的预期行为，暂时无法通过TypeScript本身的配置改变。

内容的提问来源于stack exchange，提问作者Nico W.