javascriptarraystypescripttypes

How to add a custom field to an array in typescript


I have an array:

const array = ["en-US", "en-GB", "en-AU"] as const;

And I would like to add to this array a field default in order to do something like:

array.default;

Instead of

array[0];

Constraints: Not loosing the property of an array and be able to still use find and all other things propers to arrays. I also need the correct typing.


Solution

  • You can use Object.assign() to create an object that combines two objects by copying the properties of one to another.

    In the example below a function is created that adds a default field to an object. Object.assign is passed the source object and an object literal with a property that is set a value at the first index. The returned value is the original source with the new field.

    function addDefault<T extends readonly unknown[]>(src: T): T & { default: T[0] } {
      return Object.assign(src, { default: src[0] });
    }
    const array = addDefault(["en-US", "en-GB", "en-AU"] as const);
    console.log(array.default); // en-US
    

    This will work fine as long as you're working with immutable types as in your example. However, if you wanted a more flexible version that works with mutable array, and the value at index 0 changes, then default will still be the original value at 0. The only way to get the updated value is to use a method instead instead of a field.

    The example below will work on more types, but the default field has been changed to a method.

    function addDefault<T extends { [x: number]: unknown }>(src: T): T & { default: T[0] } {
      return Object.assign(src, { default() => src[0] );
    }
    const array = addDefault(["en-US", "en-GB", "en-AU"]);
    array[0] = "fr-FR";
    console.log(array.default()); // fr-FR