将JSX中的const函数代码转换为TSX

Question

我是一名有帮助的助手，以下是您需要翻译的内容：

我正在尝试将JSX中定义备用路由组件的方式转换为等效的TypeScript TSX文件。(1)

JSX语法如下:

import React from 'react';
import { Route, Redirect } from 'react-router-dom';

export const PrivateRoute = ({ component: Component, ...rest }) => (
    <Route {...rest} render={props => (
        localStorage.getItem('user')
            ? <Component {...props} />
            : <Redirect to={{ pathname: '/login', state: { from: props.location } }} />
    )} />
)

我尝试将其转换为TypeScript，但在Visual Studio中，<Component部分（如下所示）被下划线标记，并且TypeScript编译器告诉我

(TS) JSX element type 'Component' does not have any construct or call signatures.

我不太理解 lambda 函数中的 ({ component: Component, ...rest }) 语法。这是我在 TypeScript 中编写它时所达到的程度。

export function PrivateRoute(Component: React.Component, ...rest: any[]) {
    return (
        <Route {...rest} render={props => (
            localStorage.getItem('user')
                ? <Component {...props} />
                : <Redirect to={{ pathname: '/login', state: { from: props.location } }} />
        )} />
    );
};

任何建议？

参考资料：

1. https://www.pointblankdevelopment.com.au/blog/135/react-redux-with-aspnet-core-20-login-registration-tutorial-example#private-route-jsx

- Erik

---

({ component: Component, ...rest }) 的意思是通过解构从对象中获取一个 component 属性，并将其重命名为函数作用域中的 Component，并通过 "rest" 运算符（即 ...）将对象的其余属性放入名为 rest 的变量中。希望这能澄清问题，我不懂 TS，所以无法帮助您重构代码 :) - SrThompson

好的，这很有趣。这种语法有一个我可以搜索的名称吗？或者你能指出一些相关的文档吗？ - Erik

老牌的 MDN 文档有很多示例。请注意，解构和剩余/扩展运算符可用于数组和对象：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment - SrThompson

为什么不使用类语法？ - Sujit.Warrier

那该怎么做呢？ - Erik

Answer 1

关于错误 - JSX/TSX <Component ... 将被转换为类似于 React.createElement(Component... 的东西，因此 Component 类型应该是一个函数/类，而不是一个实例。因此，对它的适当类型应该是 ComponentType。

关于{ component: Component, ...rest } - 这是一种新的变量对象解构赋值。传递的参数被解包到变量Component和rest中(component属性的参数进入Component变量，而所有其他属性则进入rest变量)。

总之，最终的输入可能会像这样：

type RouteProps = { component: React.ComponentType };
export function PrivateRoute(
    { component: Component, ...rest }: RouteProps) {
    ...
};

- Aleksey L.

---

TypeScript编译器似乎想要一个 React.ComponentType 的类型参数。有什么提示应该是什么？ - Erik

ComponentType<P={}> 具有默认类型参数，因此不应该是必需的。无论如何，这是组件的属性类型。如果您没有明确指定类型参数而无法正常工作，则可以将 PrivateRoute<T> 设为泛型或仅使用 React.ComponentType<any>，但我们在 typings 中看到，这绝对不是必需的。 - Aleksey L.