打字稿中的嵌套导出

Question

假设我想为 react+typescript 制作一个图标库。例如，让我们只考虑这个库中的 2 个图标：Apple 和 Banana.

我希望能够分别导入它们，如下所示：

import { Apple } from 'icons'

class MyComponent extends React.Component {
  render() {
    return <Apple/>
  }
}

现在让我们考虑每个图标都有其 自己的 道具集的情况：

type Props = {}
class Apple extends React.Component<Props> {
}

type Props = {}
class Banana extends React.Component<Props> {
}

有什么方法可以通过它们的组件单独导出这些道具？像这样：

import { Apple } from 'icons'

class MyComponent extends React.Component<Apple.Props> {
  render() {
    // passing all the props into the apple
    return <Apple {...this.props}/>
  }
}

Answer 1

参见。

尝试

import { ComponentProps } from 'react';

class MyComponent extends React.Component<ComponentProps<typeof Apple>> {
  render() {
    return <Apple {...this.props} />
  }
}

请注意，这假定导入的 Apple 是有效的 React 组件。

也可以考虑研究这个 typescript cheatsheet for react 以更好地掌握 typescript 可以为 React 做些什么。

Answer 2

除了导出组件，您还可以导出类型。

export type AppleProps = {}
export class Apple extends React.Component<AppleProps> {
}

然后您可以将它们用作：

import { Apple, AppleProps } from 'icons'

打字稿中的嵌套导出

Nested export in typescript

typescript

reactjs

es6-modules