将 TS 转换为 JS

一个 Remark 插件，用于将 TypeScript 代码块转换为两个标签的代码块，分别显示其 JavaScript 版本。

使用

🌐 Usage

安装依赖：

🌐 Install dependencies:

npm i fumadocs-docgen oxc-transform

对于 Next.js，将 oxc-transform 外部化：

🌐 For Next.js, externalize oxc-transform:

next.config.mjs (Next.js)

import { createMDX } from 'fumadocs-mdx/next';

/** @type {import('next').NextConfig} */
const config = {
  reactStrictMode: true,
  serverExternalPackages: ['oxc-transform'],
};

const withMDX = createMDX();

export default withMDX(config);

添加 remark 插件：

🌐 Add the remark plugin:

source.config.ts

import { remarkTypeScriptToJavaScript } from 'fumadocs-docgen/remark-ts2js';
import { defineConfig } from 'fumadocs-mdx/config';

export default defineConfig({
  mdxOptions: {
    remarkPlugins: [remarkTypeScriptToJavaScript],
  },
});

最后，确保定义所需的 MDX 组件：Tabs 和 Tab。

🌐 Finally, make sure to define the required MDX components: Tabs and Tab.

mdx-components.tsx (Fumadocs UI)

import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
import defaultComponents from 'fumadocs-ui/mdx';
import type { MDXComponents } from 'mdx/types';

export function getMDXComponents(components?: MDXComponents): MDXComponents {
  return {
    ...defaultComponents,
    Tab,
    Tabs,
    ...components,
  };
}

你现在可以在 TypeScript/TSX 代码块中启用它，例如：

🌐 You can now enable it on TypeScript/TSX codeblocks, like:

```tsx ts2js
import { ReactNode } from 'react';

export default function Layout({ children }: { children: ReactNode }) {
  return <div>{children}</div>;
}
```

import { ReactNode } from 'react';

export default function Layout({ children }: { children: ReactNode }) {
  return <div>{children}</div>;
}

使用

On this page