graphql-react-typescript-spacex
graphql-react-typescript-spacex copied to clipboard
Unexpected ! in LaunchList.tsx
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
! 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

and by putting ! we are explicitly telling TSC that this property will always be defined.
I hope this answers your question.