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

Beginne damit, das TypeScript-2.4-Beispiel im Issue zu reproduzieren, und untersuche, wie React.Component-Props und statische defaultProps dargestellt werden. Ermittle den vorgesehenen Typ von this.props.percent innerhalb von render und füge anschließend Compiler-Tests für den gezeigten Fehler und das Verhalten von default-prop hinzu oder aktualisiere sie. Als erledigt gilt die Aufgabe, wenn das Beispiel den Wert aus den Defaults akzeptiert, ohne die unabhängige Prop-Prüfung zu schwächen.