Storybook: Addon-docs: Sumber doc block dukungan TypeScript

Terima kasih @enagy27! Setidaknya ada beberapa opsi di sini:

1) source-loader dapat menampilkan kode yang lebih ramah skrip
2) pengguna dapat mengonfigurasi TypeScript secara berbeda (belum melihat ini di monorepo kami)
3) source-loader dapat menghasilkan @ts-ignore untuk solusi

Saya pikir opsi ketiga adalah yang paling mudah untuk memulai, yang pertama mungkin yang terbaik untuk jangka panjang

Hantu Caesar yang hebat!! Saya baru saja merilis https://github.com/storybookjs/storybook/releases/tag/v5.2.0-beta.39 yang berisi PR #7831 yang merujuk pada masalah ini. Tingkatkan hari ini untuk mencobanya!

Anda dapat menemukan prarilis ini pada tag NPM @next .

Menutup masalah ini. Silakan buka kembali jika menurut Anda masih ada yang harus dilakukan.

@ enagy27 tidak memiliki repro, jadi alangkah baiknya jika Anda bisa mencobanya dan beri tahu saya jika berhasil

@shilman benar-benar! Mencobanya sekarang. Terima kasih!

@shilman masih melihat kesalahan ini pada 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'.

Hasil dari 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

Mengingat ini ada di pemuat sumber, apakah itu perlu diinstal secara terpisah dan kemudian diambil oleh preset, atau apakah rilis baru dari preset diperlukan?

@enagy27 dapatkah Anda melihat sumber yang dimuat menggunakan instruksi di sini dan melihat apakah sumber yang dimuat menyertakan perubahan di #7831? (ganti .mdx dengan .tsx dan sisanya harus berlaku)

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

@shilman Saya hanya dapat memulai server ketika sourceLoaderOptions: null berlaku jika tidak, build yang gagal menghentikan memulai server dan saya tidak dapat memeriksa sumber dalam browser. Apakah mungkin ada opsi baris perintah untuk mem-by-pass dan memulai server pada build pertama yang gagal?

Cihui!! Saya baru saja merilis https://github.com/storybookjs/storybook/releases/tag/v5.2.0-beta.40 yang berisi PR #7845 yang merujuk pada masalah ini. Tingkatkan hari ini untuk mencobanya!

Anda dapat menemukan prarilis ini pada tag NPM @next .

@enagy27 Menggabungkan & merilis perubahan Anda. Cobalah?

@shilman tidak beruntung Saya bereksperimen secara lokal dan sepertinya tidak bisa memahaminya. Saya bahkan menipu dan menandai semuanya sebagai as any tetapi sepertinya ia mengeluh tentang variabel duplikat parameters , yang membuat saya bertanya-tanya apakah __STORY__ tidak diloloskan dengan benar? Tapi kemudian saya tidak bisa melihat bagaimana itu akan bekerja untuk JS dan bukan TS... Saya bingung

Saya juga mengalami masalah ini tetapi sayangnya tidak memiliki banyak konteks tambahan.

Solusi lain di sini adalah mengganti semua aturan pemeriksaan ketik "ketat" dalam file tsconfig.js yang dimuat buku cerita (baik tsconfig proyek Anda atau .storybook/tsconfig.js (saya pikir)).

Saya pikir ini adalah yang harus dipastikan tidak diaktifkan:

@libetl Saya tahu Anda sangat sibuk tetapi akan luar biasa jika Anda bisa melihat yang ini.

@JonKrone ketika Anda melakukan ini, apakah Anda melihat kode sumber di tab dokumen? Saya telah membuat modifikasi ini dan saya masih tidak melihat sumbernya

Solusi sementara jika Anda menggunakan awesome-typescript-loader:

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

Tidak ideal, tetapi berhasil.

@shilman Apakah ini yang Anda cari? FYI ini tidak akan dibangun tanpa mengabaikan TS7005 (tidak ada yang tersirat).

  // @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 Saya akan mencobanya, terima kasih! Kami saat ini mengabaikan semua baris itu, tetapi saya tidak berpikir untuk mengubah tsconfig.json juga

Saya mendapatkan kesalahan di sini setelah memperbarui storybook-react-router ke 1.0.6, yang memiliki masalah terbuka: gvaldambrini/storybook-router#42 Saya tidak mendapatkan kesalahan di sini (kesalahan router buku cerita mungkin tidak terkait, lihat komentar di bawah )

"Tidak ada kode yang tersedia" di cerita TSX saya, MDX berfungsi dengan baik, hasilnya terlihat mirip/persis seperti cerita @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 diperbarui karena hanya docs: DocsPage

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

Preset:

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

Konfigurasi Webpack, mungkin tidak diperlukan?

    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 menyertakan "noImplicitAny": true dan tidak ada ignoreDiagnostics

Tidak lagi melihat masalah dengan rc.4 , tetapi tidak ada sumber Meskipun sepertinya ini juga ditandai di #6641, jadi sekarang kesalahan tidak lagi ada, masalah ini mungkin duplikat

Saya telah menemukan solusi!

• Alih-alih menggunakan sourceLoaderOptions: null , saya menggunakan transpileOnly: true di tsLoaderOptions
• Ikuti solusi di #8055, di mana tidak boleh ada variabel parameters tingkat atas
• Untuk beberapa alasan, penggunaan pernyataan tangan kanan seperti as 'optionA' | 'optionB' gagal di sini dan harus dikonversi ke deklarasi tipe tangan kiri.

Ini gagal:

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

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

Ini bekerja:

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

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

Kalau dipikir-pikir ini sepertinya masalah source-loader dimengerti dengan inferensi tipe , semoga ini bisa membantu!

@enagy27 Anda @libetl akan kembali online di beberapa titik di 5.3, dan kami hanya dapat memutakhirkan source-loader sehingga solusi ini tidak diperlukan. Semoga saja! 🤞

Hai. Bisakah seseorang memberikan contoh repo tempat buku cerita dengan skrip reaksi dan dokumen berfungsi?

@simonhoss ini adalah ide bagus, saya benar-benar berjuang untuk

saya juga

Instruksi TS mengarahkan Anda ke react-docgen-typescript-loader yang mengatakan untuk menginstal addon-info tetapi sebelumnya dalam dokumentasi bukankah dikatakan addon-docs adalah pengganti addon-info ? Akan sangat membantu untuk melihat pengaturan yang berfungsi dengan TS atau beberapa instruksi yang jelas di satu tempat khusus untuk mengatur addon-docs dengan TS.

Senang berkontribusi dan membantu tetapi perlu memahami bagaimana bagian-bagian ini cocok terlebih dahulu! 👍

Sekarang setelah dokumen dirilis, saya mungkin dapat meluangkan waktu untuk memperbarui cra-ts-kitchen-sink untuk memastikan kita semua berada di halaman yang sama untuk konfigurasi mungkin sekitar seminggu atau lebih... untuk saat ini Saya akan memberikan konfigurasi saya:

.buku cerita/addons.js

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

.buku cerita/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);

.buku cerita/preset.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',
];

.buku cerita/tema.js

Saya tidak dapat membagikan ini karena ini internal perusahaan saya, tetapi dirujuk dalam config.js .

.buku cerita/tsconfig.json

File ini hanya berfungsi untuk menghapus konfigurasi di root tsconfig.json yang tidak masuk akal di sini di buku cerita.

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

Hai @enagy27 - terima kasih untuk ini. Saya agak membuat ini berfungsi dengan konfigurasi webpack khusus. menggunakan preset TypeScript untuk beberapa alasan aneh menghentikan saya untuk dapat mengimpor aset di buku cerita, yaitu - file css.

Satu masalah kecil yang saya hadapi adalah tabel props saya tidak dapat menyimpulkan tipe seperti ini:

SomeType['property'] sekarang saya melihat any di meja saya alih-alih serikat pekerja, saya ingin tahu apakah ada cara untuk mengatasi ini.

Hai, @enagy27. Terima kasih untuk ini. Saya sudah berhasil dengan konfigurasi yang Anda bagikan, tetapi masih ada beberapa masalah. Itu tidak dapat menghasilkan deskripsi komponen dan deskripsi alat peraga ketika saya menulis komponen dengan tsx. tapi itu bekerja dengan jsx。

Halo @zerofront. saya harus mengikuti pola komentar yang tepat ini

Deskripsi komponen:

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

Deskripsi properti:

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

@enagy27 sebenarnya, saya telah mengikuti pola komentar yang Anda tunjukkan di gambar pertama saya

@zerofront Anda memerlukan tipe TypeScript untuk komponen. Anda dapat menggunakan export const Button: React.FC<BaseButtonProps> = props => {...}

pengaturan saya dengan TS dan docgen tidak berfungsi dengan obat generik karena beberapa alasan, membuat masalah di sini #8143 yang menjelaskan

@zerofront Saya punya masalah Anda. Di bagian props pada dokumen Button Anda, Storybook mencetak antarmuka defaultProps alih-alih BaseButtonProps . Dan aku juga merindukan deskripsinya. Tentang subtitle, Anda dapat menambahkannya di file cerita, dengan cara ini:

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

@zerofront Selain apa yang dikatakan @enagy27 .
Untuk bekerja dengan *.stories.tsx , Anda perlu menambahkan sesuatu seperti konfigurasi ini:

.buku cerita/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 Anda memerlukan tipe TypeScript untuk komponen. Anda dapat menggunakan export const Button: React.FC<BaseButtonProps> = props => {...}

@zerofront @enagy27 kemarin saya menemukan bahwa masalah saya (yang tampaknya sama dengan @zerofront) disebabkan persis oleh tipe pengembalian pada fungsi.

Ini diperbaiki untuk saya:

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

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

Sumber:
https://github.com/strothj/react-docgen-typescript-loader/issues/42#issuecomment -535090697
Dan sebagian catatan ini dapat dikaitkan:
https://github.com/strothj/react-docgen-typescript-loader#react -component-class-import

Saya harap ini bisa membantu.

@sergiop @enagy27 terima kasih! akhirnya, tabel alat peraga berfungsi.
tapi masih ada beberapa masalah.

Jika defaultProps bukan tipe string, Itu tidak dapat dihasilkan.

@zerofront Saya dapat mengonfirmasi bahwa saya memiliki Masalah yang sama. Itu ada dalam daftar masalah yang harus saya selesaikan untuk diperbaiki. ;-)
Jika Anda ingin mencari penyebabnya, Anda mungkin harus mulai mencoba memahami apakah itu terkait dengan buku cerita itu sendiri atau dengan react-docgen-typescript-loader .

@zerofront mungkin lebih baik membuka masalah khusus. ;-)

saya beruntung mengatur alat peraga default saat mendestruktur alat peraga. Cukup yakin itu bekerja dengan nilai non string juga.

yaitu:

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

saya beruntung mengatur alat peraga default saat mendestruktur alat peraga. Cukup yakin itu bekerja dengan nilai non string juga.

yaitu:

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

@ sami616 Saya menggunakan alat peraga default yang sama seperti Anda, tetapi saya tidak melihat default untuk non-string seperti yang sudah dilaporkan oleh @zerofront .

Abaikan komentar saya, ya saya mengalami masalah yang sama.

@sami616 , seperti yang sudah dikatakan, saya ingin membuka laporan bug tentang ini, tetapi sebelum melakukannya saya perlu menyelidiki sedikit tentang basis kode, untuk memahami apakah sumber masalahnya adalah storybook atau react-docgen-typescript-loader . Dengan cara ini saya akan membuka masalah pada proyek yang tepat.

@sami616 @sergiop
Saya menginstal react-docgen-typescript-loader versi 3.2.1
Saya menemukan beberapa kode di 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'

kondisi ini membatasi jenis defaultProps.

Dan di versi terbaru 3.3.0 react-docgen-typescript-loader, Ini mendukung string, angka, 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 , senang mengetahuinya. Saya punya 3.2.1 juga. Nanti pagi ini saya memperbaruinya ke 3.3.0 untuk melihat apakah ini akan menyelesaikan masalah. Terima kasih.

@zerofront Saya dapat mengonfirmasi memperbarui react-docgen-typescript-loader ke 3.3.0 akan menyelesaikan masalah. Terima kasih.

Solusi sementara jika Anda menggunakan awesome-typescript-loader:

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

Tidak ideal, tetapi berhasil.

Saya baru saja memperbarui dari 5.1 ke 5.2.5 hari ini dan mulai mendapatkan kesalahan ini, tanpa menginstal addon-docs. Solusi ini berhasil untuk saya, meskipun saya harus mengatakan itu tidak terlalu jelas bagi saya mengapa.

Halo semuanya! Sepertinya tidak banyak yang terjadi dalam masalah ini akhir-akhir ini. Jika masih ada pertanyaan, komentar, atau bug, jangan ragu untuk melanjutkan diskusi. Sayangnya, kami tidak punya waktu untuk membahas setiap masalah. Kami selalu terbuka untuk kontribusi jadi silakan kirim permintaan tarik jika Anda ingin membantu. Masalah tidak aktif akan ditutup setelah 30 hari. Terima kasih!

Saya masih mendapatkan kesalahan yang dijelaskan dalam masalah ini untuk versi "@storybook/react": "5.2.6" dan "react-docgen-typescript-loader": "3.6.0" . Tidak yakin apakah itu relevan, tetapi satu-satunya file yang telah ditambahkan // @ts-ignore s ke __MODULE_DEPENDENCIES__ di PR yang dirujuk di sini adalah src/server/build.js saat masih tidak diabaikan di src /client/preview.js .

@jalooc silakan periksa 5.3 beta. Banyak perbaikan pada tabel alat peraga.

@shilman Saya yakin saya mencoba yang terakhir ini pada beta.6 dan itu tidak berfungsi tanpa solusi. Saya akan coba lagi dengan yang terbaru

Saya masih mendapatkan masalah ini dengan buku cerita 5.3. [email protected] dan react-docgen-typescript-loader 3.6.0.

Satu-satunya cara untuk memperbaikinya bagi saya adalah dengan menetapkan "noImplicitAny": false di tsconfig.json yang sebenarnya tidak ingin saya lakukan.

Kesalahan yang saya dapatkan adalah yang ini:
TS7005: Variable '__MODULE_DEPENDENCIES__' implicitly has an 'any[]' type.

Bahkan jika saya menambahkan jenis ke cerita saya, itu tidak menyelesaikan masalah sepenuhnya.

Tindak lanjuti, saya membuatnya bekerja menggunakan opsi transpileOnly disebutkan oleh @enagy27. Saya menggunakan preset alih-alih konfigurasi webpack lengkap, saat ini presets.js . Tidak ada perubahan dalam 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,
        },
    },
];

Ada pembaruan tentang ini? Kami mencoba menggunakan add-on buku cerita dengan TS dan tidak dapat melewati ini bahkan dengan solusi. Lanjutkan untuk menerima
"Variabel '__MODULE_DEPENDENCIES__' secara implisit memiliki tipe 'apa saja[]'."

Saat ini telah mencoba memperbarui buku cerita ke 5.3.0-beta.16 dan mencoba solusi lain yang disebutkan di sini. Terima kasih

Saya tidak bisa mendapatkan addon-docs buku cerita untuk menampilkan tabel props dengan TypeScript. Itu hanya mengatakan "Tidak ada komponen yang ditemukan".

addons.js

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

presets.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
}

Buku cerita 5.2.8
Addon-Docs 5.2.8
react-docgen-typescript-loader 3.6.0
babel-loader 8.0.6
@buku cerita/sumber-loader 5.2.8

Juga, jika saya menggunakan buku cerita Component Story Format tidak menemukan komponen sama sekali (kanvas dan dokumen dan menu kosong), tetapi jika saya menggunakan storiesOf itu menampilkannya.

Sebagai solusinya, Anda dapat mengarahkan pembuatan dokumen ke tsconfig.json dengan menonaktifkan aturan ketat. Saya kira saya menyelesaikannya seperti ini untuk saat ini. Bisa recheck minggu depan jika ada yang berminat.

ini adalah konfigurasi saya, mungkin bisa membantu.
git itu bekerja selesai.

++ itu
ekspor const AccordionItem
dan saya tidak punya webpack.config.js

Untuk siapa pun yang masih berjuang, saya akhirnya berhasil membuatnya berfungsi setelah beberapa debugging yang menyakitkan dari react-docgen-typescript-loader.

React-docgen-typescript-loader menetapkan __docgeninfo menggunakan nama folder, bukan nama komponen, jadi Anda harus meletakkan komponen Anda di folder dengan nama yang sama (peka huruf besar/kecil).

|__
  CTALink
    |___index.tsx

Saya tidak bisa membuat format CSF berfungsi (selalu kosong), tetapi ketika menggunakan sintaks storiesOf , Anda harus menyertakan komponen menggunakan fungsi addParameters dari buku cerita agar tabel props dapat diambil .

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

Halo semuanya! Sepertinya tidak banyak yang terjadi dalam masalah ini akhir-akhir ini. Jika masih ada pertanyaan, komentar, atau bug, jangan ragu untuk melanjutkan diskusi. Sayangnya, kami tidak punya waktu untuk membahas setiap masalah. Kami selalu terbuka untuk kontribusi jadi silakan kirim permintaan tarik jika Anda ingin membantu. Masalah tidak aktif akan ditutup setelah 30 hari. Terima kasih!

TypeScript harus bekerja di blok sumber di 5.3. Penutupan.

Saya telah memperbarui @storybook/react dan @storybook/addon-docs ke 5.3.0-rc.4 tetapi tetap mendapatkan pesan kesalahan TS7005: Variable '__MODULE_DEPENDENCIES__' implicitly has an 'any[]' type.

Saya tidak menggunakan preset dan juga saya baru mengenal webpack jadi mungkin saya membuat beberapa kesalahan.
Ini webpack.config.js saya:
```const path = membutuhkan('jalur');

modul.ekspor = {
simpul: {
fs: 'kosong',
child_process: 'kosong'
},
menyelesaikan: {
modul: [
'simpul_modul',
],
ekstensi: [".ts", ".tsx"],
symlink: benar
},
modul: {
aturan: [
{
tes: /.(ts|tsx)$/,
menggunakan: [
{
loader: require.resolve('awesome-typescript-loader')
},
{
loader: require.resolve('react-docgen-typescript-loader')
},
]
},
{
tes: /.(cerita|cerita).[tj]sx?$/,
loader: require.resolve('@storybook/source-loader')
}
]
},
eksternal: {
'transformator kelas': 'transformator kelas'
}
};
```

Yo-ho-ho!! Saya baru saja merilis https://github.com/storybookjs/storybook/releases/tag/v5.3.0-rc.5 yang berisi PR #9272 yang mereferensikan masalah ini. Tingkatkan hari ini untuk mencobanya!

Anda dapat menemukan prarilis ini pada tag NPM @next .

@JacopoBonta dapatkah Anda mencoba rilis terbaru 5.3.0-rc.5 ?

Halo @shilman Terima kasih atas dukungan luar biasa untuk dokumen yang digabungkan dengan buku cerita.
Saya memperbarui ke 5.3.0-rc.5 dan saya masih mendapatkan kesalahan TS7005: Variable '__MODULE_DEPENDENCIES__' implicitly has an 'any[]' type.

Ini hanya berfungsi jika saya menambahkan ignoreDiagnostics: [7005] ke konfigurasi ts-loader seperti yang ditunjukkan di bawah ini.

file 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 dapatkah Anda mencoba rilis terbaru 5.3.0-rc.5 ?

Maaf, tetapi memutakhirkan ke 5.3.0-rc.5 tidak berhasil.
Saya telah memperbarui @storybook/react dan @storybook/addon-docs tetapi tetap mendapatkan kesalahan yang sama.

AcJacopoBonta dapatkah Anda solusi @ esakal ?

@JacopoBonta Saya melihat bahwa Anda menggunakan awesome-typescript-loader . Saat ini saya menggunakan pemuat lain tetapi ketika saya menggunakannya sebulan yang lalu saya melakukan solusi serupa. untuk awesome-typescript-loader Anda harus melakukan hal berikut:

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

diambil dari sini

Ya, itu berhasil. Saya sudah menggunakan solusi ini sebelumnya tetapi saya sedang mencari cara tanpanya.

Bagaimanapun, terima kasih atas bantuannya, saya sangat menghargai dan selamat tahun baru

Terima kasih @esakal solusi Anda adalah yang terbaik (bagi saya) sejauh ini. Saya biasa menyetel transpileOnly: true untuk memperbaiki masalah TypeScript tetapi ofc itu memiliki efek memungkinkan lebih banyak kesalahan TypeScript terjadi tanpa diketahui.

Konfigurasi saya saat ini, cukup minimal ( presets.js ) terlihat seperti ini:

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,
        },
    },
];

Terima kasih!