TypeScript：如何从 node_modules 子文件夹导入带类型定义的 ES6 模块（.d.ts）？

Question

TypeScript：如何从 node_modules 子文件夹导入带类型定义的 ES6 模块（.d.ts）？

3

我有一个npm包，其中包含以下类型定义（简化版）：

./node_modules/ag-grid-react/main.d.ts

export declare class AgGridReact extends Component<AgGridReactProps, {}> {}

./node_modules/ag-grid-react/lib/agGridReact.d.ts

export declare class AgGridReact extends Component<AgGridReactProps, {}> {
    gridOptions: GridOptions;
    api: GridApi | null;
    columnApi: ColumnApi;
}

我将使用以下方式在我的React组件中使用该组件：

我正在我的React组件中使用这个组件：

import { AgGridReact } from 'ag-grid-react'

const HelpRequests= () => {
  const grid = useRef<AgGridReact>(null)

  if (grid.current) console.log(grid.current.columnApi)

  return (<AgGridReact ref={grid}/>)
}

问题：

Typescript报错说没有columnApi。它似乎从main.d.ts中选择了错误的类型。

我发现可以直接从agGridReact.d.ts中导入类型并像这样使用：

import {AgGridReact as AgGridReactType} from 'ag-grid-react/lib/agGridReact'

...

const grid = useRef<AgGridReactType>(null)

问题：

这是解决问题的正确方法吗？ TypeScript 是否足够聪明，不会导入 ./node_modules/ag-grid-react/lib/agGridReact.ts 文件，从而导致我的捆绑包大小增加？

我已经搜索了很多内容，但没有找到有关仅从 node_modules 子文件夹中导入类型的任何信息。

- pa1nd

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ajeet Shah · Accepted Answer

我会尝试回答这个问题：

假设有一个名为xyz的库，它包含以下文件：

xyz/lib/main.ts:

export const test = 1000

并且

xyz/main.ts:

export * from './lib/main.ts'
export const test = 'foo bar'

我希望在我的app.ts中使用xyz，我只知道它的main.ts文件，因为我认为它是从库中导出所有内容的主要文件。所以我最有可能做的是：

app.ts:

import { test } from './xyz/main'

console.debug(test) // it will print 'foo bar'

现在，有人在库中评论了这一行：

xyz/main.ts:

export * from './lib/main.ts'
// export const test = 'foo bar'

现在，我的app.ts会打印出1000。

同样的事情也正在发生在ag-grid-react中。它(ag-grid-react/main.d.ts)覆盖了明显正确(更好的)的类声明，该声明存在于ag-grid-react/lib/agGridReact.d.ts中。从inner path导入是完全可以的。

main.d.ts:

export * from './lib/agGridReact'; // it is exporting from innner path too
export declare class AgGridColumn extends Component<AgGridColumnProps | AgGridColumnGroupProps, {}> { // and overriding here at the same time
}

agGridReact.d.ts:

export declare class AgGridReact extends Component<AgGridReactProps, {}> {
    props: any;
    state: any;
    static propTypes: any;
    gridOptions: GridOptions;
    changeDetectionService: ChangeDetectionService;
    api: GridApi | null;
    columnApi: ColumnApi;
    portals: ReactPortal[];
    hasPendingPortalUpdate: boolean;
    destroyed: boolean;
    protected eGridDiv: HTMLElement;
    private static MAX_COMPONENT_CREATION_TIME;
    constructor(props: any, state: any);
    render(): React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)>) | (new (props: any) => React.Component<any, any, any>)>;
    createStyleForDiv(): any;
    componentDidMount(): void;
    waitForInstance(reactComponent: ReactComponent, resolve: (value: any) => void, runningTime?: number): void;
    mountReactPortal(portal: ReactPortal, reactComponent: ReactComponent, resolve: (value: any) => void): void;
    batchUpdate(callback?: any): any;
    destroyPortal(portal: ReactPortal): void;
    private getStrategyTypeForProp;
    shouldComponentUpdate(nextProps: any): boolean;
    componentDidUpdate(prevProps: any): void;
    processPropsChanges(prevProps: any, nextProps: any): void;
    private extractDeclarativeColDefChanges;
    private extractGridPropertyChanges;
    componentWillUnmount(): void;
    isDisableStaticMarkup(): boolean;
}

我无法确切地说明为什么 ag-grid 这样做。我是在查看类型文件时发现的。我也可能是不正确的。