Storybook config in typescript

Since storybook 6.3, you can write main.ts and preview.ts in typescript. See example here https://github.com/storybookjs/storybook/tree/next/examples/cra-ts-kitchen-sink/.storybook

However, the caveat here is that you cannot use {"target": "ESNext"} in your typical tsconfig.json because node doesn't support ES module natively, yet.

If you want ESNext, for example using storybook alongside rollup, a workaround is needed. My approach is to configure storybook to use another tsconfig.json via the environment variable TS_NODE_PROJECT. For example

.storybook/tsconfig.json

{
  "extends": "..",
  "compilerOptions": {
    "module": "commonjs",
    "target": "ES2017"
  }
}

Then run cross-env TS_NODE_PROJECT=.storybook/tsconfig.json start-storybook.

The reason it works because storybook uses webpack which in turn using tsconfig-paths to resolve the path for tsconfig.json.

I finally manage to make it works.

• Configs directory should be added to include option of typescript preset and tsconfig.json
• Set module resolution to "node", because for some reasons it got set to "classic" for config folder

Also, main.js should stay JS file, because only after parsing main.js config, storybook able to use TS preset.

Since v6.5 simply import the type and create a configuration object.

// .storybook/main.ts

import type { StorybookConfig } from '@storybook/react/types';

const config: StorybookConfig = {
    ...
}

module.exports = config;

To use TypeScript for your config files, change them to main.ts and preview.ts and then create .storybook/.babelrc and add the following:

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-typescript"
  ]
}

https://storybook.js.org/docs/react/configure/overview#configure-your-project-with-typescript

Note: there is a bug that breaks npm run storybook if the ts-node package exists anywhere in your dependency tree.