'WebStorm (IDEA) reports a TypeScript error when passing undefined into an optional prop

The problem

This started happening two days ago and I don't know how or why.

Whenever I have a component with an optional prop, Idea reports a TypeScript error when I try to instantiate it with a potentially undefined value - for example:

const Comp: React.FC<{ optional?: string }> = () => null

const renderComp = (optional?: string) => {
  return <Comp optional={optional} />
  //                     ^ Type string | undefined is not assignable to type string
}

enter image description here

I don't like this behaviour. The project still compiles fine when I run the server via CLI, but they flood my Problems IDE tab.

Can this be something akin to my TypeScript/IDE settings?


Some additional, potentially relevant info

One thing I noticed is that in my lowest IDE GUI ribbon, the version of TypeScript is not displayed! I am very sure that there has used to be a number next to it, for example TypeScript 4.4.4., but now the version is gone.

enter image description here

Here is a screenshot of my WebStorm TS config:

enter image description here

I also have recently upgraded WebStorm to version 2021.3.2 - I'm not sure if this is when these errors started appearing.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source