我如何将实现与React和TypeScript的类型声明分开?

Question

假设我想提供一个React组件类型(在这个例子中是Video)，我可以从一个"sdk"在另一个repo中的TypeScript React组件中使用:

import { Video } from "sdk";
export default function MyComponent {
return (
<Video src={...} />
);
}

但是我不想要"sdk"库来包含该组件的实现。我想要一张"卡片"。导出类型声明，我想把MyComponent挂载到另一个React应用的远程组件中，它为"sdk":

中的所有内容提供实现。

import MyVideo from "../my-video";
resolve: {
sdk: {
Video: MyVideo,
},
}
const requires = createRequires(resolve);
export const RemoteComponent = createRemoteComponent({ requires });

是否有一种方法我可以写这个sdk库，导出TypeScript类型没有实现，然后在另一个repo中使用该sdk，期望实现将在运行时可用当组件被挂载?这类似于通过在SDK中提供头文件来允许C中的动态链接。

Answer 1

是的，许多最初用JavaScript编写的库提供TypeScript定义文件(d.ts)。下面是一个例子:https://github.com/vaadin/web-components/tree/23.3/packages/details/src.

您可以在您的tsconfig.json中启用声明发出:

{
"compilerOptions": {
"declaration": true
}
}

这将导致编译器生成d.ts文件