What is the difference between "undefined" and "null" in TypeScript?

In TypeScript, undefined and null are both primitive data types, but they represent distinct concepts:

1. undefined:

   • undefined indicates that a variable has been declared but not assigned a value.
   • In JavaScript and TypeScript, if a function does not return a value, it defaults to returning undefined.
   • undefined typically signifies the absence of a property or a state with no specific value.

   Example:

   typescript
   let user;
   console.log(user);  // Outputs `undefined` because the `user` variable has not been assigned a value.

2. null:

   • null is a deliberately assigned value indicating that the variable has no value or is empty.
   • null must be explicitly assigned to represent a 'null' or 'empty' state.
   • null is commonly used for initializing objects to indicate that the object currently has no value.

   Example:

   typescript
   let user = null;
   console.log(user);  // Outputs `null` because the `user` variable is explicitly assigned `null`.

Type System Differences

In TypeScript's type system, undefined and null are subtypes of all other types. This means that undefined and null can be assigned to types such as number or string. However, if the TypeScript configuration file (tsconfig.json) has "strictNullChecks": true set, then undefined and null cannot be directly assigned to these types unless the type is explicitly specified as undefined or null.

Strict Mode Example:

typescript
let age: number;
age = null;  // This will cause an error unless the type is explicitly defined as `number | null`.

In summary, while undefined and null can sometimes be used interchangeably, they represent distinct concepts: undefined typically denotes a system-level, uninitialized state, whereas null represents a 'null' or 'empty' state set by the programmer. In TypeScript programming, properly utilizing these two types can effectively help manage and prevent errors.