How do I write the type definition for a module with a default export

Question

I want to write a type definition for storybook-router. It needn't be that accurate, since this is a minor development tool (i.e. anys are acceptable), but I can't even seem to get that to work.

What I want to represent is:

import StoryRouter from 'storybook-router';

...in which StoryRouter is a function that matches the interface StoryDecorator from @types/storybook__react.

I tried the following definition file:

import { StoryDecorator } from '@storybook/react';

declare type StoryRouter = StoryDecorator;

export default StoryRouter;

Unfortuantely, that results in the following error:

TS7016: Could not find a declaration file for module 'storybook-router'. '/<path snipped>/node_modules/storybook-router/dist/StoryRouter.js' implicitly has an 'any' type. Try npm install @types/storybook-router if it exists or add a new declaration (.d.ts) file containing declare module 'storybook-router';

However, if I use that final example (declare module 'storybook-router'), I can't seem to figure out how to set a default export.

What's the correct way to represent this type?

Answer 1

You don't import in a .d.ts file, you just declare the module.
Usually, it looks like this (simplest use-case with any):

// storybook-router.d.ts
declare module 'storybook-router' {
    const StoryDecorator:any;
    export default StoryDecorator;
}