如何处理在 defaultProps 中有值的可选属性？

Question

I got the following class component:

type Props = {
    required: string;
    optional?: string;
};

class TestComp extends Component<Props> {
  static defaultProps = {
    optional: "dff"
  }
    render() {
    // ERROR: Object is possibly 'undefined'.
    this.props.optional.length
    return "abcd";
  }
}

Why is this.props.optional.length causing an error? I'm using TS 4.3 and React v17, I thought that this issue was fixed in 3.0 in this PR: https://github.com/microsoft/TypeScript/issues/23812 (see the second block of code) Or am I misunderstanding this fix, its just for fixing this issue in JSX code?

If possible I would not make the optional prop required, I think this would confuse users who are instantiating the prop object (why is a prop required when its optional?)

playground link

Answer 1

Please see this comment

In order to make it work, you should make your optional property required.

import React, { Component } from 'react'

type Props = {
    required: string;
    optional: string;
};

class TestComp extends Component<Props> {
    static defaultProps = {
        optional: "dff"
    }
    render() {
        // ERROR: Object is possibly 'undefined'.
        this.props.optional.length
        return "abcd";
    }
}
const x = <TestComp required="sdf" /> // no error

See, there is no error. TS is able to figure out that static defaultProps will assure that optional prop will always be a non empty string

Playground

Answer 2

It turns out that this is not supported as of TypeScript 4.3.5.

There are some workarounds, but for me they either come with downsides or are way too complex: https://github.com/microsoft/TypeScript/issues/30251

We have decided to leave optional props optional even if they have a defaultProps value, and in the code we use the ? operator and do null/undefined checks -- this also takes care of the case that the user sets the value to undefined or null