Typescript: Question: type definitions for dual packages

[xiaoxiangmoe]

Search Terms

esm, commonjs, dual packages

Question

foo/package.json
    foo/index.mjs   (this is ESM)
    foo/index.cjs  (this is CJS)
    foo/index.d.ts (this is type definitions)

for example, index.mjs and index.cjs has function declare function arch(): 'x64' | 'x86';

For cjs, index.d.ts should be

declare function arch(): 'x64' | 'x86';
export = arch;

For mjs, index.d.ts should be

declare function arch(): 'x64' | 'x86';
export default arch;

For both, index.d.ts should be

declare function arch(): 'x64' | 'x86';


declare const Arch: typeof arch & {
  readonly default: typeof arch;
}
export = Arch;

---

But If I use export = Arch;

import arch = require('arch');

arch.default() // This has no error. But `arch.default` is not exists.

[Kingwl]

You need
https://www.typescriptlang.org/tsconfig#esModuleInterop or https://www.typescriptlang.org/tsconfig#allowSyntheticDefaultImports

[xiaoxiangmoe]

No, I don't want to open allowSyntheticDefaultImports, bacause import arch from 'foo' will import foo/index.mjs. It should works well.

[weswigham]

@Kingwl is right - you should define the package types as

declare function arch(): 'x64' | 'x86';
export = arch;

(so the cjs one) in index.d.ts, and compile with esModuleInterop or allowSyntheticDefaultImports on - either flag will allow you to import a package defined like the above as a default import - import arch from 'foo'. (The first of the two will also generate some helpers in cjs emit to preserve that behavior at runtime between transpiled packages)

[xiaoxiangmoe]

@weswigham What should I do if I want to provide dts for users who disable allowSyntheticDefaultImports and esModuleInterop.

[ExE-Boss]

@xiaoxiangmoe
That will most likely depend on support for the exports field in TypeScript.

[xiaoxiangmoe]

Yes.
@weswigham Will TS support the exports field?

[ExE-Boss]

@xiaoxiangmoe
That’s being tracked in issue https://github.com/microsoft/TypeScript/issues/33079.