我有一个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组件中使用该组件:
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子文件夹导入类型的任何信息。
答案 0 :(得分: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 文件,从库中导出所有内容的主文件。所以我最有可能这样做:
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 。从内部路径导入是完全可以的。
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
这样做。我发现这是在看打字文件。我也可能不正确。