React+TypeScript登录页路由报TS2322类型不兼容错误如何解决

错误原因 #

1. PageLogin组件入参写法错误：React函数组件仅接收1个props参数，你当前把className和login拆到两个参数里接收，直接导致props类型完全错乱。
2. 路由配置的Page类型中，component字段的类型定义限制过严，和react-redux connect返回的组件类型不兼容。
3. 同时存在两个影响功能的逻辑错误：onChange事件里取表单字段名错用了e.target.value，密码输入框的name属性错写为email。

解决步骤 #

1. 修复PageLogin.tsx的组件定义和逻辑 #

替换组件入参、onChange逻辑、密码框属性三处代码：

// 所有props都从第一个参数解构，删除多余的第二个参数
const PageLogin: FC<PageLoginProps> = ({ className = "", login }) => {
  const [formData, setFormdata] = useState({
    email: "",
    password: ""
  })

  const {email, password} = formData;

  // 把[e.target.value]改为[e.target.name]
  const onChange = (e:any) => setFormdata({...formData, [e.target.name]: e.target.value});

  const onSubmit = (e:any) => {
    e.preventDefault();
    login(email, password);
  };

找到密码输入框的代码，修正name属性：

<Input type="password" 
       className="mt-1"
       name="password" // 原代码此处为email，修改为password
       value={password}
       onChange={e => onChange(e)} />

2. 修正路由Page类型定义 #

找到路由目录下的types.ts文件，将Page接口的component字段类型调整为兼容任意组件的格式：

export interface Page {
  path: string;
  exact?: boolean;
  component: React.ComponentType<any>; // 原定义为ComponentType<Object>，替换为该行即可
}

如果不想使用any类型，也可以写成兼容路由原生props的格式：React.ComponentType<RouteComponentProps<any>>

修改完成后TypeScript报错会自动消失，登录表单的赋值和提交逻辑也能正常运行。

内容的提问来源于stack exchange，提问作者Yusuf Doğan