Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Merge pull request #9716 from sakito21/fix/docs-configurations-typescript-config #9716

Merged
merged 1 commit into from
Feb 4, 2020
+3 −5
Merged

Merge pull request #9716 from sakito21/fix/docs-configurations-typescript-config #9716

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 3 additions & 5 deletions docs/src/pages/configurations/typescript-config/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,19 +19,17 @@ You can learn more about Storybook presets [over here](../../presets/introductio

> If using TypeScript, some addons require features available in TS version 3.4+.

## Setting up TypeScript with awesome-typescript-loader
## Setting up TypeScript with ts-loader

### Dependencies you may need

```bash
yarn add -D typescript
yarn add -D awesome-typescript-loader
yarn add -D ts-loader
yarn add -D @storybook/addon-info react-docgen-typescript-loader # optional but recommended
yarn add -D jest "@types/jest" ts-jest #testing
```

We have had the best experience using `awesome-typescript-loader`, but other tutorials may use `ts-loader`, so be sure to configure accordingly. You can even use `babel-loader` with a `ts-loader` configuration.

### Setting up TypeScript to work with Storybook

We [configure storybook's webpack](/configurations/custom-webpack-config/#full-control-mode--default) by changing `.storybook/main.js`:
Expand All @@ -43,7 +41,7 @@ module.exports = {
test: /\.(ts|tsx)$/,
use: [
{
loader: require.resolve('awesome-typescript-loader'),
loader: require.resolve('ts-loader'),
},
// Optional
{
Expand Down