打字稿中的故事书配置

Question

我想写故事书装饰器。有什么办法可以用 typescript 来写它和 preview.js 吗？

我已经在TS中自己写故事成功了，现在想在TS中写故事书配置。

Answer 1

我终于成功了。

应添加配置目录以包含打字稿预设选项和tsconfig.json
将模块分辨率设置为 "node"，因为由于某些原因，配置文件夹

此外，main.js应该保留JS文件，因为只有解析main.js配置后，故事书才能使用TS预设。

Answer 2

从 storybook 6.3 开始，您可以在 typescript 中编写 main.ts 和 preview.ts。请参阅此处的示例 https://github.com/storybookjs/storybook/tree/next/examples/cra-ts-kitchen-sink/.storybook

但是，这里需要注意的是，您不能在典型的 tsconfig.json 中使用 {"target": "ESNext"}，因为节点本身还不支持 ES 模块。

如果您需要 ESNext，例如将故事书与 rollup 一起使用，则需要一个解决方法。我的方法是通过环境变量 TS_NODE_PROJECT 配置故事书使用另一个 tsconfig.json。例如

.storybook/tsconfig.json

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

然后运行cross-env TS_NODE_PROJECT=.storybook/tsconfig.json start-storybook.

它起作用的原因是故事书使用 webpack，后者又使用 tsconfig-paths 解析 tsconfig.json 的路径。

Answer 3

因为 v6.5 只需导入类型并创建一个配置对象。

// .storybook/main.ts

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

const config: StorybookConfig = {
    ...
}

module.exports = config;

打字稿中的故事书配置

Storybook config in typescript

config

typescript

storybook