graphql-react-typescript-spacex icon indicating copy to clipboard operation
graphql-react-typescript-spacex copied to clipboard

Unexpected ! in LaunchList.tsx

Open glenpierce opened this issue 5 years ago • 1 comments

Line 26 of LaunchList.tsx reads onClick={() => handleIdChange(launch.flight_number!)} The ! here appears to be an error, but I'm pretty new to React/TypeScript so if that's not the case, it might be wise to have an explanation of that line.

glenpierce avatar Jul 09 '20 15:07 glenpierce

@glenpierce

! is there to tell IDE's IntelliSense that the property launch.flight_number will never be null or undefined.

Explanation: The handleChange method here is strictly expecting an argument as a parameter, but the property launch.flight_number can be either number or null or undefined, so to tell the IDE's IntelliSense that the aforementioned property will always be defined, the ! is put before that.

How to confirm To see that in action, just remove the ! from there and a red line will appear under launch.flight_number and if you hover over that, it will show something like following

image

and by putting ! we are explicitly telling TSC that this property will always be defined.

I hope this answers your question.

SafiUllahAshfaq avatar May 02 '21 21:05 SafiUllahAshfaq