πŸ’‘ This page contain affiliate links. By making a purchase through them, we may earn a commission at no extra cost to you.

How to Correctly Check Undefined in TypeScript

Ferenc Almasi β€’ 2022 September 21 β€’ Read time 2 min read
  • twitter
  • facebook
TypeScript

To check for undefined values in TypeScript, you need to use the strict equal operator against the undefined keyword.

Copied to clipboard!
type AuthorHandle = string | undefined

const twitter: AuthorHandle

// ❌ This will throw an error (Cannot read properties of undefined)
const formattedHandle: string = twitter.toLowerCase()

// βœ”οΈ Check if variable is not undefined
if (twitter !== undefined) {
    const formattedHandle: string = twitter.toLowerCase()
}

In the above example, the if statement is called a type guard. It prevents toLowerCase being called on undefined. This way, TypeScript knows that the only other possible type is a string type.

It is important to keep in mind that in case your variable can be null, you want to check for a null value too, as the above code example only caters to undefined.

Copied to clipboard!
type AuthorHandle = string | undefined | null

const twitter: AuthorHandle

// ❌ This will throw an error (Cannot read properties of undefined)
const formattedHandle: string = twitter.toLowerCase()

// ❌ This will throw an error for null (Cannot read properties of null)
if (twitter !== undefined) {
    const formattedHandle: string = twitter.toLowerCase()
}

// βœ”οΈ Check if variable is not undefined OR null
if (twitter !== undefined && twitter !== null) {
    const formattedHandle: string = twitter.toLowerCase()
}


// Note that null and undefined are not the same thing
undefined === null -> false

If you often have to work with types that can be either undefined or null, it is recommended to declare a generic often called Nullable or Maybe that can be reused throughout your application.

Copied to clipboard!
declare type Nullable<T> = T | undefined | null

// This will now be string | undefined | null
type AuthorHandle = Nullable<string>

Using Optional Chaining

Another approach to safeguard against undefined values is using optional chaining. Optional chaining lets you use the ?. notation to only call methods and properties if the variable is not undefined or null.

Copied to clipboard!
type AuthorHandle = Nullable<string>

const twitter: AuthorHandle
const formattedHandle: string = twitter?.toLowerCase()

This way, you can leave out the if statement, and be sure that your variable is checked against both undefined and null.

  • twitter
  • facebook
TypeScript
Did you find this page helpful?
πŸ“š More Webtips
Frontend Course Dashboard
Master the Art of Frontend
  • check Access 100+ interactive lessons
  • check Unlimited access to hundreds of tutorials
  • check Prepare for technical interviews
Become a Pro

Courses

Recommended

This site uses cookies We use cookies to understand visitors and create a better experience for you. By clicking on "Accept", you accept its use. To find out more, please see our privacy policy.