Type mismatch in typescript and react

Question

I have an issue with typescript and react. Bellow is a small exmaple that illustrates the problem.

const Example = (props: { x?: number, fn: (x: number) => void}) => {
        if (props.x !== undefined) {
            return <button onClick={() => props.fn(props.x)}>Click me</button>
        }
        return null;
}

Code checks explicitly that x is defined but typescript won't compile it because fn requires x to be a number. It can be solved using casting

const y = props.x as number;
return <button onClick={() => props.fn(y)}>Click me</button>

It works but looks weird. Any ideas how to handle such cases. It's just an example in my code we have an object instead of a number and it also either defined and then we render some html for it or not defined (=== undefined) and than we just return null.

Titian Cernicova-Dragomir · Accepted Answer · 2019-07-26 11:54:38Z

3

This is a limitation in how control flow analysis works. The analysis does not cross function boundaries. You can read more here. The basic idea is that there is no guarantee prop.x will still not be undefined by the time the callback is called.

The workaround is to put prop.x in a local variable. This will capture the flow type in the variable type:


const Example = (props: { x?: number, fn: (x: number) => void}) => {
        if (props.x !== undefined) {
            const x = props.x
            return <button onClick={() => props.fn(x)}>Click me</button>
        }
        return null;
}

edited Jul 26, 2019 at 11:54

answered Jul 26, 2019 at 11:03

Titian Cernicova-Dragomir

253k37 gold badges464 silver badges394 bronze badges

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

3 Comments

Oleksandr Taran Over a year ago

thanks, it works, now it looks better, still a bit strange but at least no casting.

Juraj Kocan Over a year ago

the point is that this is callback. in time of call your x can be theoretically undefined.

Titian Cernicova-Dragomir Over a year ago

@JurajKocan 10x, added to the answer, I was being lazy, good thing SO community keeps me honest 😉

Collectives™ on Stack Overflow

Type mismatch in typescript and react

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related