Declaration files don't contain triple slash types directives

[kasperpeulen]

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" />',
  },

Upvote & Fund

• We're using Polar.sh so you can upvote and help fund this issue.
• We receive the funding once the issue is completed & confirmed by you.
• Thank you in advance for helping prioritize & fund our backlog.