How to define array length and elements types using the Array interface in TypeScript

Question

What I want to achieve can be done like bellow:

// Will define a type that is an array with TWO elements where the first will be a string
// and the second a number
type SomeArrayType = [string, number];

I did not like to use this kind of type declaration for arrays and I like to use the Array interface for this, like:

// It will define a type that is an array of string with any number of elements in it
type AnotherArrayType = Array<string>;

But since the Array interface only takes one type argument and there is no explicit way to define the length, is there a way to achieve it using the interface or I really gonna have to define my type using the first approach?

Thanks

Does this answer your question? [How to declare a Fixed length Array in TypeScript](https://stackoverflow.com/questions/41139763/how-to-declare-a-fixed-length-array-in-typescript) — kind user, Nov 01 '22 at 16:56
"I don't like to use this kind of type declaration" Wait, why not? That's how you're supposed to do it. If I asked "How can I open a can with a fork? I don't like using can openers.", how would you respond? — jcalz, Nov 01 '22 at 17:09
It's because I came from Java, and using the Array interface to declare an array instead of using directly the [ ... ] seems more correct to me, idk, it's just my opinion — Rafael Furtado, Nov 01 '22 at 17:25
You're of course welcome to your opinion, but tuple types are part of TypeScript, not Java, and this is one of those situations where it doesn't make a lot of sense to use Java as a guide to TypeScript. — jcalz, Nov 01 '22 at 18:22
Is *notation* the fundamental issue here? If you're just worried about notation, you could use a type alias to hide the brackets from Java devs, like [this](https://tsplay.dev/WzPJrN) maybe. Would you like to see that written up as an answer? — jcalz, Nov 01 '22 at 18:28

Rafael Furtado · Accepted Answer · 2022-11-07T17:07:15.843

Well, it's possible but it's needed to write a little boilerplate to achieve the same of the first approach that I mentioned:

It will be need to create an interface that extends Array

interface DefinedArray extends Array<string | number> {
    length: 2;

    0: string;
    1: number;

}

Then, if you use it to type a variable

const myArray: DefinedArray = ['abc', 123];  // Correct
const anotherArray: DefinedArray = [123, 'abc'];  // Error
const moreArray: DefinedArray = ['abc', 123, 'abc123'];  // Error

Declaring it using

type SomeArrayType = [string, number];

or

interface DefinedArray extends Array<string | number> {
    length: 2;

    0: string;
    1: number;

}

Will result in the same thing, and both are show in the official docs: https://www.typescriptlang.org/docs/handbook/2/objects.html#tuple-types

So, I think it's just up to you decide which one you gonna use in your code

UPDATE

After some time using the DefinedArray example above, I notice that it's not worth to use this approach, because the boilerplate can scale out of control, so, I recommend to use the tuple definition instead.

They don't exactly "result in the same thing"; there are plenty of situations where you will run into the difference, and some of these differences [are quite unpleasant](https://tsplay.dev/NarKBm). The correct thing to do is to use tuple types unless you run into situations where they don't work. — jcalz, Nov 01 '22 at 18:13

How to define array length and elements types using the Array interface in TypeScript

1 Answers1