Question

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文件并导入所有组件。按钮工作正常，但我不确定是否可以只通过TypeScript定义导入Button而不是一切树形图。

我想解决两个问题：

如何导入添加为命名导入的反射组件{ AddIcon }来自'grommet'，如果不可能，则只需'grommet/components/icons/base'。
能够从路径中导入单个组件，而不是引入所有索环。优选通过'grommet'作为优化进行优化，或者例如'grommet/components/Button'。

TypeScript类型定义，用于从JavaScript库路径

0 个答案: