Storybook: 애드온 문서: 소스 문서 블록 Typescript 지원

@enagy27 감사합니다! 여기에는 최소한 몇 가지 옵션이 있습니다.

1) source-loader 는 타이프스크립트에 더 친숙한 코드를 출력할 수 있습니다.
2) 사용자는 typescript를 다르게 구성할 수 있습니다(모노레포에서 본 적이 없음)
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의 변경 사항이 포함되어 있는지 확인할 수 있습니까? ( .mdx 를 .tsx 바꾸고 나머지는 적용해야 함)

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__ 이 제대로 이스케이프되지 않는지 궁금합니다. 하지만 TS가 아닌 JS에서 어떻게 작동하는지 알 수 없습니다...

저도 이 문제를 겪고 있지만 불행히도 추가 컨텍스트가 많지 않습니다.

여기서 또 다른 해결책은 스토리북이 로드하는 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>);

docs: DocsPage 였으므로 config.js를 업데이트했습니다.

    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
• 최상위 parameters 변수가 있을 수 없는 #8055의 해결 방법을 따르십시오.
• 어떤 이유로 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 업그레이드하면 됩니다. 손가락이 교차! 🤞

안녕하세요. 누군가 반응형 스크립트와 문서가 있는 스토리북이 작동하는 예제 리포지토리를 제공할 수 있습니까?

@simonhoss 이것은 좋은 아이디어입니다. 이 작업을 수행하는 데 정말 어려움을 겪고 있습니다.

나도 😄

TS 지침은 addon-info 를 설치하라는 react-docgen-typescript-loader 를 가리키지만 설명서의 앞부분에는 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';

.스토리북/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 에서 참조됩니다.

.스토리북/tsconfig.json

이 파일은 루트 tsconfig.json 구성을 제거하는 역할만 하며 이는 여기 스토리북에서 의미가 없습니다.

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

안녕하세요 @enagy27 - 감사합니다. 나는 이것을 사용자 정의 webpack 구성으로 작업했습니다. 이상한 이유로 typescript 사전 설정을 사용하면 스토리북의 에셋(예: CSS 파일)을 가져올 수 없습니다.

내가 직면한 한 가지 작은 문제는 내 props 테이블이 다음과 같은 유형을 유추할 수 없다는 것입니다.

SomeType['property'] 지금 내 테이블에 Union 대신 any 가 표시됩니다. 이 문제를 해결할 수 있는 방법이 있는지 궁금합니다.

안녕하세요 @enagy27입니다. 감사합니다. 공유한 구성으로 이 작업을 수행했습니다.하지만 여전히 문제가 있습니다. tsx로 component를 작성할 때 component description과 props description을 생성할 수 없습니다. 하지만 그것은 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 문서의 소품 섹션에서 Storybook은 BaseButtonProps 인터페이스 대신 defaultProps 를 인쇄합니다. 그리고 설명도 생략합니다. 자막에 대해 다음과 같이 스토리 파일에 추가할 수 있습니다.

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 감사합니다! 결국 props 테이블이 작동합니다.
그러나 여전히 몇 가지 문제가 있습니다.

defaultProps가 string형이 아니면 생성할 수 없습니다.

@zerofront 동일한 문제가 있음을 확인할 수 있습니다. 해결해야 할 문제 목록에 있습니다. ;-)
원인을 찾고 싶다면 스토리북 자체와 관련이 있는지 아니면 react-docgen-typescript-loader 와 관련이 있는지 이해하기 시작해야 합니다.

@zerofront 아마도 전용 문제를 여는 것이 더

소품을 구조화하는 동안 기본 소품을 설정하는 데 운이 좋았습니다. 문자열이 아닌 값으로도 작동한다고 확신합니다.

즉:

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

소품을 구조화하는 동안 기본 소품을 설정하는 데 운이 좋았습니다. 문자열이 아닌 값으로도 작동한다고 확신합니다.

즉:

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에서는 string、number、boolean을 지원합니다.

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 에 __MODULE_DEPENDENCIES__ 에 추가된 유일한 파일은 src/server/build.js뿐이지 만 src 에서는 여전히 무시됩니다.

@jalooc 5.3 베타를 확인하십시오. 소품 테이블에 대한 수많은 개선 사항.

@shilman 나는 이것을 beta.6에서 마지막으로 시도했으며 해결 방법 없이는 작동하지 않았다고 생각합니다. 😄 최신작으로 다시 도전해보겠습니다.

스토리북 5.3에서 여전히 이 문제가 발생합니다. [email protected] 및 react-docgen-typescript-loader 3.6.0.

나를 위해 그것을 고칠 수 있는 유일한 방법은 내가 정말로 하고 싶지 않은 "noImplicitAny": false in tsconfig.json 하는 것이었습니다.

내가 얻는 오류는 다음과 같습니다.
TS7005: Variable '__MODULE_DEPENDENCIES__' implicitly has an 'any[]' type.

내 이야기에 유형을 추가해도 문제가 완전히 해결되지 않습니다.

후속 조치로 @enagy27이 언급한 transpileOnly 옵션을 사용하여 작동하도록 했습니다. 전체 웹팩 구성 대신 사전 설정을 사용하고 있습니다. 이것은 현재 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[]' 유형이 있습니다."

현재 스토리북을 5.3.0-beta.16으로 업데이트하고 여기에 언급된 다른 해결 방법을 시도했습니다. 감사 해요

typescript가 있는 props 테이블을 표시하기 위해 스토리북 addon-docs를 가져올 수 없습니다. "구성요소를 찾을 수 없습니다"라고만 표시됩니다.

addons.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,
    }
  }
]

웹팩.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을 사용하면 스토리북이 구성 요소를 전혀 찾지 않지만(캔버스와 문서 및 메뉴가 비어 있음)storyOf를 사용하면 구성 요소를 표시합니다.

해결 방법으로 엄격한 규칙이 해제된 상태에서 문서 생성을 tsconfig.json으로 지정할 수 있습니다. 일단 이렇게 해결한 것 같아요. 관심있는 사람이 있으면 다음 주에 다시 확인할 수 있습니다.

이것은 내 구성이며 도움이 될 수 있습니다.
git 작동이 완료되었습니다.

++ 그
const AccordionItem 내보내기
webpack.config.js가 없습니다.

여전히 고군분투하는 다른 누군가를 위해 react-docgen-typescript-loader의 고통스러운 디버깅 후에 마침내 작동하도록 관리했습니다.

React-docgen-typescript-loader는 구성 요소 이름이 아닌 폴더 이름을 사용하여 __docgeninfo 를 할당하므로 구성 요소를 같은 이름의 폴더에 넣어야 합니다(대소문자 구분).

|__
  CTALink
    |___index.tsx

CSF 형식을 사용할 수 없었지만(항상 비어 있음) storiesOf 구문을 사용할 때 props 테이블을 선택하려면 스토리북에서 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 경로 = require('경로');

module.exports = {
노드: {
fs: '비어 있음',
child_process: '비어 있음'
},
해결하다: {
모듈: [
'노드_모듈',
],
확장자: [".ts", ".tsx"],
심볼릭 링크: 참
},
모듈: {
규칙: [
{
테스트: /.(ts|tsx)$/,
사용하다: [
{
로더: require.resolve('awesome-typescript-loader')
},
{
로더: require.resolve('react-docgen-typescript-loader')
},
]
},
{
테스트: /.(이야기|이야기).[tj]sx?$/,
로더: 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. 오류가 발생합니다.

아래와 같이 ts-loader 구성에 ignoreDiagnostics: [7005] 를 추가한 경우에만 작동합니다.

파일 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 감사합니다. 솔루션은 지금까지 (저에게) 최고입니다. TypeScript 문제를 해결하기 위해 transpileOnly: true 를 설정했지만 그 결과 더 많은 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,
        },
    },
];

감사합니다!