1

我想用 NextJS、TypeScript 和 mdx-js 建立一个网站。我曾经yarn create next-app设置项目，然后添加 typescript 和 mdx-js。我创建了一个简单的 MDX 文件并将其导入 index.tsx。当我运行yarn dev时，项目构建得很好，我可以在浏览器中看到结果。

由于 TS 编译器最初不理解 MDX 文件的结构，因此我创建了一个 global.d.ts 文件，该文件告诉加载的 MDX 文件的默认导出提供了一个 JSX.Element：

declare module '*.mdx' {
    declare const component: JSX.Element;
    export default component;
}

但是，当我想在 index.tsx 中呈现导入的组件时，VS Code 在编辑器中显示错误 ts2604：

渲染组件时的ts2604

我真的不明白VS在抱怨什么，当我写react组件然后在其他地方导入它们时，我总是使用JSX.Element作为函数组件的返回类型。如前所述，下一个构建工作得很好。

到目前为止我已经尝试过：

  • 添加import React from 'react'index.tsx 或 global.d.ts 并不能解决问题。
  • 将类型更改为ReactNode（如在此博客文章中所做的那样）在 VS 中会产生相同的错误。
  • 当我只是export default any;来自 global.d.ts 时，错误显然消失了，但我失去了类型支持，这不应该是真正的目标。
  • 当然，在添加/更改 d.ts 文件时，我将其添加到 tsconfig.json 并多次重新启动 VS Code 以确保正确重新初始化 TS 语言服务器。

对于 MDX 文件，正确的 TS 模块声明应该如何？您可以在https://github.com/feO2x/nextjs-ts-mdx找到此问题的 MCVE

谢谢您的帮助！

4

1 回答 1

0

因此，正如Ajeet Shah在评论中所说，我的错误是使用JSX.Element而不是React.ComponentType.

模块声明应如下所示：

declare module '*.mdx' {
    import React from 'react';
    declare const component: React.ComponentType;
    export default component;
}
于 2021-03-29T07:14:16.903 回答