打字稿中的故事书配置

Question

我想写故事书装饰器。有没有办法preview.js用打字稿来写它？

我已经成功地在 TS 中编写故事本身，现在想在 TS 中编写故事书配置。

Answer 1

从故事书 6.3 开始，您可以用打字稿编写main.ts和。请参阅此处 6.3.0 版本中的示例。preview.ts

注意：如果您使用比 6.3.0 更新的版本，请更改上面存储库链接中的标签过滤器以匹配并找到类似的示例，以防语法发生更改。

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

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

.storybook/tsconfig.json

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

然后跑cross-env TS_NODE_PROJECT=.storybook/tsconfig.json start-storybook。

它之所以有效，是因为 Storybook 使用 webpack，而 webpack 又用于tsconfig-paths解析tsconfig.json.

Answer 2

我终于设法让它工作。

另外，main.js应该保留 JS 文件，因为只有在解析main.jsconfig 后，storybook 才能使用 TS 预设。