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

Start by reproducing the TypeScript 2.4 example in the issue and inspect how React.Component props and static defaultProps are represented. Determine the intended type of this.props.percent inside render, then add or update compiler tests for the shown error and default-prop behavior. Done means the example accepts the defaulted value without weakening unrelated prop checking.