[TS] parse returns props without type field.
See original GitHub issuethe input code
import React from 'react';
import './button.css';
export interface ButtonProps {
/**
* Is this the principal call to action on the page?
*/
primary?: boolean;
/**
* What background color to use
*/
backgroundColor?: string;
/**
* How large should the button be?
*/
size?: 'small' | 'medium' | 'large';
/**
* Button contents
*/
label: string;
/**
* Optional click handler
*/
onClick?: () => void;
}
/**
* Primary UI component for user interaction
*/
export const Button: React.FC<ButtonProps> = ({
primary = false,
size = 'large',
backgroundColor,
label,
...props
}) => {
const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
return (
<button
type="button"
className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
style={{ backgroundColor }}
{...props}
>
{label}
</button>
);
};
the parse code
const rawReactDocs = parse(context.code, null, null, {
filename: context.fileName, //path.resolve(),
babelrc: false,
});
console.log("rawReactDocs", rawReactDocs)
const rawProps = rawReactDocs.props || {};
const props = Object.keys(rawProps)
.filter(name => name !== "children")
// .filter(name => rawProps[name].type || rawProps[name].tsType || rawProps[name].flowType)
.map(name => ({ name, value: rawProps[name] }));
console.log("props", props)
Issue Analytics
- State:
- Created 3 years ago
- Comments:5
Top Results From Across the Web
JSON parse in typescript validating props - Stack Overflow
When unseralizing an object you can use the revive function in JSON.parse like in the sample. But you are accessing the properties of...
Read more >How to Convert Object Props With Undefined Type to Optional ...
This type will map over the object props and check if their type contains undefined (by comparing the original prop type with the...
Read more >Not able to parse props · Issue #116 - GitHub
I'm not being able to make styleguidist see the props of my components written in tsx The one done in js with proptypes...
Read more >Useful Patterns by Use Case - React TypeScript Cheatsheets
Usecase: you want to make a <Button> that takes all the normal props of <button> and does extra ... no error return <Button...
Read more >Documentation - Everyday Types - TypeScript
No type annotation needed -- 'myName' inferred as type 'string' ... Much like variable type annotations, you usually don't need a return type...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Note that if you remove the React.FC and declare a plain function the types work fine. I don’t recommend using React.FC anyway.
Here (https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/function_components) it is mentioned that
React.FC
is discouraged, although I didn’t read all the conversations about it. So in the light of this I wonder if this should be even supported.