打字稿:从子文件夹中导入 es6 类型定义 (.d.ts node_modules

Question

我有一个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;
}

我在我的反应组件中使用了该组件，如下所示：

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)

问题：

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

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

Answer 1

我将尝试回答这个问题：

假设有一个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文件，因为我认为它是从库中导出所有内容的主文件。所以我最有可能这样做：

应用：

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'

现在，我的应用程序将打印什么？它将打印1000.

---

同样的事情也发生在ag-grid-react身上.它(ag-grid-react/main.d.ts(覆盖了ag-grid-react/lib/agGridReact.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为什么这样做。我在打字文件时发现了这一点。我可能也不正确。