React StoryBook识别不了注释和接口

前言

再用StoryBook搭建UI组件库发现一个问题。从jsx转到tsx时(PropTypes转到interface)，发现注释和接口无法识别了。

解决方案

1. 大小写问题。把组件名称改为大写

   
   image.png
2. 问题解决

3.附带tsx和jsx的stories写法

• jsx(js)

import React from 'react';

import { Button } from './Button';

export default {
  title: '名称',
  component: Button,
};

const Template = (args) => <Button {...args} />;

export const Primary = Template.bind({});
Primary.args = {
  primary: true,
  label: 'Button',
};

• tsx

import * as React from 'react';
import {Story, Meta} from '@storybook/react/types-6-0';

import Other, {IProps} from './other';

export default {
    title: 'Button',
    component: Other,
    argTypes: {
        backgroundColor: {control: 'color'},
    },
} as Meta;

const Template: Story<IProps> = (args) => <Other {...args} />;

export const Primary = Template.bind({});
Primary.args = {
    primary: true,
    label: 'Button',
};

4.packjson

   "@storybook/addon-actions": "^6.1.14",
    "@storybook/addon-essentials": "^6.1.14",
    "@storybook/addon-links": "^6.1.14",
    "@storybook/react": "^6.1.14",


//看情况
    "@babel/core": "^7.12.10",
    "babel-loader": "^8.2.2",

5.附带、打包用的gulp + tsc + babel