Storybook: 插件文档：源文档块 Typescript 支持

谢谢@enagy27！ 这里至少有几个选项：

1) source-loader可以输出打字稿更友好的代码
2）用户可以以不同的方式配置打字稿（在我们的 monorepo 中还没有看到过）
3) source-loader可以输出@ts-ignore来解决

我认为第三种选择是最直接的开始，第一种可能是最好的长期选择

大凯撒的鬼魂！！ 我刚刚发布了包含引用此问题的 PR #7831 的https://github.com/storybookjs/storybook/releases/tag/v5.2.0-beta.39 。 立即升级试用！

您可以在@next NPM 标签上找到此预发行版。

关闭这个问题。 如果您认为还有更多工作要做，请重新打开。

@enagy27没有复制，所以如果你能试一试并告诉我它是否有效，那就太好了

@shilman绝对！ 现在试一试。 谢谢！

@shilman仍然在beta.39上看到这些错误😞

ERROR in /Users/eric.nagy/workspace/component-library/src/elements/tag/tag.stories.tsx
./src/elements/tag/tag.stories.tsx
[tsl] ERROR in /Users/eric.nagy/workspace/component-library/src/elements/tag/tag.stories.tsx(69,52)
      TS7005: Variable '__MODULE_DEPENDENCIES__' implicitly has an 'any[]' type.

ERROR in /Users/eric.nagy/workspace/component-library/src/elements/tag/tag.stories.tsx
./src/elements/tag/tag.stories.tsx
[tsl] ERROR in /Users/eric.nagy/workspace/component-library/src/elements/tag/tag.stories.tsx(74,3)
      TS2300: Duplicate identifier 'parameters'.

npx -p @storybook/cli<strong i="10">@next</strong> sb info

Environment Info:

  System:
    OS: macOS 10.14.5
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
  Binaries:
    Node: 10.16.0 - /usr/local/opt/node@10/bin/node
    Yarn: 1.17.3 - ~/workspace/component-library/node_modules/.bin/yarn
    npm: 6.9.0 - /usr/local/opt/node@10/bin/npm
  Browsers:
    Chrome: 76.0.3809.100
    Safari: 12.1.1
  npmPackages:
    @storybook/addon-a11y: ^5.2.0-beta.39 => 5.2.0-beta.39 
    @storybook/addon-actions: ^5.2.0-beta.39 => 5.2.0-beta.39 
    @storybook/addon-docs: ^5.2.0-beta.39 => 5.2.0-beta.39 
    @storybook/addon-knobs: ^5.2.0-beta.39 => 5.2.0-beta.39 
    @storybook/addon-links: ^5.2.0-beta.39 => 5.2.0-beta.39 
    @storybook/addon-viewport: ^5.2.0-beta.39 => 5.2.0-beta.39 
    @storybook/addons: ^5.2.0-beta.39 => 5.2.0-beta.39 
    @storybook/preset-scss: 1.0.2 => 1.0.2 
    @storybook/preset-typescript: 1.1.0 => 1.1.0 
    @storybook/react: ^5.2.0-beta.39 => 5.2.0-beta.39 
    @storybook/theming: ^5.2.0-beta.39 => 5.2.0-beta.39

鉴于这是在源加载器上，是否需要单独安装然后由预设占用，还是需要新版本的预设？

@enagy27您能否使用此处的说明查看加载的源代码，并查看加载的源代码是否包含 #7831 中的更改？ （用.tsx替换.mdx ，其余部分应该适用）

https://github.com/storybookjs/storybook/blob/next/addons/docs/docs/faq.md#how -do-i-debug-my-mdx-story

@shilman我只能在sourceLoaderOptions: null生效时启动服务器😞 否则失败的构建会停止启动服务器并且我无法在浏览器中检查源代码。 在第一次失败的构建中，是否有命令行选项可以绕过并启动服务器？

呜呜！！ 我刚刚发布了包含引用此问题的 PR #7845 的https://github.com/storybookjs/storybook/releases/tag/v5.2.0-beta.40 。 立即升级试用！

您可以在@next NPM 标签上找到此预发行版。

@enagy27合并并发布您的更改。 试一试？

@shilman没有这样的运气 😞 我正在本地进行实验，似乎无法掌握它的窍门。 我什至作弊并将它们全部标记为as any但看起来它会抱怨重复变量parameters ，这让我想知道__STORY__是否没有正确转义？ 但是后来我看不到它对 JS 而不是 TS 的作用......我很难过

我也遇到了这个问题，但不幸的是没有太多额外的上下文。

这里的另一个解决方案是覆盖故事书加载的tsconfig.js文件中的所有“严格”类型检查规则（您项目的 tsconfig 或.storybook/tsconfig.js （我认为））。

我认为这些是要确保未启用的：

@libetl我知道你真的很忙，但如果你能看看这个，那就太棒了。

@JonKrone执行此操作时，您是否在文档选项卡中看到源代码？ 我已经做了这些修改，但我仍然没有看到源😞

如果您使用 awesome-typescript-loader 的临时解决方案：

/* tsconfig.json */
{
  "compilerOptions": { },
  "awesomeTypescriptLoaderOptions": {
    "ignoreDiagnostics": [7005]
  }
}

不理想，但它有效。

@shilman这就是你要找的吗？ 仅供参考，如果不忽略 TS7005（没有隐含任何），这将不会构建。

  // @ts-ignore
  var withSourceLoader = require('@storybook/source-loader/preview').withSource;
  // @ts-ignore
  var __SOURCE_PREFIX__ = "/home/user/projects/real/ts/my-blog-react/src/graphql";
  // @ts-ignore
  var __STORY__ = "import React from \"react\";\n\nimport { ApolloProvider } from \"@apollo/react-hooks\";\nimport { storiesOf } from \"@storybook/react\";\n\nimport { Posts } from \"../views/Posts/index\"; // ! Fix coupling\nimport { PostContent } from \"../views/PostContent\"; // ! Fix coupling\nimport { withPostContentQuery } from \"./components/withPostContentQuery\";\nimport { withPostsQuery } from \"./components/withPostsQuery\";\nimport * as fakeQl from \"./fakeql/fakeql-endpoints\";\nimport apolloClientFactory from \"./apollo\";\n\n// FIXME: #coupling - find a way to not depend on Post and Container, probably fakes - but not good enough.\n\nconst apolloClient = apolloClientFactory(fakeQl.normalApiEndpoint);\nconst PostContentQuery = withPostContentQuery(PostContent);\nconst PostsQuery = withPostsQuery(Posts);\n\n// ~~~ Posts ~~~\nstoriesOf(\"GraphQL\", module).add(\"PostsQuery\", () => (\n  <ApolloProvider client={apolloClient}>\n    <PostsQuery routeHandler={() => null} />\n  </ApolloProvider>\n));\n\n// ~~~ PostContent ~~~\nstoriesOf(\"GraphQL\", module).add(\"PostContentQuery\", () => (\n  <ApolloProvider client={apolloClient}>\n    <PostContentQuery postId=\"1\" />\n  </ApolloProvider>\n));\n";
  // @ts-ignore
  var __ADDS_MAP__ = {"graphql--postsquery":{"startLoc":{"col":33,"line":20},"endLoc":{"col":1,"line":24},"startBody":{"col":47,"line":20},"endBody":{"col":1,"line":24}},"graphql--postcontentquery":{"startLoc":{"col":33,"line":27},"endLoc":{"col":1,"line":31},"startBody":{"col":53,"line":27},"endBody":{"col":1,"line":31}}};
  // @ts-ignore
  var __MAIN_FILE_LOCATION__ = "/root.stories.tsx";
  // @ts-ignore
  var __MODULE_DEPENDENCIES__ = [];
  // @ts-ignore
  var __LOCAL_DEPENDENCIES__ = {};
  // @ts-ignore
  var __IDS_TO_FRAMEWORKS__ = {};

  import React from "react";

import { ApolloProvider } from "@apollo/react-hooks";
import { storiesOf } from "@storybook/react";

import { Posts } from "../views/Posts/index"; // ! Fix coupling
import { PostContent } from "../views/PostContent"; // ! Fix coupling
import { withPostContentQuery } from "./components/withPostContentQuery";
import { withPostsQuery } from "./components/withPostsQuery";
import * as fakeQl from "./fakeql/fakeql-endpoints";
import apolloClientFactory from "./apollo";

// FIXME: #coupling - find a way to not depend on Post and Container, probably fakes - but not good enough.

const apolloClient = apolloClientFactory(fakeQl.normalApiEndpoint);
const PostContentQuery = withPostContentQuery(PostContent);
const PostsQuery = withPostsQuery(Posts);

// ~~~ Posts ~~~
storiesOf("GraphQL", module).addParameters({ storySource: { source: __STORY__, locationsMap: __ADDS_MAP__ } }).addDecorator(withSourceLoader(__STORY__, __ADDS_MAP__,__MAIN_FILE_LOCATION__,__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__,__SOURCE_PREFIX__,__IDS_TO_FRAMEWORKS__)).add("PostsQuery", () => (
  <ApolloProvider client={apolloClient}>
    <PostsQuery routeHandler={() => null} />
  </ApolloProvider>
));

// ~~~ PostContent ~~~
storiesOf("GraphQL", module).addParameters({ storySource: { source: __STORY__, locationsMap: __ADDS_MAP__ } }).addDecorator(withSourceLoader(__STORY__, __ADDS_MAP__,__MAIN_FILE_LOCATION__,__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__,__SOURCE_PREFIX__,__IDS_TO_FRAMEWORKS__)).add("PostContentQuery", () => (
  <ApolloProvider client={apolloClient}>
    <PostContentQuery postId="1" />
  </ApolloProvider>
));

@0b10我tsconfig.json 🤔

将 storybook-react-router 更新到 1.0.6 后，我在这里遇到错误，其中有一个问题未解决：gvaldambrini/storybook-router#42我在这里没有收到错误（storybook-router 错误可能不相关，请参阅下面的评论)

我的 TSX 故事中的“无可用代码”，MDX 工作正常，结果看起来相似/完全像@0b10的故事

  // @ts-ignore
  var withSourceLoader = require('@storybook/source-loader/preview').withSource;
  // @ts-ignore
  var __SOURCE_PREFIX__ = "C:\\Workspace\\application-ui\\src\\components\\atoms\\container";
  // @ts-ignore
  var __STORY__ = "import { storiesOf } from \"@storybook/react\";\nimport React, { ReactElement } from \"react\";\n\nimport { Container } from \"components\";\n\nconst stories = storiesOf(\"Atoms/Container\", module).addParameters({ component: Container });\n\nstories.add(\"Default\", (): ReactElement => <Container>Hello</Container>);\n";
  // @ts-ignore
  var __ADDS_MAP__ = {};
  // @ts-ignore
  var __MAIN_FILE_LOCATION__ = "/Container.stories.tsx";
  // @ts-ignore
  var __MODULE_DEPENDENCIES__ = [];
  // @ts-ignore
  var __LOCAL_DEPENDENCIES__ = {};
  // @ts-ignore
  var __IDS_TO_FRAMEWORKS__ = {};

  import { storiesOf } from "@storybook/react";
import React, { ReactElement } from "react";

import { Container } from "components";

const stories = storiesOf("Atoms/Container", module).addParameters({ storySource: { source: __STORY__, locationsMap: __ADDS_MAP__ } }).addDecorator(withSourceLoader(__STORY__, __ADDS_MAP__,__MAIN_FILE_LOCATION__,__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__,__SOURCE_PREFIX__,__IDS_TO_FRAMEWORKS__)).addParameters({ component: Container });

stories.add("Default", (): ReactElement => <Container>Hello</Container>);

更新了 config.js，因为它只是docs: DocsPage

    docs: {
        container: DocsContainer,
        page: DocsPage,
    },

预设：

module.exports = [
    {
        name: "@storybook/addon-docs/react/preset",
        options: {
            configureJSX: true,
        },
    },
];

Webpack 配置，可能不需要？

    config.module.rules.push({
        exclude: /node_modules/,
        test: /\.(ts|tsx)$/,
        use: [
            {
                loader: require.resolve("babel-loader"),
                options: {
                    presets: [["react-app", { flow: false, typescript: true }]],
                },
            },
            {
                loader: require.resolve("react-docgen-typescript-loader"),
            },
        ],
    });

    config.module.rules.push({
        enforce: "pre",
        include: [path.resolve(__dirname, "../src")],
        loader: require.resolve("@storybook/source-loader"),
        test: /\.(stories|story)\.[tj]sx?$/,
    });

tsconfig.json 包含"noImplicitAny": true而没有ignoreDiagnostics 😕

不再看到rc.4 ，但没有来源😞 虽然看起来这也被标记在 #6641 中，所以现在错误不再存在，这个问题可能是重复的

我找到了解决方法！

• 我没有使用sourceLoaderOptions: null ，而是在transpileOnly: true tsLoaderOptions
• 按照#8055 中的解决方法，其中不能有顶级parameters变量
• 出于某种原因，使用诸如as 'optionA' | 'optionB'类的右手语句在这里失败，必须转换为左手类型声明。

这失败了：

const colors = {
  primary: 'primary',
  secondary: 'secondary',
};

const color = radios('color', colors, colors.primary) as ButtonColor;

这有效：

const colors: Record<string, ButtonColor> = {
  primary: 'primary',
  secondary: 'secondary',
};

const color = radios('color', colors, colors.primary);

事后看来，这似乎是一个可以理解的source-loader类型推断问题🤔，无论如何，希望这会有所帮助！

@enagy27你为解决这个问题而@libetl会在 5.3 的某个时候重新上线，我们可以升级source-loader以便不需要这些变通方法。 手指交叉！ 🤞

你好。 有人可以提供一个示例 repo，其中带有 react 打字稿和文档的故事书正在工作吗？

@simonhoss这是个好主意，我真的很难

我也是😄

TS 说明将您指向react-docgen-typescript-loader ，它说要安装addon-info但在文档的前面不是说addon-docs是addon-info的替代品吗？ 使用 TS 或在一个地方专门用于使用 TS 设置addon-docs一些明确说明来查看此工作设置会非常有帮助。

乐于贡献和提供帮助，但首先需要了解这些部分是如何组合在一起的！ 👍

现在文档已经发布，我可能需要一些时间来更新cra-ts-kitchen-sink以确保我们都在同一页面上进行配置🙂 不过可能需要一周左右的时间......现在我将提供我的配置：

.storybook/addons.js

import '@storybook/addon-knobs/register';
import '@storybook/addon-a11y/register';
import '@storybook/addon-actions/register';

.storybook/config.js

import { configure, addDecorator, addParameters } from '@storybook/react';
import { withA11y } from '@storybook/addon-a11y';
import { withKnobs } from '@storybook/addon-knobs';

import theme from './theme';
import '../stylesheets/gusto.scss';

// This file overrides styles from the global Gusto
// styles which interfere with Storybook styles
import './storybook.scss';

// Is your addon not showing up? Try looking for a `register` function
// and add it to .storybook/addons.js
addDecorator(withA11y);
addDecorator(withKnobs);

addParameters({
  // storybook built-in
  // more info available here:
  // https://storybook.js.org/docs/configurations/options-parameter/
  options: {
    showPanel: true,
    panelPosition: 'right',
    // https://storybook.js.org/docs/configurations/theming/
    theme,
  },
  knobs: {
    escapeHTML: false,
  },
  // viewport structure here:
  // https://github.com/storybookjs/storybook/tree/master/addons/viewport#use-custom-set-of-devices
  // viewport: {
  //   defaultViewport: 'iphone6',
  //   type: 'mobile',
  // },
});

configure(require.context('../src', true, /\.stories\.(js|jsx|ts|tsx|mdx)$/), module);

.storybook/presets.js

const path = require('path');

module.exports = [
  '@storybook/preset-scss',
  {
    name: '@storybook/preset-typescript',
    options: {
      // Point the loader here to override the root "noEmit" compilerOption
      tsLoaderOptions: {
        // Transpile only means no type-checking from storybook, which greatly speeds up
        // builds. Types will be checked as part of the normal build process. This may also
        // be necessary for loading story source
        transpileOnly: true,
        configFile: path.resolve(__dirname, 'tsconfig.json'),
      },
      // We must use our config to ensure props and their comments are loaded
      tsDocgenLoaderOptions: {
        tsconfigPath: path.resolve(__dirname, 'tsconfig.json'),
        // https://github.com/styleguidist/react-docgen-typescript#parseroptions
        propFilter: prop => {
          if (prop.parent) {
            return !prop.parent.fileName.includes('node_modules/@types/react/');
          }

          return true;
        },
      },
    },
  },
  '@storybook/addon-docs/react/preset',
];

.storybook/theme.js

我不能分享这个，因为它是我公司的内部，但它在config.js引用。

.storybook/tsconfig.json

该文件仅用于删除在故事书中没有意义的根tsconfig.json中的配置。

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "noEmit": false
  }
}

嗨@enagy27 - 谢谢你。 我有点使用自定义 webpack 配置。 出于某种奇怪的原因使用打字稿预设阻止我能够在故事书中导入资产，即 - css 文件。

我遇到的一个小问题是我的 props 表无法推断这样的类型：

SomeType['property']现在我在我的桌子上看到any而不是工会，我想知道是否有办法解决这个问题。

嗨，@enagy27。 谢谢你。 我已经使用您共享的配置进行了此操作。但是仍然存在一些问题。 当我用tsx编写组件时，它无法生成组件描述和道具描述。 但它适用于 jsx。

嗨@zerofront。 我必须遵循这个确切的评论模式

组件说明：

/**
 * This is a component description and should sit directly above your component
 */

道具说明：

/** I am a prop description and should sit directly above the interface property i am describing */

@enagy27实际上，我遵循了您在我的第一张照片中显示的评论模式

@zerofront您将需要组件的 Typescript 类型。 您可以改为使用export const Button: React.FC<BaseButtonProps> = props => {...}

👆我的 TS 和 docgen 设置由于某种原因不适用于泛型，在这里创建了一个问题 #8143，它解释了

@zerofront我正好有你的问题。 在 Button 文档的 props 部分，Storybook 正在打印defaultProps而不是BaseButtonProps界面。 我也想念描述。 关于副标题，可以在故事文件中添加，方法如下：

export default {
  title: 'Button',
  component: Button,
  parameters: {
    componentSubtitle: 'Handy status label',
  },
}

@zerofront除了@enagy27所说的。
为了使用*.stories.tsx ，您需要添加如下配置：

.storybook/webpack.config.js

const path = require('path');
const include = path.resolve(__dirname, '../src');

module.exports = ({ config }) => {
  config.module.rules.push({
    test: /\.ts(x?)$/,
    exclude: /node_modules/,
    use: [
      {
        loader: require.resolve('babel-loader'),
        options: {
          presets: [['react-app', { flow: false, typescript: true }]],
        },
      },
    ],
    include,
  });
  return config;
};

@zerofront您将需要组件的 Typescript 类型。 您可以改为使用export const Button: React.FC<BaseButtonProps> = props => {...}

@zerofront @enagy27昨天我发现我的问题（显然与@zerofront 相同）正是由函数的返回类型引起的。

这对我来说是固定的：

- import React from 'react'
+ import React, { FC } from 'react'

- export const Button: React.FC<Props>
+ export const Button: FC<Props>

来源：
https://github.com/strothj/react-docgen-typescript-loader/issues/42#issuecomment -535090697
部分此注释可能与以下内容有关：
https://github.com/strothj/react-docgen-typescript-loader#react -component-class-import

我希望这会有所帮助。

@sergiop @enagy27谢谢！ 最终，道具表起作用了。
但仍然存在一些问题。

如果 defaultProps 不是字符串类型，则无法生成。

@zerofront我可以确认我有同样的问题。 它在我要设法解决的问题的待办事项列表中。 ;-)
如果您想寻找原因，您可能应该开始尝试了解它是与故事书本身有关还是与react-docgen-typescript-loader 。

@zerofront也许最好打开一个专门的问题。 ;-)

我很幸运在解构道具的同时设置了默认道具。 很确定它也适用于非字符串值。

IE：

const Text = ({
text: 'Hello world'
}: Props) => <p>{text}</p>

我很幸运在解构道具的同时设置了默认道具。 很确定它也适用于非字符串值。

IE：

const Text = ({
text: 'Hello world'
}: Props) => <p>{text}</p>

@sami616我使用和你一样的默认道具，但我没有看到非字符串的默认值，因为@zerofront已经报告了。

忽略我的评论，是的，我有同样的问题。

@sami616 ，正如已经说过的，我想就此打开一个错误报告，但在此之前我需要对代码库进行一些调查，以了解问题的根源是storybook还是react-docgen-typescript-loader 。 通过这种方式，我将在正确的项目上打开问题。

@sami616 @sergiop
我安装 react-docgen-typescript-loader 版本 3.2.1
我在 node_modules/react-docgen-typescript-loader/dist/generateDocgenCodeBlock 中找到了一些代码

var setDefaultValue = function(defaultValue) {
    return typescript_1.default.createPropertyAssignment(
      typescript_1.default.createLiteral('defaultValue'),
      // Use a more extensive check on defaultValue. Sometimes the parser
      // returns an empty object.
      defaultValue != null && typeof defaultValue === 'object' && 'value' in defaultValue && typeof defaultValue.value === 'string'
        ? typescript_1.default.createObjectLiteral([
            typescript_1.default.createPropertyAssignment(
              typescript_1.default.createIdentifier('value'),
              typescript_1.default.createLiteral(defaultValue.value),
            ),
          ])
        : typescript_1.default.createNull(),
    );
  };

&& typeof defaultValue.value === 'string'

这个条件限制了 defaultProps 的类型。

并且在最新版本 3.3.0 react-docgen-typescript-loader 中，它支持字符串、数字、布尔值

https://github.com/strothj/react-docgen-typescript-loader/blob/master/src/generateDocgenCodeBlock.ts

const setDefaultValue = (
    defaultValue: { value: string | number | boolean } | null,
  ) =>
    ts.createPropertyAssignment(
      ts.createLiteral("defaultValue"),
      // Use a more extensive check on defaultValue. Sometimes the parser
      // returns an empty object.
      defaultValue != null &&
        typeof defaultValue === "object" &&
        "value" in defaultValue &&
        (typeof defaultValue.value === "string" ||
          typeof defaultValue.value === "number" ||
          typeof defaultValue.value === "boolean")
        ? ts.createObjectLiteral([
            ts.createPropertyAssignment(
              ts.createIdentifier("value"),
              ts.createLiteral(defaultValue!.value),
            ),
          ])
        : ts.createNull(),
    );

@zerofront ，很高兴知道。 我也有 3.2.1。 今天早上晚些时候，我将它更新到 3.3.0，看看这是否能解决问题。 谢谢。

@zerofront我可以确认将react-docgen-typescript-loader更新到 3.3.0 将解决该问题。 谢谢。

如果您使用 awesome-typescript-loader 的临时解决方案：

/* tsconfig.json */
{
  "compilerOptions": { },
  "awesomeTypescriptLoaderOptions": {
    "ignoreDiagnostics": [7005]
  }
}

不理想，但它有效。

我今天刚刚从 5.1 更新到 5.2.5 并开始收到此错误，但尚未安装 addon-docs。 这个解决方案对我有用，尽管我不得不说我的原因并不清楚。

嗨，大家好！ 最近这个问题好像没什么大不了的。 如果还有问题、意见或错误，请随时继续讨论。 不幸的是，我们没有时间处理每一个问题。 我们始终对贡献持开放态度，因此如果您愿意提供帮助，请向我们发送请求请求。 非活动问题将在 30 天后关闭。 谢谢！

对于"@storybook/react": "5.2.6"和"react-docgen-typescript-loader": "3.6.0"版本，我仍然收到此问题中描述的错误。 不确定这是否相关，但在此处引用的 PR 中将// @ts-ignore s 添加到__MODULE_DEPENDENCIES__的唯一文件是src/server/build.js，而它在src 中仍未被忽略

@jalooc请查看 5.3 测试版。 道具表的大量改进。

@shilman我相信我最后在 beta.6 上尝试过这个，如果没有解决方法，它就无法运行。 我会用最新的再试一次😄

我仍然遇到故事书 5.3 的这个问题。 [email protected]和 react-docgen-typescript-loader 3.6.0。

为我修复它的唯一方法是在tsconfig.json中设置"noImplicitAny": false tsconfig.json ，我真的不想这样做。

我得到的错误是这个：
TS7005: Variable '__MODULE_DEPENDENCIES__' implicitly has an 'any[]' type.

即使我在我的故事中添加了一种类型，它也不能完全解决问题。

跟进，我使用@enagy27 提到的transpileOnly选项让它工作。 我正在使用预设而不是完整的 webpack 配置，这是目前我的presets.js 。 tsconfig.json没有变化：

// presets.js
const path = require("path");

module.exports = [
    {
        name: "@storybook/preset-typescript",
        options: {
            tsLoaderOptions: {
                configFile: path.resolve(__dirname, "../tsconfig.json"),
                transpileOnly: true,
            },
            tsDocgenLoaderOptions: {
                tsconfigPath: path.resolve(__dirname, "../tsconfig.json"),
            },
            include: [path.resolve(__dirname, "../src")],
        },
    },
    {
        name: "@storybook/addon-docs/react/preset",
        options: {
            configureJSX: true,
            //sourceLoaderOptions: null,
        },
    },
];

有任何更新吗？ 我们正在尝试将故事书插件与 TS 一起使用，即使使用变通方法也无法解决这个问题。 继续接收
“变量 '__MODULE_DEPENDENCIES__' 隐式具有 'any[]' 类型。”

目前已尝试将 storybook 更新到 5.3.0-beta.16，并尝试了此处提到的其他解决方法。 谢谢

我无法让故事书插件文档显示带有打字稿的道具表。 它只是说“找不到组件”。

插件.js

import '@storybook/addon-knobs/register'
import '@storybook/addon-a11y/register'
import '@storybook/addon-docs/register'

预设.js

module.exports = [
  {
    name: "@storybook/addon-docs/react/preset",
    options: {
      configureJSX: true,
    }
  }
]

webpack.config.js

const path = require('path')
const SRC_PATH = path.join(__dirname, '../src')

module.exports = ({ config }) => {
    config.module.rules.push({
        test: /\.(ts|tsx|js|jsx)$/,
        include: [SRC_PATH],
        use: [
            {
                loader: require.resolve('babel-loader'),
                options: {
                    presets: [['react-app', { flow: false, typescript: true }]],
                    plugins: ['babel-plugin-styled-components']
                },
            },
            {
                loader: require.resolve('react-docgen-typescript-loader'),
                options: {
                    tsconfigPath: path.resolve(__dirname, '../tsconfig.json'),
                },
            },
            {
                loader: require.resolve('@storybook/source-loader'),
                options: { parser: 'typescript',  injectParameters: true, },
            },
        ],
        exclude: [/node_modules/],
        enforce: 'pre',

    })

    config.resolve.extensions.push('.ts', '.tsx', '.js', '.jsx')
    return config
}

故事书 5.2.8
附加文档 5.2.8
react-docgen-typescript-loader 3.6.0
巴贝尔装载机 8.0.6
@storybook/source-loader 5.2.8

此外，如果我使用 Component Story Format 故事书根本找不到组件（画布和文档和菜单是空白的），但如果我使用 storiesOf 它会显示它们。

作为一种解决方法，您可以将文档生成指向 tsconfig.json 并关闭严格的规则。 我想我现在就这样解决了。 有兴趣的可以下周复查。

这些是我的配置，可能会有所帮助。
git 它工作完成。

++它的
导出 const AccordionItem
我没有 webpack.config.js

对于仍在苦苦挣扎的其他人，在对 react-docgen-typescript-loader 进行了一些痛苦的调试后，我终于设法让它工作了。

React-docgen-typescript-loader 使用文件夹名称而不是组件名称分配__docgeninfo ，因此您必须将组件放在同名的文件夹中（区分大小写）。

|__
  CTALink
    |___index.tsx

我无法让 CSF 格式工作（总是空白），但是当使用storiesOf语法时，您必须使用 storybook 中的addParameters函数包含组件，以便获取道具表.

storiesOf('CTALink', module)
  .addParameters({
    component: CTALink,
  })
  .add('default story', () => (
    <CTALink to="/">Click here</CTALink>
  ))

嗨，大家好！ 最近这个问题好像没什么大不了的。 如果还有问题、意见或错误，请随时继续讨论。 不幸的是，我们没有时间处理每一个问题。 我们始终对贡献持开放态度，因此如果您愿意提供帮助，请向我们发送请求请求。 非活动问题将在 30 天后关闭。 谢谢！

Typescript 应该在 5.3 的源代码块中工作。 关闭。

我已将@storybook/react和@storybook/addon-docs为 5.3.0-rc.4，但不断收到错误消息TS7005: Variable '__MODULE_DEPENDENCIES__' implicitly has an 'any[]' type.

我没有使用预设，而且我是 webpack 的新手，所以我可能犯了一些错误。
这是我的 webpack.config.js：
```const path = require('path');

模块.出口 = {
节点：{
fs: '空',
child_process: '空'
},
解决： {
模块： [
'节点模块'，
],
扩展名：[".ts", ".tsx"],
符号链接：真的
},
模块： {
规则：[
{
测试：/.(ts|tsx)$/,
用： [
{
loader: require.resolve('awesome-typescript-loader')
},
{
loader: require.resolve('react-docgen-typescript-loader')
},
]
},
{
测试：/.(故事|故事).[tj]sx?$/,
loader: require.resolve('@storybook/source-loader')
}
]
},
外部：{
'类变压器'：'类变压器'
}
};
``

哟嗬嗬！！ 我刚刚发布了包含引用此问题的 PR #9272 的https://github.com/storybookjs/storybook/releases/tag/v5.3.0-rc.5 。 立即升级试用！

您可以在@next NPM 标签上找到此预发行版。

@JacopoBonta你能试试最新版本的5.3.0-rc.5吗？

你好@shilman感谢您对文档与故事书相结合的惊人支持。
我更新为5.3.0-rc.5 ，但仍然收到错误TS7005: Variable '__MODULE_DEPENDENCIES__' implicitly has an 'any[]' type.

仅当我将ignoreDiagnostics: [7005]到ts-loader配置时才有效，如下所示。

文件main.js ：

const { addons } = require('@storybook/addons');
const path = require('path');
const tsImportPluginFactory = require('ts-import-plugin')

module.exports = {
  stories: ['../packages/**/*.stories.(tsx|mdx)'],
  presets: [
    {
      name: '@storybook/preset-typescript',
      options: {
        tsLoaderOptions: {
          configFile: path.resolve(__dirname, 'tsconfig.json'),
          ignoreDiagnostics: [7005],
          getCustomTransformers: () => ({
            before: [ tsImportPluginFactory(
              {
                libraryName: 'antd',
                style: 'css',
                libraryDirectory: 'es'
              }
            ) ]
          }),
        },
        tsDocgenLoaderOptions: {
          tsconfigPath: path.resolve(__dirname, 'tsconfig.json'),
        },
        forkTsCheckerWebpackPluginOptions: {
          colors: false, // disables built-in colors in logger messages
        },
        include: [path.resolve(__dirname, "../packages")]
      },
    },
    {
      name: '@storybook/addon-docs/preset',
      options: {
      }
    }],
  addons: [
    '@storybook/addon-docs/register',
    '@storybook/addon-knobs/register',
    '@storybook/addon-actions/register',
    '@storybook/addon-links/register'
  ],
};

@JacopoBonta你能试试最新版本的5.3.0-rc.5吗？

抱歉，升级到5.3.0-rc.5没有用。
我已经更新了@storybook/react和@storybook/addon-docs但仍然出现相同的错误。

AcJacopoBonta你能@esakal的解决方法吗？

@JacopoBonta我看到您正在使用awesome-typescript-loader 。 我目前正在使用其他加载程序，但是当我一个月前使用该加载程序时，我做了类似的解决方法。 对于awesome-typescript-loader您应该执行以下操作：

/* tsconfig.json */
{
  "compilerOptions": { },
  "awesomeTypescriptLoaderOptions": {
    "ignoreDiagnostics": [7005]
  }
}

取自这里

是的，它有效。 我之前已经在使用这种解决方法，但我正在寻找一种没有它的方法。

无论如何，感谢您的帮助我非常感谢，新年快乐🎉

谢谢@esakal，到目前为止，您的解决方案是最好的（对我而言）。 我曾经设置transpileOnly: true来修复 TypeScript 问题，但是 ofc 的效果是允许更多的 TypeScript 错误被忽视。

我目前非常小的配置（ presets.js ）如下所示：

const path = require("path");

module.exports = [
    {
        name: "@storybook/preset-typescript",
        options: {
            tsLoaderOptions: {
                configFile: path.resolve(__dirname, "../tsconfig.json"),
                ignoreDiagnostics: [7005],
            },
        },
    },
    {
        name: "@storybook/addon-docs/preset",
        options: {
            configureJSX: true,
        },
    },
];

谢谢！