I am currently utilizing TypeScript version 4.5.5
In a third-party library called dva, there is an interface named DvaInstance within the existing index.d.ts file:
export interface DvaInstance {
// ...
}
export {
connect, connectAdvanced, useSelector, useDispatch, useStore,
DispatchProp, shallowEqual
} from 'react-redux';
Although a field named _store exists in JavaScript, it is absent in this interface. Therefore, I decided to extend the interface to include this field by creating a new file named dva.d.ts:
declare module 'dva' {
interface DvaInstance {
_store: import('redux').Store;
}
}
Upon adding this field (_store), it became accessible. However, when attempting to do import { connect } from 'dva', the TypeScript compiler started raising complaints:
Module '"dva"' has no exported member 'connect'.
It appears that my module declaration overrides the one from dva, and declaration merging does not function as expected.
I did some research online and found many articles (including the official documentation) that utilize the import statement. So, I made another attempt:
import { DvaInstance } from 'dva';
declare module 'dva' {
interface DvaInstance {
_store: import('redux').Store;
}
}
This time, both import { connect } from 'dva' and the _store field worked. However, I encountered a complaint from the TypeScript compiler stating that
'DvaInstance' is already declared in the upper scopeMy inquiries are:
- When a top-level
importorexportmakes the.d.tsfile a non-ambient module, how do the types remain accessible without explicitly importing them in other files usingimport 'dva.d.ts'? - What is the proper method to expand TypeScript definitions in a third-party library without inadvertently overriding existing ones?