Ignore Null or Undefined Values with TypeScript Non-Null Assertion Operator

Kamran Ahmed
InstructorKamran Ahmed
Share this video with your friends

Social Share Links

Send Tweet

You can use the non-null assertion operator in TypeScript to take a typed variable and remove the undefined and null types from it. In this lesson, we look at different ways to work around the null/undefined typed values; including as [type] and the use of non-null assertion operator which is as simple as adding an exclamation mark to the end of any given variable while reading the value from it.

Kamran Ahmed: [0:00] Here we have a type user with two required properties, name and age. Then we have an optional string called profession. Then we're creating a new user object of this type with all the values inside that. Then we're printing the user object to the console here.

[0:16] Let's say that we want to get the name out of the user object into a separate variable and print that. I will do const output of type string with a value user.name and print the output to the console. You can see that our name is printed here.

[0:32] Let's say that we want to get the profession into this output variable. I will do user.profession. You will see that on our output variable we are getting the error that "Type 'string | undefined' is not assignable to type string."

[0:46] The reason for that is because profession is an optional field. It can either be string or it can be undefined, but our output variable is of type string, so it always expects the value to be the string.

[0:59] One way to fix this is that we either put user.profession as string here. This way we're telling the TypeScript to ignore the type of user.profession, and always consider it as a type string.

[1:11] A better way to do this is to use a non-null assertion operator. We can just put not at the end of the profession, and you will see that our error is gone.

[1:21] This is the non-null assertion operator which tells the TypeScript compiler that keep the type of whatever the user.profession variable is and remove the null or undefined text from that. This is equivalent to saying that profession is a required property in the user type.

[1:39] If we run this, you will see that our error is gone, and our profession is being printed to the console.