Reactjs 如何正确使用Typescript中的React.lazy（）导入带有泛型类型参数的React组件？

（复制于）

我猜这是

@types/react

和

lazyexticcomponent

定义的问题

在具有类型参数的组件上使用

React.lazy（）

时，Typescript无法再编译 这个项目

鉴于组成部分：

import React from "react";

export interface Props<T> {
  value: T;
  valueCallback: (t: T) => void;
}

export default function TypedComponent<T>(props: Props<T>) {
  return (
    <>
      <div>{`${props.value}`}</div>
      <button onClick={() => props.valueCallback(props.value)}>click</button>
    </>
  )
}

从“React”导入React；
导出接口道具{
值：T；
valueCallback：（t:t）=>void；
}
导出默认函数类型组件（props:props）{
返回(
{`${props.value}`}
props.valueCallback（props.value）}>单击
)
}

这包括：

import React, {useState} from "react";
import TypedComponent from "./TypedComponent";

export default function StrictComponent() {
  const [state, setState] = useState("blah");

  return (
    <TypedComponent value={state} valueCallback={setState}/>
  );
}

import React，{useState}来自“React”；
从“/TypedComponent”导入TypedComponent；
导出默认函数StrictComponent（）{
const[state，setState]=useState（“blah”）；
返回(
);
}

但这并不是：

import React, {lazy, useState} from "react";
const TypedComponent = lazy(() => import("./TypedComponent"));

export default function LazyComponent() {
  const [state, setState] = useState("blah");

  return (
    <TypedComponent value={state} valueCallback={setState}/>
  );
}

import React，{lazy，useState}来自“React”；
常量TypedComponent=lazy（（）=>import（“./TypedComponent”）；
导出默认函数LazyComponent（）{
const[state，setState]=useState（“blah”）；
返回(
);
}

D:/dev/lazy component typing/src/LazyComponent.tsx（9,35）中的类型脚本错误： 类型“Dispatch”不可分配给类型“（t:unknown）=>void”。 参数“value”和“t”的类型不兼容。 类型“未知”不可分配给类型“SetStateAction”。 类型“未知”不可分配给类型“（prevState:string）=>string”。TS2322 7 | 8 |返回( > 9 | | ^ 10 | ); 11 | } 12 |

---

TSX似乎不能很好地处理道具中的类型参数

您应该设置一个默认类型参数值，例如

any

，但这只会假设在使用组件时您的类型总是

any

，这可能不是您想要的：

export interface Props<T = any> {
  value: T;
  valueCallback: (t: T) => void;
}

// ...

// `valueCallback` will pass an explicit `any`
<TypedComponent value={value} valueCallback={setState} />

导出接口道具{
值：T；
valueCallback：（t:t）=>void；
}
// ...
//'valueCallback'将传递一个显式'any'`

您可以尝试使用有效的扩展类型复制它，然后使用它，例如：

import { Props as TCProps } from './TypedComponent'
const StronglyTypedComponent: React.Component<TCProps<string>> = TypedComponent

// ...

// correctly typed, but more verbal
<StronglyTypedComponent value={value} valueCallback={setState} /> 

从“/TypedComponent”导入{Props as TCProps}
常量StronglyTypedComponent:React.Component=TypedComponent
// ...
//输入正确，但更为口语化

TSX可以很好地处理我的类型参数。在类似您编写的情况下，只有当与

React.lazy（）结合使用时，问题才会出现。

您找到了正确的解决方案吗？

import { Props as TCProps } from './TypedComponent'
const StronglyTypedComponent: React.Component<TCProps<string>> = TypedComponent

// ...

// correctly typed, but more verbal
<StronglyTypedComponent value={value} valueCallback={setState} />