React and defaultProps cant pass correct props to inner function

TypeScript 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'.

[DanielRosenwasser]

In the mean time you can write something like

interface DefaultCircleProps {
    percent: number;
}
interface CircleProps extends Partial<DefaultCircleProps> {
}

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.

[azizhk]

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.