TypeScript未检查React组件类型：为何首个示例无报错？如何配置tsconfig？

第一个示例不报错，核心是TypeScript对直接传递的字面量参数和预先定义的变量采用了不同的类型推断逻辑：

1. 当直接把数组字面量传给组件props时，TypeScript会启用上下文类型推断，优先用组件期望的类型（({ text: string; } | undefined)[]）来适配字面量。此时它会宽松地允许string类型“冒充”{ text: string }类型——但这是不安全的，因为字符串根本没有text属性，只是TypeScript在非严格模式下的类型检查漏洞。
2. 示例二中，变量messages的类型会被自动推断为(string | undefined)[]，此时TypeScript会严格对比这个类型和组件要求的类型，发现string与{ text: string }结构不兼容，因此报错。
3. 示例三中的as const会把数组类型锁定为readonly ("text 1" | undefined | "text 2")[]，同样和组件要求的类型不匹配，触发报错。

要捕获这类不安全的类型赋值，需要在tsconfig.json中开启严格类型检查配置：

• 最简便的方式是直接开启全局严格模式：

  {
    "compilerOptions": {
      "strict": true
    }
  }
  

如果不想全量开启严格模式，可以单独开启以下关键选项：

• strictNullChecks: true：严格区分undefined/null与其他类型，避免隐式赋值。
• strictFunctionTypes: true：严格检查函数参数的类型兼容性，阻止结构不匹配的类型赋值。
• noImplicitAny: true：禁止隐式推断any类型，避免类型漏洞。

开启这些配置后，TypeScript会在示例一中检测到string类型缺少text属性，抛出明确的类型错误，从而提前规避运行时潜在的bug。

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