How to handle null and undefined in TypeScript

In TypeScript, handling null and undefined involves using type annotations and possibly additional checks to ensure that your code is robust and can handle these values appropriately. TypeScript provides several mechanisms to work with null and undefined. Here are some common techniques:

1. Using Union Types: You can use union types to allow a variable to be of multiple types, including null or undefined.

   typescriptCopy code
   let variable: string | null = null;
   

   This means that variable can be either a string or null. You can use conditional checks to handle different scenarios:

   typescriptCopy code
   if (variable !== null) {
       // Handle non-null case
       console.log(variable.length);
   } else {
       // Handle null case
       console.log("Variable is null");
   }
   

2. Using the Non-null Assertion Operator (!): The non-null assertion operator (!) tells TypeScript to treat a value as non-null, even if the type system can't guarantee it. Use this cautiously, as it may lead to runtime errors if misused.

   typescriptCopy code
   let variable: string | null = getNullableString();
   console.log(variable!.length); // Using ! to assert non-null
   

3. Configuring strictNullChecks: TypeScript has a compiler option called strictNullChecks which, when enabled, makes the type system more strict about handling null and undefined. If strictNullChecks is on, you need to explicitly check for null and undefined in certain situations.

   To enable strictNullChecks, add the following to your tsconfig.json:

   jsonCopy code
   {
       "compilerOptions": {
           "strictNullChecks": true
       }
   }
   

4. Optional Chaining and Nullish Coalescing: TypeScript 3.7 introduced optional chaining (?.) and nullish coalescing (??) operators, which help simplify code dealing with potentially null or undefined values.

   typescriptCopy code
   let name: string | undefined = getUser()?.name;
   let defaultValue: string = someValue ?? "default";
   

   Optional chaining allows you to safely access nested properties without explicitly checking for null or undefined, while nullish coalescing provides a concise way to handle default values when a variable is null or undefined.

Remember to adapt your approach based on the specific needs and constraints of your code. It's crucial to have a good understanding of the potential sources of null and undefined in your code and handle them appropriately.