question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[TS] parse returns props without type field.

See original GitHub issue

the 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)

image

Issue Analytics

  • State:open
  • Created 3 years ago
  • Comments:5

github_iconTop GitHub Comments

1reaction
coryhousecommented, Jan 30, 2021

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.

0reactions
danezcommented, Mar 30, 2021

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.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found