How to Generate a Range of Numbers in TypeScript – Program to Create Number Range

In this blog post, we will explore how to generate a range of numbers in TypeScript using a custom class. The provided code snippet demonstrates a program that creates a number range in an efficient and concise way.

Code

interface _Iterable extends Iterable<{}> {
  length: number;
}

class _Array<T> extends Array<T> {
  static range(from: number, to: number, step: number): number[] {
    return Array.from(
      <_Iterable>{ length: Math.floor((to - from) / step) + 1 },
      (v, k) => from + k * step
    );
  }
}
_Array.range(0, 9, 1);
//=> [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

Code Explanation

The code snippet defines an interface _Iterable and a class _Array that extends the built-in Array class in TypeScript. Let’s break down the code and understand how it works.

1. Interface _Iterable:

The _Iterable interface extends the Iterable interface and has a single property length of type number. This interface allows us to iterate over the object it is implemented in.

2. Class _Array:

The _Array class implements the _Iterable interface and extends the built-in Array class in TypeScript. It introduces a static method range(from, to, step) that generates a range of numbers based on the provided parameters.

3. Static Method range(from, to, step):

The range method takes three arguments: from (start of the range), to (end of the range), and step (increment value between numbers in the range). It returns an array of numbers representing the generated range.

– The Array.from() method is used to create a new array from an iterable object.

– The iterable object in this case is created using a shorthand object literal { length: Math.floor((to - from) / step) + 1 }. It has a length property that determines the size of the range based on the provided parameters.

– The second parameter of Array.from() is a mapping function (v, k) => from + k * step that computes each element of the new array based on the index k and the provided parameters from and step.

4. Generate Number Range:

Finally, the code snippet calls the range method on the _Array class with the arguments 0, 9, and 1, and stores the generated range in an array. The result is [0, 1, 2, 3, 4, 5, 6, 7, 8, 9].

Conclusion

By using the provided code snippet, you can easily generate a range of numbers in TypeScript. The `range` method provided by the `_Array` class offers a convenient way to create number sequences with a specified start, end, and step. Incorporate this code into your TypeScript projects to efficiently handle number ranges.

Also checkout the following codes.

How to Generate a Range of Numbers in JavaScript?
How to Toggle Checkboxes in a HTML Table with jQuery