StorybookのコンフィグをTypeScriptで書きたいので調べた

{
  "compilerOptions": {
    // こちらはフロントアプリの TS コードをトランスパイルするのに最適な設定にしておけばいい。
  },

  // Storybook が main.ts を読み込むときに使う設定。
  // ts-node がプロジェクトの依存にあれば ts-node/register が自動で使われるので、結果的にこの設定が有効になる。
  // cf. https://github.com/TypeStrong/ts-node/tree/v10.4.0#via-tsconfigjson-recommended
  // プロダクションコードと同じ基準にする必要はないし、とくに `"module": "CommonJS"` がネックになるので、別で設定できるのが嬉しい。
  "ts-node": {
    "transpileOnly": true,
    "compilerOptions": {
      "module": "CommonJS"
    }
  }
}

./
├── .storybook/
│   ├── main.js
│   └── tsconfig.json  <- こちらではなく 🙅‍♂️
├── package.json
└── tsconfig.json  <- こちらがどうしても有効になる 😞

  "name": "@storybook/react",
...
  "bin": {
    "build-storybook": "./bin/build.js",
    "start-storybook": "./bin/index.js",
    "storybook-server": "./bin/index.js"
  },

#!/usr/bin/env node

require('../dist/cjs/server');

import { buildDev } from '@storybook/core/server';
import options from './options';

buildDev(options);

  "name": "@storybook/core",

export * from '@storybook/core-server';

  "name": "@storybook/core-server",
...
  "main": "dist/cjs/index.js",
  "module": "dist/esm/index.js",

import {
  getPreviewHeadTemplate,
  getManagerHeadTemplate,
  getManagerMainTemplate,
  getPreviewBodyTemplate,
  getPreviewMainTemplate,
} from '@storybook/core-common';

export {
  getPreviewHeadTemplate,
  getManagerHeadTemplate,
  getManagerMainTemplate,
  getPreviewBodyTemplate,
  getPreviewMainTemplate,
};

export * from './build-static';
export * from './build-dev';

export async function buildDev(loadOptions: LoadOptions) {

export async function buildDev(loadOptions: LoadOptions) {
  const cliOptions = await getDevCli(loadOptions.packageJson);

  try {
    await buildDevStandalone({
      ...cliOptions,
      ...loadOptions,
      configDir: loadOptions.configDir || cliOptions.configDir || './.storybook',
      configType: 'DEVELOPMENT',
      ignorePreview: !!cliOptions.previewUrl && !cliOptions.forceBuildPreview,
      docsMode: !!cliOptions.docs,
      cache,
    });

export async function buildDevStandalone(options: CLIOptions & LoadOptions & BuilderOptions) {

  const previewBuilder = await getPreviewBuilder(options.configDir);
  const managerBuilder = await getManagerBuilder(options.configDir);

import { getPreviewBuilder } from './utils/get-preview-builder';
import { getManagerBuilder } from './utils/get-manager-builder';

export async function getPreviewBuilder(configDir: Options['configDir']) {
  const main = path.resolve(configDir, 'main');
  const mainFile = getInterpretedFile(main);
  const { core } = mainFile ? serverRequire(mainFile) : { core: null };

export async function getManagerBuilder(configDir: Options['configDir']) {
  const main = path.resolve(configDir, 'main');
  const mainFile = getInterpretedFile(main);
  const { core } = mainFile ? serverRequire(mainFile) : { core: null };

import { getInterpretedFile, serverRequire, Options } from '@storybook/core-common';

  "name": "@storybook/core-common",
...
  "main": "dist/cjs/index.js",
  "module": "dist/esm/index.js",

export * from './presets';

export * from './utils/babel';
export * from './utils/check-webpack-version';
export * from './utils/check-addon-order';
export * from './utils/envs';
export * from './utils/es6Transpiler';
export * from './utils/handlebars';
export * from './utils/interpret-files';
export * from './utils/interpret-require';
export * from './utils/load-custom-babel-config';
export * from './utils/load-custom-presets';
export * from './utils/load-custom-webpack-config';
export * from './utils/load-manager-or-addons-file';
export * from './utils/load-preview-or-config-file';
export * from './utils/log-config';
export * from './utils/merge-webpack-config';
export * from './utils/paths';
export * from './utils/progress-reporting';
export * from './utils/resolve-path-in-sb-cache';
export * from './utils/cache';
export * from './utils/template';
export * from './utils/interpolate';
export * from './utils/validate-configuration-files';
export * from './utils/to-require-context';
export * from './utils/normalize-stories';
export * from './utils/to-importFn';
export * from './utils/readTemplate';
export * from './utils/findDistEsm';

export * from './types';

export function serverRequire(filePath: string | string[]) {
  const candidatePath = serverResolve(filePath);

  if (!candidatePath) {
    return null;
  }

  const candidateExt = path.extname(candidatePath);
  const moduleDescriptor = interpret.extensions[candidateExt];

  // The "moduleDescriptor" either "undefined" or "null". The warning isn't needed in these cases.
  if (moduleDescriptor && registerCompiler(moduleDescriptor) === 0) {
    logger.warn(`=> File ${candidatePath} is detected`);
    logger.warn(`   but impossible to import loader for ${candidateExt}`);

    return null;
  }

  return interopRequireDefault(candidatePath);
}

function interopRequireDefault(filePath: string) {
  // eslint-disable-next-line import/no-dynamic-require,global-require
  const result = require(filePath);

  const isES6DefaultExported =
    typeof result === 'object' && result !== null && typeof result.default !== 'undefined';

  return isES6DefaultExported ? result.default : result;
}

export function serverRequire(filePath: string | string[]) {
  // ...
  const moduleDescriptor = interpret.extensions[candidateExt];

  // The "moduleDescriptor" either "undefined" or "null". The warning isn't needed in these cases.
  if (moduleDescriptor && registerCompiler(moduleDescriptor) === 0) {

  '.ts': [
    'ts-node/register',
    'typescript-node/register',
    'typescript-register',
    'typescript-require',
    'sucrase/register/ts',
    {
      module: '@babel/register',
      register: function(hook) {
        hook({
          extensions: '.ts',
          rootMode: 'upward-optional',
          ignore: [ignoreNonBabelAndNodeModules],
        });
      },
    },
  ],