Declaration files don't contain triple slash types directives
We are using tsup in storybook, but we seem to have a problem with the declaration files emitted by tsup.
This is a minimal reproduction of the file:
import { default as expectPatched } from '@storybook/expect';
export interface Expect extends Pick<jest.Expect, keyof jest.Expect> {
<T = any>(actual: T): jest.JestMatchersShape<
jest.Matchers<Promise<void>, T>,
jest.Matchers<Promise<void>, T>
>;
}
export const expect: Expect = expectPatched as Expect;When I just try to generate type declaration with tsc, it will output this:
/// <reference types="jest" />
export interface Expect extends Pick<jest.Expect, keyof jest.Expect> {
<T = any>(actual: T): jest.JestMatchersShape<jest.Matchers<Promise<void>, T>, jest.Matchers<Promise<void>, T>>;
}
export declare const expect: Expect;But when I do same with tsup, the triple slash types directive is missing:
interface Expect extends Pick<jest.Expect, keyof jest.Expect> {
<T = any>(actual: T): jest.JestMatchersShape<jest.Matchers<Promise<void>, T>, jest.Matchers<Promise<void>, T>>;
}
declare const expect: Expect;
export { Expect, expect };Can I somehow configure tsup to generate those directives. It seems like this is meant to be included:
https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html#-reference-types-
For declaration files generated during compilation, the compiler will automatically add
/// <reference types="..." />for you; A/// <reference types="..." />in a generated declaration file is added if and only if the resulting file uses any declarations from the referenced package.
This also breaks when building storybook in angular projects. When I manually add the directive it works again:
> yarn build-storybook --quiet
info => Cleaning outputDir: /storybook-static
info => Loading presets
info => Building manager..
info => Manager built (369 ms)
info => Compiling preview..
info => Copying static files: /tmp/storybook/sandbox/angular-cli-default-ts/node_modules/@storybook/manager/static at /tmp/storybook/sandbox/angular-cli-default-ts/storybook-static/sb-common-assets
info Addon-docs: using MDX2
info => Using implicit CSS loaders
info => Using angular browser target options from "angular-latest:build"
info => Using angular project with "tsConfig:/tmp/storybook/sandbox/angular-cli-default-ts/.storybook/tsconfig.json"
info => Using default Webpack5 setup
ERR! => Failed to build the preview
ERR! node_modules/@storybook/jest/dist/index.d.ts:8:31 - error TS2503: Cannot find namespace 'jest'.
ERR!
ERR! 8 interface Expect extends Pick<jest.Expect, keyof jest.Expect> {
ERR! ~~~~
ERR!
ERR! node_modules/@storybook/jest/dist/index.d.ts:8:50 - error TS2503: Cannot find namespace 'jest'.
ERR!
ERR! 8 interface Expect extends Pick<jest.Expect, keyof jest.Expect> {
ERR! ~~~~
ERR!
ERR! node_modules/@storybook/jest/dist/index.d.ts:15:27 - error TS2503: Cannot find namespace 'jest'.
ERR!
ERR! 15 <T = any>(actual: T): jest.JestMatchersShape<jest.Matchers<Promise<void>, T>, jest.Matchers<Promise<void>, T>>;
ERR! ~~~~
ERR!
ERR! node_modules/@storybook/jest/dist/index.d.ts:15:50 - error TS2503: Cannot find namespace 'jest'.
ERR!
ERR! 15 <T = any>(actual: T): jest.JestMatchersShape<jest.Matchers<Promise<void>, T>, jest.Matchers<Promise<void>, T>>;
ERR! ~~~~
ERR!
ERR! node_modules/@storybook/jest/dist/index.d.ts:15:83 - error TS2503: Cannot find namespace 'jest'.
ERR!
ERR! 15 <T = any>(actual: T): jest.JestMatchersShape<jest.Matchers<Promise<void>, T>, jest.Matchers<Promise<void>, T>>;
ERR! One workaround I found is setting the banner:
dts: {
entry: ['./src/index.ts'],
resolve: true,
banner: '/// <reference types="jest" />',
},
How does funding with Polar work?
Pay now to fund the work behind this issue.
Get updates on progress being made.
Maintainer is rewarded once the issue is completed.
Backer
You're funding impactful open source efforts
Contributor
You want to contribute to this effort
Maintainer
You want to get funding like this too