(documentation) Add a "troubleshooting" section to typescript.md #14965
Conversation
Hi, I had trouble setting up TypeScript support and had to search a lot to make it work. This should help the next one!
Nx Cloud ReportCI ran the following commands for commit 8bb12fe. Click to see the status, the terminal output, and the build insights. 📂 See all runs for this branch
Sent with 💌 from NxCloud. |
shilman
added
documentation
patch:yes
|
@Offirmo sorry for not addressing this sooner. I'll take a look at it tomorrow and work with you on any proposed changes. Stay safe |
There was a problem hiding this comment.
@Offirmo left a couple of items that need a bit of polish, let me know once you address them and we'll go from there.
Stay safe
|
|
||
| If storybook is not picking up TypeScript errors, ensure: | ||
| * you have a `tsconfig.json` ([ref](https://github.com/storybookjs/storybook/issues/14118#issuecomment-794698889)) | ||
| * `tsconfig.json` is properly including your files, including `*.tsx`. Example: `"include": [ "stories/**/*" ]` | ||
| * Eventually, run with additional traces: `DEBUG=docgen:include,docgen:exclude yarn storybook` to check if your files are properly processed | ||
|
|
||
| If react docgen is not generating doc based on types, ensure: | ||
| * TypeScript is properly configured (see above) | ||
| * You don't have TypeScript errors | ||
|
|
||
| If using React, if you need help to properly type your components, this site may help: https://react-typescript-cheatsheet.netlify.app/ |
There was a problem hiding this comment.
@Offirmo we have a bit of improvement here we can probably go with:
### Troubleshooting
If you run into issues with TypeScript and Storybook, ensure that:
- Your project contains a `tsconfig.json` file at the root level
- `tsconfig.json` is set up to handle Typescript files (e.g., `"include": [ "stories/**/*.tsx" ]`)
- Follow the [debugging instructions](https://github.com/hipstersmoothie/react-docgen-typescript-plugin#debugging) to check if the story files are processed
<div class="aside">
💡 <strong>Note:</strong> If you need help setting up TypeScript in your project, check the <a href="https://www.typescriptlang.org/">Typescript docs</a>.
</div>The reasoning behind this is that we can shorten the section and prevent repetition. Thus making the documentation a bit more streamlined.
| @@ -2,7 +2,7 @@ | |||
| title: 'TypeScript' | |||
| --- | |||
|
|
|||
| Storybook has built-in Typescript support, so your Typescript project should work with zero configuration needed. | |||
| Storybook has built-in Typescript support, so your Typescript project should work with zero configuration needed. The config files from `.storybook` can be in TypeScript as well. | |||
There was a problem hiding this comment.
@Offirmo if you could revert back to what's currently documented we'd appreciate it. The reasoning behind this is that in the first sentence we're mentioning that Storybook as a whole has Typescript support, despite the config files being created with .js extension.
|
@Offirmo just a friendly reminder if you're willing to work on this pull request. So that the changes you're introducing will help not only you but the rest of the community. Let me know and we'll go from there. Sounds good? Stay safe |
|
@Offirmo closing this for now as the documentation was recently updated! Feel free to reach out to me or open a pull request and ping me and we'll go from there. Have a great week! Stay safe |
Hi, I had trouble setting up TypeScript support and had to search a lot to make it work. (credits to #14118)
This should help the next one!
Issue:
Not able to have TypeScript checks
What I did
Added documentation
How to test
Not needed