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.

Convert `propTypes` to typescript version of props.

See original GitHub issue

convert old way of handling props like this example:

  static propTypes = {
    className: PropTypes.string,
    selected: PropTypes.number,
    leftButton: PropTypes.element,
    scrollOver: PropTypes.bool
  };

to new way of handling props like


interface WrapperProps {
  orderBook: OutcomeOrderBook;
  allowanceBigNumber: BigNumber;
  market: MarketData;
  initialLiquidity?: Boolean;
}

interface WrapperState {
  orderPrice: string;
  orderQuantity: string;
}

class Wrapper extends Component<WrapperProps, WrapperState> {
  static defaultProps = {
    selectedOutcome: null,
  };
...

there are many examples in the codebase, all *.tsx should use interfaces for props and state. not all components have an internal state or props. Not all components have default props or default the state properties.

not all .tsx files are full React components they might be simple pure components. look at augur/packages/augur-ui/src/modules/create-market/link.tsx to see a simple component that uses props in the new format.

augur/packages/augur-ui/src/modules/account/components/activity.tsx uses props and state and defaults state.

augur/packages/augur-ui/src/modules/markets-list/components/markets-view.tsx uses props and state and defaults props

search the code base for import PropTypes from "prop-types"; There are 49 uses of it. these files will not need that import after refactor.

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:5 (5 by maintainers)

github_iconTop GitHub Comments

1reaction
pgebheimcommented, Sep 30, 2019

@gitstart-augur – Here is a good first ticket to work

Here is a partial PR with some of the fix as a starting point: https://github.com/AugurProject/augur/pull/3670

0reactions
pgebheimcommented, Nov 5, 2019

@bthaile Ping one more time, removing from UI Refactoring so I can try and close that out.

Read more comments on GitHub >

github_iconTop Results From Across the Web

mskelton/ratchet: Codemod to convert React PropTypes to ...
Codemod to convert React PropTypes to TypeScript types. Key Features. Supports function and class components; Supports static propTypes declarations on class ...
Read more >
How to convert custom proptype in react jsx to typescript
I think, not every propType (Custom one) can be converted to typing through typescript. React passes params "props, propName and componentname" ...
Read more >
Converting React Components to TypeScript - Tinkerer
Let's start by converting the React Components first - they're easy to convert, as they already have a type-system bolted on via PropTypes....
Read more >
Comparing TypeScript and PropTypes in React applications
You can generate PropTypes from TypeScript type definitions using babel-plugin-typescript-to-proptypes . When you specify types for your props, ...
Read more >
Automatic React PropTypes to TypeScript Conversion
The outcoming converted code provides valid TypeScript, complete with optional PropTypes converted to equivalent parameters:
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