Typescript multidimensional array type

Question

Currently i have an array that has this type:

handlers: string[][]

It has for exapmle: [["click", "inc"], ["mousedown", "dec"]]

Now i want to change my structure to:

[[{ handler: "click", modifiers: ["enter"] }, "inc"]]

How do i define that the first element of my second arra is an object that contains an property called handler and modifiers?

Krzysztof Krzeszewski · Accepted Answer · 2020-11-10 10:51:06Z

6

Typescript has tuple types which let you define an array with a specific length and types:

let arr: [number, number, number];

arr = [1, 2, 3]; // ok
arr = [1, 2]; // Type '[number, number]' is not assignable to type '[number, number, number]'
arr = [1, 2, "3"]; // Type '[number, number, string]' is not assignable to type '[number, number, number]'

So just use a type like:

handlers: [{handler: string, modifiers: string[]}, string][]

An alternative approach, when this type is only required on the first element:

interface MyInterface {
  [index: number]: string[] | [{handler: string, modifiers: string[]}, string];
  0: [{handler: string, modifiers: string[]}, string];
}

Or when the type is only valid in first place using Variadic tuple types

type MyType = [[{handler: string, modifiers: string[]}, string], ...string[][]]

edited Nov 10, 2020 at 10:51

answered Nov 10, 2020 at 9:34

Krzysztof Krzeszewski

6,8382 gold badges23 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ilijanovic Over a year ago

does this work too? [[{ handler: string, modifiers: string[] }, string]]

Krzysztof Krzeszewski Over a year ago

it would work if you limited the length of the outer array to a single element, like i wrote in the answer instead try [{ handler: string, modifiers: string[] }, string][]

ford04 Over a year ago

@Ifaruki Just a hint regarding last alternative: You can already do that with TS 3.0 rest elements, in case v4.0 is not affordable yet.

Anzor Asadov · Accepted Answer · 2020-11-10 09:37:27Z

2

Id suggest something like this

type NameOfType = {
  handler: string,
  modifiers: Array<string>,
}

const myThing: [[NameOfType, string]] = [[{ handler: "click", modifiers: ["enter"] }, "inc"]]

answered Nov 10, 2020 at 9:37

Anzor Asadov

4023 silver badges13 bronze badges

Collectives™ on Stack Overflow

Typescript multidimensional array type

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related