Can you explain the concept of ’type widening’ and ’type narrowing’ in TypeScript?

In TypeScript, the process of determining specific types/values for variables during the code analysis is known as "type narrowing" and "type widening". Let’s discuss each concept in more detail.

Type Widening:

Type widening occurs when TypeScript tries to infer a more general type for a variable or expression that doesn’t have a specific type annotation. This is done to provide more flexibility with the types when dealing with values that might come from different sources, allowing TypeScript to avoid errors due to a narrower type being inferred.

Example:

let myVar = "hello"; // myVar is inferred as type 'string',
                     // even though its value is "hello"

In the example above, TypeScript infers the type of ‘myVar‘ as ‘string‘ instead of the specific literal type ‘"hello"` (which is more narrow). This is an example of type widening.

Type Narrowing:

Type narrowing refers to the process of refining the type of a variable based on conditions or checks which make TypeScript more confident about the specific type of the variable. By using type guards or type predicates, you can help TypeScript know a more specific type for a variable, narrowing its type and providing better type checking.

Example:

function isString(value: any): value is string {
  return typeof value === "string";
}

function doSomethingWith(value: string | number): void {
  if (isString(value)) {
    // In this block, TypeScript knows 'value' is of type 'string'
    const length = value.length;
  } else {
    // In this block, TypeScript knows 'value' is of type 'number'
    const square = value * value;
  }
}

In the example above, we have a ‘doSomethingWith‘ function that takes a value of type ‘string | number‘. The type guard ‘isString‘ narrows the type of ‘value‘ to ‘string‘ when the condition is true, and consequently narrows the type of ‘value‘ to ‘number‘ when the condition is false.

To summarize, type widening relates to inferring a more general type for variables without specific type annotations, while type narrowing involves refining the type using type guards, predicates, or conditions that help TypeScript determine a more specific type.