react storybook使用typescript

在前面的文章有介绍在storybook中使用antd
之前开发js是使用的flow来作类型检查,最近想尝试一下typescript。
如果是从头创建一个空的typescript项目则相对就比较简单,但是现在我们是需要将之前的create-react-app项目迁移到typescript。

在create-react-app中添加typescript

参考 https://facebook.github.io/create-react-app/docs/adding-typescript
react-scripts从2.1.0版本开始就支持typescript了,这里我们先将项目的react-scripts依赖升级到最新版本:

1
yarn add --exact react-scripts@2.1.8

然后再添加typescript依赖:

1
yarn add typescript @types/node @types/react @types/react-dom @types/jest

然后将 src/index.js 更名为 src/index.tsx
接着创建 tsconfig.json 文件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
{
"compilerOptions": {
"module": "esnext",
"target": "es5",
"lib": ["es5", "es6", "es7", "es2017", "dom"],
"sourceMap": true,
"allowJs": true,
"moduleResolution": "node",
"forceConsistentCasingInFileNames": true,
"skipLibCheck": false,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "preserve"
},
"include": [
"src/**/*"
]
}

在storybook中添加typescript

参考 https://storybook.js.org/docs/configurations/typescript-config/
同样也先将storybook升级到最新版:

1
yarn add --dev --exact @storybook/addons@5.0.1 @storybook/react@5.0.1

然后再添加依赖:
1
yarn add --dev awesome-typescript-loader @types/storybook__react @storybook/addon-info react-docgen-typescript-webpack-plugin ts-jest

接着修改webpack配置,对应.storybook/webpack.config.js文件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
const path = require("path");
const antdTheme = {
'@primary-color': '#846bc1',
}

module.exports = ({ config, mode }) => {
config.module.rules.push({
test: /\.less$/,
use: [{
loader: "style-loader"
}, {
loader: "css-loader"
}, {
loader: "less-loader",
options: {
modifyVars: antdTheme, // 如果要自定义主题样式
javascriptEnabled: true
}
}]
});
config.module.rules.push({
test: /\.(ts|tsx)$/,
loader: require.resolve('awesome-typescript-loader'),
options: { configFileName: path.resolve(__dirname, './tsconfig.json') }
});
config.resolve.extensions.push('.ts', '.tsx');

return config;
};

以及babel配置,对应.storybook/babelrc.js文件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
module.exports = function(api) {
api.cache.forever();
return {
"presets": [
[
"@babel/preset-env",
{
"modules": false,
"targets": {
"browsers": [
">1%",
"last 4 versions",
"Firefox ESR",
"not ie < 11"
]
}
}
],
"@babel/preset-react"
],
"plugins": [
[
"import",
{
"libraryName": "antd",
"style": true
}
]
]
}
}

同时修改storybook配置.storybook/config.js,让其支持.tsx文件:
将之前的:

1
const req = require.context('../src/components', true, /\.stories\.js$/)

修改为:
1
const req = require.context('../src/components', true, /\.stories\.[jt]sx?$/)

最后再创建 .storybook/tsconfig.json 文件:

1
2
3
4
5
6
7
8
{
"extends": "../tsconfig",
"compilerOptions": {
"jsx": "react",
"isolatedModules": false,
"noEmit": false
}
}

至此一切都完成了。

运行storybook时若出现错误: Error: Cannot find module '@emotion/core/package.json',则手动安装一下: yarn add --dev @emotion/core