Typescript 不在 forwardRef 中解析 JSX

Question

我在 Typescript 中使用 React 和 Next.js，我正在尝试制作这个包装器组件，它将一个 Next.js <Link /> 组件和一个 <a /> 标签：

import React, { forwardRef } from 'react';
import Link, { LinkProps } from 'next/link';

type EnhancedLinkProps = {
  children: React.ReactNode[];
} & LinkProps;

const EnhancedLink = forwardRef<HTMLAnchorElement, EnhancedLinkProps>(({
  as,
  passHref,
  prefetch,
  replace,
  shallow,
  scroll,
  href,
  children,
  ...rest
}, ref) => (
  <Link
    href={href}
    as={as}
    passHref={passHref}
    prefetch={prefetch}
    replace={replace}
    shallow={shallow}
    scroll={scroll}
    href={href}
  >
    <a {...rest} ref={ref}>
      {children}
    </a>
  </Link>
))

export default EnhancedLink;

问题是我想支持转发引用，但是一旦我将我的函数包装在 forwardRef 中，打字稿就无法解析我的 JSX。我在 <Link...:

行收到此错误消息

"'Link' refers to a value, but is being used as a type here. Did you mean 'typeof Link'?ts(2749)"

似乎正在将 Link 周围的 <> 注册为 Typescript 语法。

我使用这个例子将我的 forwardRef 设置为 typescript 代码：

type Props = { children: React.ReactNode; type: "submit" | "button" };
export type Ref = HTMLButtonElement;
export const FancyButton = React.forwardRef<Ref, Props>((props, ref) => (
  <button ref={ref} className="MyClassName" type={props.type}>
    {props.children}
  </button>
));

摘自 here。我假设这个例子应该很好，但是当我将它直接复制粘贴到我的代码中时，我也在 JSX 开始的行上得到一个错误（即 <button>...）：

"Cannot find name 'button'.ts(2304)"

Button 只是一个很好的旧 HTML 元素，所以它绝对不会在这里选择 JSX。

我尝试用显式 return 语句重写箭头函数。来自：

() => (<button />)

收件人：

() => { return (<button />) }

也没用，同样的错误。

我在这里错过了什么？

Answer 1

我遗漏了一些非常明显的东西:)

文件名必须从 .ts 重命名为 .tsx。

Typescript 不在 forwardRef 中解析 JSX

Typescript not parsing JSX inside forwardRef

typescript

reactjs

react-forwardref