Javascript Typescript:es6从节点\模块子文件夹导入类型定义（.d.ts）

我有一个npm包，它具有以下类型定义（简化）：

./node_模块/ag电网反应/main.d.ts

导出声明类AgGridReact扩展组件{}

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

导出声明类AgGridReact扩展组件{
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}/>)
}

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

...

const grid = useRef<AgGridReactType>(null)

从'ag grid react'导入{AgGridReact}
const HelpRequests=（）=>{
const grid=useRef（空）
if（grid.current）console.log（grid.current.columnApi）
返回（）
}

问题：

export const test = 1000

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

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

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

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

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
}

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;
}

Typescript确实抱怨没有columnApi。不幸的是，它似乎从主d.T.中选择了错误的类型

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

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}/>)
}

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

...

const grid = useRef<AgGridReactType>(null)

从'ag grid react/lib/AgGridReact'导入{AgGridReact as aggridreactype}
...
const grid=useRef（空）

问题：

export const test = 1000

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

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

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

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

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
}

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;
}

---

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

---

我搜索了很多，但没有找到任何关于仅从节点模块子文件夹导入类型的信息。

我将尝试回答以下问题：

假设有一个

xyz

库，其中包含以下文件：

xyz/lib/main.ts:

export const test = 1000

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

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

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

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

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
}

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;
}

及

xyz/main.ts:

export const test = 1000

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

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

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

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

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
}

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;
}

我想在我的app.ts中使用

xyz

，我只知道它的main.ts文件，因为我认为它是从库导出所有内容的主文件。因此，我很可能会这样做：

app.ts:

export const test = 1000

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

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

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

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

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
}

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;
}

现在，有人去图书馆评论这句话：

xyz/main.ts:

export const test = 1000

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

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

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

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

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
}

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;
}

现在，我的app.ts将打印什么？它将打印

1000

---

同样的事情也发生在

ag grid react

上。它（ag-grid-react/main.d.ts）覆盖了ag-grid-react/lib/agGridReact.d.ts中明显正确（更好）的类声明。从内部路径导入是非常好的

main.d.ts:

export const test = 1000

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

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

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

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

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
}

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;
}

export*from./lib/agGridReact'；//它也从innner path导出
导出声明类AgGridColumn扩展组件{//，并在此处重写
}

agGridReact.d.ts:

export const test = 1000

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

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

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

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

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
}

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;
}

导出声明类AgGridReact扩展组件{
道具：任何；
国家：任何；
静态类型：任意；
gridOptions:gridOptions；
changeDetectionService:changeDetectionService；
api:GridApi | null；
columnApi:columnApi；
门户网站：ReactPortal[]；
hasPendingPortalUpdate:布尔值；
销毁：布尔；
受保护的eGridDiv:HTMLElement；
私有静态最大组件创建时间；
构造函数（道具：任意，状态：任意）；
render（）：React.ReactElement React.ReactElement React.Component）>）（新的（道具：any）=>React.Component）>；
createStyleForDiv（）：任意；
componentDidMount（）：无效；
waitForInstance（reactComponent:reactComponent，resolve:（值：any）=>void，runningTime？：number）：void；
mountReactPortal（门户：ReactPortal，reactComponent:reactComponent，resolve:（值：any）=>void）：void；
batchUpdate（回调？：任意）：任意；
销毁门户（门户：反应门户）：无效；
私人getStrategyTypeForProp；
shouldComponentUpdate（nextrops:any）：布尔值；
componentDidUpdate（prevProps:any）：无效；
processPropsChanges（prevProps:any，nextProps:any）：void；
私有extractDeclarativeColDefChanges；
私有财产变更；
componentWillUnmount（）：void；
isDisableStaticMarkup（）：布尔值；
}

---

我不能确切地说为什么ag grid会这样做。我在查看打字文件时发现了这个。我可能也不正确。

typescript是否足够聪明，不会导入./node\u modules/ag grid react/lib/aggrid react.ts文件，这可能会导致我的包大小增加？否。ts不会这样做。导入时，TS考虑路径和导入的项，此时它不关心包的大小。而且，TS只是为了简化开发工作。最后，在浏览器或服务器中，它是纯JS。捆绑包大小的增减取决于您在代码中编写和使用的内容（从库中）。@pa1nd类型仅在编译时存在，因此即使TypeScript将使用它，它也不会导致捆绑包大小的增减。@Slaus我不担心.d.ts，而是担心同名的.ts文件！因为我的进口。。。from“”未指定文件结尾。因此，它可以理解为.ts（可能是吧？）@pa1nd不确定，但无论如何，如果您有任何构建系统（可能是网页包？），它只包括从主模块调用的函数（类只是构造函数），而不管您导入的文件如何。所以我不认为有理由担心捆绑增长。