【问题标题】：Storybook in create-react-app with TypeScript使用 TypeScript 在 create-react-app 中的故事书
【发布时间】：2019-04-09 18:30:26
【问题描述】：

我正在尝试在带有 TypeScript 的 create-react-app 中使用 Stotybook 而不会弹出。我知道这应该是可能的，即使它没有在文档中描述。以下是我使用的资源：

我要构建故事书，但它显示：

No Preview
Sorry, but you either have no stories or none are selected somehow.

这就是我所做的：

npx -p @storybook/cli sb init
npm install --save-dev react-docgen-typescript-webpack-plugin @storybook/addon-info @types/storybook__react awesome-typescript-loader
npm run storybook

这是我从 init storybook 命令创建的代码更改的代码：

tsconfig.js

...
"rootDirs": ["src", "stories"],
...

.storybook/config.js

import { configure } from '@storybook/react';
// automatically import all files ending in *.stories.js
const req = require.context('../', true, /.stories.tsx$/);
function loadStories() {
  req.keys().forEach(filename => req(filename));
}
configure(loadStories, module);

.storybook/webpack.config.js

const path = require("path");
const TSDocgenPlugin = require("react-docgen-typescript-webpack-plugin"); // Optional
module.exports = (baseConfig, env, config) => {
  config.module.rules.push({
    test: /\.(ts|tsx)$/,
    loader: require.resolve("ts-loader")
  });
  config.plugins.push(new TSDocgenPlugin()); // optional
  config.resolve.extensions.push(".ts", ".tsx");
  return config;
};

src/stories/index.js

import * as React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import TicTacToeCell from './TicTacToeCell';

const stories = storiesOf('Components', module);
stories.add(
  'TicTacToeCell',
  () => <TicTacToeCell value="X" position={{ x: 0, y: 0 }} onClick={action('onClick')} />,
  { info: { inline: true } }
);

我的设置有什么问题？

PS。我不知道我是否需要上面所有的包，所以如果我在我的项目中添加一些不相关的东西，请告诉我，因为我正在运行一个 create-react-app 项目

【问题讨论】：

标签： reactjs typescript storybook

【解决方案1】：

src/stories/index.js 应命名为src/stories/index.tsx

【讨论】：

【解决方案2】：

只需将您的故事直接加载到.storybook/config.js

function loadStories() {
  require('../src/stories')
}

编辑：

或者您可以将src/stories/index.js 重命名为src/stories/index.stories.tsx

仔细阅读cmets

// automatically import all files ending in *.stories.js
const req = require.context('../', true, /.stories.tsx$/);

【讨论】：