When two-dimensional arrays meet destructuring, it results in a type error

Question

When two-dimensional arrays meet destructuring, it results in a type error

Can anyone clarify TypeScript behavior in this scenario?

JavaScript

const test1 = [
    ['a', 'b'],
    ['c', 'd'],
];

const test2 = [
    ...[
        ['a', 'b'],
        ['c', 'd'],
    ],
];

console.log(JSON.stringify(test1) === JSON.stringify(test2));

The output will be true since the arrays are identical.

TypeScript

const test1: [string, string][] = [
    ['a', 'b'],
    ['c', 'd'],
];

const test2: [string, string][] = [
    ...[
        ['a', 'b'],
        ['c', 'd'],
    ],
];

However, with TypeScript, an error occurs on test2:

Type 'string[][]' is not assignable to type '[string, string][]'.
  Type 'string[]' is not assignable to type '[string, string]'.
    Target requires 2 element(s) but source may have fewer.

You can view a reproducer on TypeScript Playground.

Is there a way to make this work without resorting to complicated type casting?

UPDATE

Here's a more specific example of what I'm trying to achieve:

const someValues = [1, 2, 3];

const test3: [string, string][] = [
    ...someValues.map(value => ['some string', 'another string']),
];

UPDATE #2

Following Алексей Мартинкевич's advice, I found that this solution works:

const someValues = [1, 2, 3];

const test3: (readonly [string, string])[] = [
    ...someValues.map(i => ['a', 'a'] as const),
];

Is there a simpler and clearer approach for my colleagues and my future self to understand?
(avoiding confusion down the road :D)

typescript

Answer 1

Answer №1

In this particular scenario with concrete details, you have the option to specify the return type on the arrow function passed to map:

const someValues = [1, 2, 3];

const test3: [string, string][] = [
    ...someValues.map((value): [string, string] => ['some string', 'another string']),
];

If you feel the type is clear enough, you can also omit it from the variable declaration:

const test4 = [
    ...someValues.map((value): [string, string] => ['some string', 'another string']),
];

Answer 2

In this particular scenario with concrete details, you have the option to specify the return type on the arrow function passed to map:

const someValues = [1, 2, 3];

const test3: [string, string][] = [
    ...someValues.map((value): [string, string] => ['some string', 'another string']),
];

If you feel the type is clear enough, you can also omit it from the variable declaration:

const test4 = [
    ...someValues.map((value): [string, string] => ['some string', 'another string']),
];

Answer 3

Answer №2

This particular form of construction is classified as string[][], which means it cannot be reassigned to [string, string][].

...[
 ['a', 'b'],
 ['c', 'd'],
]

The solution lies in the following code snippet:

const test1: [string, string][] = [
    ['a', 'b'],
    ['c', 'd'],
];

const test2: [string, string][] = [
    ...test1,
];

If you opt to use as const, make sure to maintain read-only status on all elements:

const test2: (readonly [string, string])[] = [
    ...[
        ['a', 'b'],
        ['c', 'd'],
    ] as const
]

By default, Typescript assumes arrays are mutable, hence it defaults to a broader type.

Answer 4

This particular form of construction is classified as string[][], which means it cannot be reassigned to [string, string][].

...[
 ['a', 'b'],
 ['c', 'd'],
]

The solution lies in the following code snippet:

const test1: [string, string][] = [
    ['a', 'b'],
    ['c', 'd'],
];

const test2: [string, string][] = [
    ...test1,
];

If you opt to use as const, make sure to maintain read-only status on all elements:

const test2: (readonly [string, string])[] = [
    ...[
        ['a', 'b'],
        ['c', 'd'],
    ] as const
]

By default, Typescript assumes arrays are mutable, hence it defaults to a broader type.

When two-dimensional arrays meet destructuring, it results in a type error

UPDATE

UPDATE #2

Answer №1

Answer №2

Similar questions

Cross-component communication in Angular

Developing a discriminated union by utilizing the attribute names from a different type

React Component - Element with an undefined value

Obtain the hexadecimal color code based on the MUI palette color name

How can I assign a type to an array object by utilizing both the 'Pick' and '&' keywords simultaneously in TypeScript?

The Dilemma of using forRoot() in Angular 2/4+ Shared Modules

Guide on converting a JSON object into a TypeScript Object

Parent observable method encountering an error while grouping multiple HTTP calls in Angular

Using Rollup alongside @rollup/plugin-babel and Typescript: Anticipated a comma, received a colon instead

Leveraging WebStorm's TypeScript support in conjunction with node_modules

ESLint refuses to be turned off for a particular file

Is it necessary to manually validate parameters in TypeScript when developing a library?

Looking to resolve a module-specific error in Angular that has not been identified

Converting API response into a class instance using `class-transformer` in TypeScript: A step-by-step guide

Multiple components are returned with switch case

Angular examine phrases barring the inclusion of statuses within parentheses

Component fails to navigate to the page of another component

RxJS: when combined with timer, groupBy operator does not emit any values

What are the steps to set up ChartJS on a personal computer?

Is there a way to seamlessly share TypeScript types between my Node.js/Express server and Vite-React frontend during deployment?