Tengo un proyecto de reacción creado por Create-React-App que tiene los siguientes paquetes (mencionando paquetes relacionados con mi problema):
"react": "^16.13.1", "react-dom": "^16.13.1", "react-router-dom": "^5.1.2", "react-scripts": "3.4.1", "typescript": "^3.9.2", "@typescript-eslint/eslint-plugin": "^2.33.0", "@typescript-eslint/parser": "^2.33.0"Creé un HOC simple (que no hace nada a partir de ahora, pero agregaré mi lógica más adelante) como este:
type Props = { [key: string]: any; }; const connect = function (Component: FunctionComponent): FunctionComponent { const ComponentWrapper = function (props: Props): ReactElement { return <Component {...props} />; }; return ComponentWrapper; };y exporté mi componente así:
const Test: FunctionComponent<Props> = function ({ message }: Props) { return ( <div>{message}</div> ); }; export default connect(Test);y usando este componente así:
<Test message="Testing message" />Pero obteniendo un error en el compilador:
Type '{ message: string; }' is not assignable to type 'IntrinsicAttributes & { children?: ReactNode; }'. Property 'message' does not exist on type 'IntrinsicAttributes & { children?: ReactNode; }'. TS2322He intentado lo que la gente ha sugerido en otras preguntas y artículos similares de Stack Overflow encontrados en Google, pero nada funcionó hasta ahora.
// This is the piece we were missing --------------------v const connect = function (Component: React.FC): React.FC<Props> { const ComponentWrapper = function (props: Props): JSX.Element { return <Component {...props} />; }; return ComponentWrapper; };y después de reiniciar el compilador funcionará bien.
El tipo del valor de retorno de la función de connect es un componente funcional que requiere Props , no un componente funcional básico.
Ver también la hoja de trucos