如何使用 React 和 TypeScript 将实现与类型声明分开？

Question

Let's say I want to provide a React component type (Video in this example) that I can import from an "sdk" library and use in another TypeScript React component that lives in a different repo:

import { Video } from "sdk";

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

But I don't want the "sdk" library to contain the implementation for that component. I want the "sdk" to export the type declaration, and I want to mount MyComponent inside a remote-component in another React app, which provides the implementation for everything in "sdk":

import MyVideo from "../my-video";

resolve: {
  sdk: {
    Video: MyVideo,
  },
}

const requires = createRequires(resolve);
export const RemoteComponent = createRemoteComponent({ requires });

Is there a way I can write this sdk library that exports TypeScript types with no implementations, and then use that sdk in another repo with the expectation that the implementation will be available at runtime when the component is mounted? This would be similar to allowing for dynamic linking in C by providing header files in an SDK.

Answer 1

Yes, many libraries originally written in JavaScript offer TypeScript definition files ( d.ts ). Here's an example: https://github.com/vaadin/web-components/tree/23.3/packages/details/src .

You can enable declaration emit in your tsconfig.json :

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

This will cause the compiler to generate d.ts files.