1

Grommet 是一个没有 TypeScript 类型的 React UI 库。我正在尝试制作一个基本定义文件，允许将每个组件作为命名的导入 React 组件类型导入。原因：方便编辑器可以通过名称找到它们以自动导入，例如

import { Button, AddIcon } from 'grommet'

我尝试了各种选择。到目前为止，我最接近的是以下内容，这是错误的，但也许可以更正：

/// <reference types="react" />
import * as React from 'react';

declare module 'grommet' {
  // I don't think this actually does anything, but I would like to grab just this
  import * as Button from 'grommet/components/Button';

  // this works, but when I use the debugger, I think it comes from the root index.js file
  export class Button extends React.Component<any, any> {}

  // somehow export AddIcon would be nice
}

declare module 'grommet/components/icons/base' {
  // I want to grab this Add component which is default
  import * as AddIcon from 'grommet/components/icons/base/Add';

  // somehow turn it into a React component type and export it as name AddIcon
  export class AddIcon extends React.Component<any, any> {}
}

我认为现在发生的是“grommet”模块获取根index.js文件并导入所有组件。Button 工作正常，但我不确定是否可以通过 TypeScript 定义仅导入 Button 而不是所有内容作为摇树的形式。

我想解决的两个问题：

  1. 如何将 Add 作为命名的导入 React 组件导入{ AddIcon }from 'grommet'，或者仅'grommet/components/icons/base'在不可能的情况下导入。

  2. 能够从它们的路径导入单个组件，而不是引入所有的索环。最好通过'grommet'作为一个很好的优化，或者例如'grommet/components/Button'。

4

0 回答 0