GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-02 05:03:44 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #5928 from jangerhofer/next

Browse Source 
Docs: Typescript Configuration Examples for v5
This commit is contained in:
Michael Shilman 2019-03-07 12:12:01 +08:00 committed by GitHub
commit 10cb244251
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 14 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
docs/src/pages/configurations/typescript-config/index.md
View File

@ -25,21 +25,25 @@ We first have to use the [custom Webpack config in full control mode, extending
```js
const path = require('path');
module.exports = (baseConfig, env, config) => {
module.exports = ({ config, mode }) => {
config.module.rules.push({
test: /\.(ts|tsx)$/,
use: [{
loader: require.resolve('awesome-typescript-loader')
}, {
loader: require.resolve('react-docgen-typescript-loader')
}]
use: [
{
loader: require.resolve('awesome-typescript-loader')
},
// Optional
{
loader: require.resolve('react-docgen-typescript-loader')
}
]
});
config.resolve.extensions.push('.ts', '.tsx');
return config;
};
```
The above example shows a working Webpack config with the TSDocgen plugin also integrated; remove the optional sections if you don't plan on using them.
The above example shows a working Webpack config with the [TSDocgen plugin](https://github.com/strothj/react-docgen-typescript-loader) integrated. This plugin is not necessary to use Storybook and the section marked `// optional` can be safely removed if the features of TSDocgen are not required.
### `tsconfig.json`
@ -91,13 +95,13 @@ yarn add -D @types/storybook__react # typings
We first have to use the [custom Webpack config in full control mode, extending default configs](/configurations/custom-webpack-config/#full-control-mode--default) by creating a `webpack.config.js` file in our Storybook configuration directory (by default, it’s `.storybook`):
```js
module.exports = (baseConfig, env, config) => {
module.exports = ({ config, mode }) => {
config.module.rules.push({
test: /\.(ts|tsx)$/,
loader: require.resolve('babel-loader'),
options: {
presets: [['react-app', { flow: false, typescript: true }]],
},
presets: [['react-app', { flow: false, typescript: true }]]
}
});
config.resolve.extensions.push('.ts', '.tsx');
return config;