React+TypeScript严格模式下函数参数隐式any警告的解决方法

当TypeScript开启严格模式后，它会强制要求所有变量、函数参数必须有明确的类型注解，不允许隐式推断为any类型。你遇到的警告就是因为组件接收的add函数没有指定类型，TS只能默认它是any，这在严格模式下是不被允许的。下面给你几种实用的解决思路：

方法1：定义参数接口 + 组件Props类型 #

先给add函数接收的参数定义一个接口，再明确组件Props的类型，这样TS就能清晰知道add的函数签名：

import * as React from "react";

// 定义add函数要接收的参数结构
interface AddItem {
  a: number;
  b: number;
}

// 定义组件的Props类型，指定add是一个接收AddItem、无返回值的函数
type FormProps = {
  add: (item: AddItem) => void;
};

const Form = ({ add }: FormProps) => (
  <div onClick={() => add({ 
    a: 1, 
    b: 2 
  }) } >
    Add
  </div>
);

export default Form;

方法2：直接在解构时指定add的类型 #

如果不想单独定义接口和Props类型，也可以直接在解构参数时给add标注类型，写法更简洁：

import * as React from "react";

const Form = ({ add }: { add: (item: { a: number; b: number }) => void }) => (
  <div onClick={() => add({ 
    a: 1, 
    b: 2 
  }) } >
    Add
  </div>
);

export default Form;

方法3：结合React.FC定义组件类型 #

如果你习惯用React官方的函数组件类型，可以用React.FC配合泛型来指定Props类型，更贴合React开发场景：

import * as React from "react";

interface AddItem {
  a: number;
  b: number;
}

type FormProps = {
  add: (item: AddItem) => void;
};

const Form: React.FC<FormProps> = ({ add }) => (
  <div onClick={() => add({ 
    a: 1, 
    b: 2 
  }) } >
    Add
  </div>
);

export default Form;

为什么这些方法能解决问题？ #

严格模式下TS会禁用隐式any的推断，通过给add函数明确指定参数类型和返回值类型（这里返回值是void，因为点击事件里的add不需要返回结果），TS就能准确校验你调用add时的参数是否符合要求，同时消除警告。

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