Typescript Conditionally extending an “Array or Object” not working as expected

Typescript Conditionally extending an “Array or Object” not working as expected

Typescript provides powerful features for creating and manipulating complex data structures. However, there are times when we need to conditionally extend an “Array or Object” in Typescript, and it may not work as expected. In this blog post, we will explore this issue and provide multiple solutions to overcome it.

The Problem

Let’s say we have a function that takes an argument of type “Array or Object” and extends it with additional properties based on a condition. Here’s an example:

function extendData(data: Array | object, condition: boolean) {
  if (condition) {
    data.newProperty = 'new value';
  }
}

Now, let’s try to use this function with an array and an object:

const myArray = [1, 2, 3];
const myObject = { name: 'John', age: 25 };

extendData(myArray, true);
extendData(myObject, false);

After calling the extendData function, we would expect both myArray and myObject to have the newProperty added, but unfortunately, this does not work as expected.

Solution 1: Type Assertion

One way to overcome this issue is by using a type assertion to explicitly tell Typescript that the argument is an “Array or Object”. Here’s an updated version of the extendData function:

function extendData(data: Array | object, condition: boolean) {
  if (condition) {
    (data as any).newProperty = 'new value';
  }
}

By using (data as any), we are telling Typescript to treat data as an any type, which allows us to add the newProperty without any errors.

Solution 2: Function Overloads

Another solution is to use function overloads to define separate function signatures for an array and an object. Here’s an updated version of the extendData function:

function extendData(data: Array, condition: boolean): void;
function extendData(data: object, condition: boolean): void;
function extendData(data: Array | object, condition: boolean) {
  if (condition) {
    data.newProperty = 'new value';
  }
}

By defining separate function signatures for an array and an object, Typescript can infer the correct type and allow us to add the newProperty without any errors.

Solution 3: Type Guards

A more elegant solution is to use type guards to conditionally extend an “Array or Object”. Here’s an updated version of the extendData function:

function extendData(data: Array | object, condition: boolean) {
  if (Array.isArray(data)) {
    data.newProperty = 'new value';
  } else {
    (data as any).newProperty = 'new value';
  }
}

By using Array.isArray(data) as a type guard, we can safely extend the array without any errors. For objects, we can use a type assertion similar to Solution 1.

Conclusion

When conditionally extending an “Array or Object” in Typescript, we may encounter unexpected behavior. However, by using type assertions, function overloads, or type guards, we can overcome this issue and achieve the desired results. Choose the solution that best fits your use case and enjoy the full power of Typescript!