当我使用babel 7转换打字稿文件时,Proptable不会出现。代码的Github链接。(https://github.com/gmukul01/component-library-ts-boilerplate)
我的故事书的webpack配置文件就是这样
const path = require('path');
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const packages = path.resolve(__dirname, '../', 'packages');
const utils = path.resolve(__dirname, '../', '.storybook/utils');
module.exports = ({ config, mode }) => {
config.module.rules.push({
test: /\.(ts|tsx)$/,
include: [packages, utils],
exclude: [/node_modules/, /\.test.tsx?$/, /__snapshots__/, /__tests__/, /__dist__/],
use: ['babel-loader', 'stylelint-custom-processor-loader', 'react-docgen-typescript-loader']
});
config.plugins.push(new ForkTsCheckerWebpackPlugin());
config.resolve.extensions.push('.ts', '.tsx');
config.resolve.plugins = [new TsconfigPathsPlugin()];
return config;
};
我的组件代码如下:
import { WithStyle } from '@core-utils/types';
import React from 'react';
import Text from '../Text';
import { ButtonStyled } from './Button.styled';
import { Props } from './types';
import { isValidStringOrNumber } from '@core-utils/helpers/ReactHelper';
export const Button: React.SFC<Props> & WithStyle = props => {
return (
<ButtonStyled {...props}>
{React.Children.map(props.children, c => {
return isValidStringOrNumber(c) ? (
<Text textWeight="Strong" uppercase>
{c}
</Text>
) : (
c
);
})}
</ButtonStyled>
);
};
Button.displayName = 'Button';
Button.Style = ButtonStyled;
export default Button;
类型文件看起来像这样
import { HTMLProps, WithThemeProp } from '@core-utils/types';
export interface Props extends HTMLProps<HTMLButtonElement>, WithThemeProp {
type?: 'button' | 'reset' | 'submit';
solid?: boolean;
flat?: boolean;
outlined?: boolean;
}