React中TypeScript动态属性对象的类型标注疑问

1. 为什么对象展开写法没触发类型错误？ #

这是TypeScript类型检查机制和配置共同作用的结果：

• 如果你没把输入框的name严格断言为keyof InvestmentInput，它的类型会被拓宽为string。这时候用{...prev, [name]: value}创建的对象，TypeScript会推断为InvestmentInput & { [key: string]: string }。在非严格模式下，TS的结构类型系统会认为这个对象包含了InvestmentInput的所有属性，从而允许它被传入setUserInput，哪怕属性类型不匹配。
• 就算你把name断言为keyof InvestmentInput，在非严格模式下，TS对对象字面量的计算属性赋值检查会比较宽松——它会把该属性的类型合并为number | string，而不会强制要求严格匹配原接口的number类型。
• 另外，setUserInput的上下文类型推断有时候会“默认”认为你返回的对象符合InvestmentInput，从而跳过了严格的类型校验，这其实是类型不安全的。

而直接修改对象的方式（比如先复制prev到新对象，再赋值），新对象的类型已经被明确为InvestmentInput，TS会严格检查每个属性的赋值类型，所以字符串赋值给number属性会直接报错。

2. 如何让展开写法也触发类型错误（实现类型安全的简洁写法） #

可以通过以下几步实现：

• 开启严格模式：在tsconfig.json中设置"strict": true，这是TS类型安全的基础，会强制所有类型检查规则生效。
• 严格限定键的类型：把输入框的name断言为keyof InvestmentInput，或者用类型守卫确保类型正确：

  const { name, value } = e.target;
  if (!['amount', 'years'].includes(name)) return; // 替换为你的接口属性列表
  const key = name as keyof InvestmentInput;
  

• 创建类型安全的更新函数：封装一个通用的更新方法，强制赋值类型与属性类型匹配：

  const updateInvestmentInput = <K extends keyof InvestmentInput>(
    key: K,
    value: InvestmentInput[K]
  ) => {
    setUserInput(prev => ({ ...prev, [key]: value }));
  };
  
  // 使用时
  updateInvestmentInput(key, +value); // 必须传入number类型，否则报错
  

  这样你用展开写法时，只要传错类型就会立刻触发TS错误，既保持了简洁性，又保证了类型安全。

3. setUserInput的返回值是否应隐式为InvestmentInput类型？ #

是的。useState<InvestmentInput>返回的setUserInput，其回调函数的返回值必须是InvestmentInput类型——TS会隐式做这个校验，只要你开启了严格模式。如果之前没报错，要么是严格模式没开，要么是类型推断时出现了宽松的情况（比如键的类型被拓宽为string）。

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