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

まず、issue にある TypeScript 2.4 の例を再現し、React.Component の props と静的な defaultProps がどのように表現されているかを調べます。render 内の this.props.percent の想定される型を特定し、その後、示されているエラーと default-prop の動作についてのコンパイラテストを追加または更新します。例がデフォルトで指定された値を受け入れ、無関係な prop のチェックを弱めないことが完了の条件です。