Ways to statically type a function that produces an array from 1 to n

Question

Ways to statically type a function that produces an array from 1 to n

I am working on creating a function that can generate an array of numbers ranging from 0 to n, while ensuring that the returned type matches a known array structure at compile time.

const makeFoo = (n: number) => [...Array(n).keys()];
const foo1 = [0, 1, 2] as const; // readonly [0, 1, 2]
const foo2 = makeFoo(3); // number[]
console.log(foo1); // [0, 1, 2]
console.log(foo2); // [0, 1, 2]

Even though both foo1 and foo2 hold the same values, their types differ.

My question is, how can I define the return type of makeFoo to match the structure of foo1? (readonly [0, 1, ... n] where the value of n is also known statically, e.g.

makeFoo = <T extends number>(n: T) => ...

)

typescript static-typing

Answer 1

Answer №1

If you implement a helper type that is recursive, you can determine the return type based on a generic argument. Keep in mind that you will have to use a type assertion since the `[...Array(n).keys()]` will always be inferred as `number[]`.

type CreateBar<N extends number, R extends any[] = []> = R["length"] extends N
  ? R
  : CreateBar<N, [...R, R["length"]]>;

function createBar<N extends number>(n: N): CreateBar<N> {
  return [...Array(n).keys()] as CreateBar<N>
}

const bar3 = createBar(3);
//    ^? const bar3: [0, 1, 2]
const bar100 = createBar(100);
//    ^? const bar100: [0, 1, 2, 3, 4, 5, 6, 7, ... , 99]

TypeScript Play Area

Note: This approach is limited to generating arrays with up to 999 items. Any number higher will result in the type resolving to `any`.

const bar1000 = createBar(1000);
//              ~~~~~~~~~~~~~
// Type instantiation is excessively deep and possibly infinite.

Answer 2

If you implement a helper type that is recursive, you can determine the return type based on a generic argument. Keep in mind that you will have to use a type assertion since the `[...Array(n).keys()]` will always be inferred as `number[]`.

type CreateBar<N extends number, R extends any[] = []> = R["length"] extends N
  ? R
  : CreateBar<N, [...R, R["length"]]>;

function createBar<N extends number>(n: N): CreateBar<N> {
  return [...Array(n).keys()] as CreateBar<N>
}

const bar3 = createBar(3);
//    ^? const bar3: [0, 1, 2]
const bar100 = createBar(100);
//    ^? const bar100: [0, 1, 2, 3, 4, 5, 6, 7, ... , 99]

TypeScript Play Area

Note: This approach is limited to generating arrays with up to 999 items. Any number higher will result in the type resolving to `any`.

const bar1000 = createBar(1000);
//              ~~~~~~~~~~~~~
// Type instantiation is excessively deep and possibly infinite.

Ways to statically type a function that produces an array from 1 to n

Answer №1

Similar questions

Setting up Electron to utilize TypeScript's baseUrl can be achieved by following a few simple steps

Create an array of arrays within a loop using TypeScript

Problem with execution of TypeScript function from HTML

Ways to determine if a specified character sequence is present in an Enumerator?

Unable to bind to property as it is not recognized as a valid attribute of the selector component

invoke a method from a different class within the same component file

Incorporating node packages into your typescript projects

Tips for ensuring a function in Angular is only executed after the final keystroke

Angular typed controls allowing for a seamless user experience without the need to

Steps for enabling a function to return an undefined type

Efficiently transferring input to a Typescript file

Creating a user-friendly interface for an array of objects, complete with an included array containing those same objects

How to start Angular2 prototype with an object literal

Ensuring the accuracy of forms using third-party verification services

Invoke the built-in matcher within a Playwright custom matcher

How to assign a value to an array within a form in Angular 8

Creating an Ionic 3 canvas using a provider

Discovering the process of iterating through values from multiple arrays of objects and applying them to a new response in Angular 8

Using TypeScript: creating functions without defining an interface

What are the ways in which I can utilize the private or public keyword in TypeScript?