TypeScript + React: defining defaultProps correctly

Question

Say you define your component like so:

interface IProps {
  req: string;
  defaulted: string;
}

class Comp extends React.Component<IProps, void> {
  static defaultProps = {
    defaulted: 'test',
  };

  render() {
    const { defaulted } = this.props;

    return (
      <span>{defaulted.toUpperCase()}</span>
    );
  }
}

when you want to use it, TypeScript wants the defaulted prop from you, even though it's defined in defaultProps:

<Comp req="something" />  // ERROR: TypeScript: prop 'defaulted' is required

However, if you define the props interface like so:

interface IProps {
  req: string;
  defaulted?: string;  // note the ? here
}

then you cannot use it in:

render() {
  const { defaulted } = this.props;  // ERROR: prop 'defaulted' possibly undefined

  return (
    <span>{defaulted.toUpperCase()}</span>
  );
}

How to define the IProps, defaultProps and component correctly so the types make sense?

EDIT:

I'm using the strictNullChecks flag.

I am pretty sure I do: static defaultProps: IDefaultProps = { validate: () => null, defaultValue: '', }; — Idefixx
– Idefixx, Commented Oct 10, 2016 at 14:26
Alright, let me rephrase: they don't appear to be defaulted in the code you show in the question. Give a minimal reproducible example. — jonrsharpe
– jonrsharpe, Commented Oct 10, 2016 at 14:26
If you add the ? (like you have with index) they will be optional and you won't get the error about being potentially undefined. Then, default their value where you use them. — rg88
– rg88, Commented Oct 10, 2016 at 14:26
@Stuart but then I cannot use it within the component - TypeScript complains that they are potentially undefined — Idefixx
– Idefixx, Commented Oct 10, 2016 at 14:29

Björn Boxstart · Accepted Answer · 2016-10-11 14:25:40Z

4

I have an example with the following code (ComponentBase is just my wrapper around React.Component).

Edit: updated code to work with 'strictNullChecks' setting

interface IExampleProps {
    name: string;
    otherPerson?: string;
}

/**
 * Class with props with default values
 *
 * @class Example
 * @extends {ComponentBase<IComponentBaseSubProps, {}>}
 */
export class Example extends ComponentBase<IExampleProps, {}> {
    public static defaultProps: IExampleProps = {
        otherPerson: "Simon",
        name: "Johnny"
    };

    constructor(props: IExampleProps) {
        super(props);
    }

    public render(): JSX.Element {
        const person: string = this.props.otherPerson === undefined ? "" : this.props.otherPerson;
        return(
            <div>
                <h1><small>Message by ComponentBaseSub: Hello {this.props.name} and {person} </small></h1>
            </div>
        );
    }
}

I have no issues using Visual Studio Code, TypeScript 2.0.3, TSLint 0.5.39.

edited Oct 11, 2016 at 14:25

answered Oct 11, 2016 at 6:56

Björn Boxstart

1,1881 gold badge12 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Idefixx Over a year ago

maybe because {this.props.otherPerson} is OK to be undefined. try to add a variable, say, const person: string = this.props.otherPerson; and see if it complains

Björn Boxstart Over a year ago

@Idefixx Adding exactly that variable to the body of the 'render' method still does not result in the issue you reported.

Björn Boxstart Over a year ago

You can check my react samples fork on github.com/boxstart/react-typescript-samples. Example 02 contains the optional property and defaultProps from my example above. If you still get the warning / error using this project, then you might need to look for a setting in your environment.

Idefixx Over a year ago

aaaah, I'm using the strictNullChecks flag. Try it with that

Björn Boxstart Over a year ago

Tried it and indeed I'm getting the message too. This isn't really unexpected behaviour, because in the reference to you component (jsx / tsx), it is possible to set the property to undefined and so in your render method the property value would still be 'undefined', despite the default value in the component.

|

Jacob Rask · Accepted Answer · 2017-05-05 06:30:38Z

1

Even simpler is

<span>{(defaulted as string).toUpperCase()}</span>

Works the same way with properties. If Foo requires the barProp property but Parent does not and gets it through defaultProps, Parent's render method can do

<Foo barProp={this.props.barProp as string} />

answered May 5, 2017 at 6:30

Jacob Rask

24.6k8 gold badges40 silver badges36 bronze badges

1 Comment

Larry Over a year ago

thanks! null checks with defaultProps defeats the benefit of using defaultProps

Alex Vasilev · Accepted Answer · 2018-06-10 05:57:09Z

1

If you know for sure the prop will have a default value, you can use the null assertion type operator, like this:

render() {
  const { defaulted } = this.props;
  return (
    <span>{defaulted!.toUpperCase()}</span>
  );
}

answered Jun 10, 2018 at 5:57

Alex Vasilev

80410 silver badges21 bronze badges

Collectives™ on Stack Overflow

TypeScript + React: defining defaultProps correctly

3 Answers 3

11 Comments

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

11 Comments

1 Comment

Comments

Linked

Related