React and defaultProps cant pass correct props to inner function
See original GitHub issueTypeScript Version: 2.4.0
Code
import * as React from 'react';
interface CircleProps {
percent?: number
}
export default class Circle extends React.Component<CircleProps> {
public static defaultProps: Partial<CircleProps> = {
percent: 100
}
calculateDashArray(percent: number): string {
return `${percent}`
}
render() {
const strokeDasharray = this.calculateDashArray(this.props.percent)
return (
<div>{strokeDasharray}</div>
)
}
}
Expected behavior:
this.calculateDashArray
should correct accept value of defalutProps
Actual behavior:
Argument of type 'number | undefined' is not assignable to parameter of type 'number'. Type 'undefined' is not assignable to type 'number'.
Issue Analytics
- State:
- Created 6 years ago
- Reactions:7
- Comments:6 (3 by maintainers)
Top Results From Across the Web
Pass a default prop inside function component in react js
I need to change something in the Component, and to be prepared that both props could be use not as required. – Asking....
Read more >How passing props to component works in React
Master how to pass props (properties) to components in React with this useful beginner's guide, including demo code.
Read more >Default Props in React/TypeScript - DEV Community
In TS, we can infer data types right in the function signature. ... also defined default values inside defaultProps for the required props....
Read more >Typechecking With PropTypes - React
Don't `console.warn` or throw, as this // won't work inside `oneOfType`. customProp: function(props, propName, componentName) { if (!
Read more >Props | Vue.js
When objects and arrays are passed as props, while the child component cannot mutate the prop binding, it will be able to mutate...
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
In the mean time you can write something like
There is a bit of a close tie of the static side of a class and the instance side with React. We’ve been trying to think about this a bit more recently.
Maybe this can help: https://github.com/sw-yx/react-typescript-cheatsheet#typing-defaultprops @FDiskas you can share your code if any problem still persists. And then maybe can close this issue.