Is it possible to designate a Typescript generic type as a tuple with equal length to that of another tuple?

Imagine having a function that takes in a dataset which is an array of (identically-typed) tuples:

type UnknownTuple = any[]
function modifyDataStructure<T extends UnknownTuple>(list: T[]) {
   ...
}

The goal is to define a second argument with the same length as the tuples, but with different types (for example, string labels):

const entries = [
  [7, 'Moo',    true],
  [3, 'Sophie', false],
  [4, 'Tip',    true]
] 

modifyDataStructure(entries, ['age', 'name', 'is_fuzzy']) // success
modifyDataStructure(entries, ['age', 'name'])             // error

How can we specify the type for the second argument?

type UnknownTuple = any[]
function modifyDataStructure<T extends UnknownTuple>(list: T[], labels: ???) {
   ...
}

This question post "Typescript length of a generic type" is quite similar, but involves varargs and higher-order functions, making it more complex. Here, I aim to simplify and focus on clarifying this scenario.

typescript

Answer №1

To convert a tuple into another tuple of the same length, you can utilize a mapped type:

const data = [
  [7, 'Moo',    true] as const,
  [3, 'Sophie', false] as const,
  [4, 'Tip',    true] as const 
]
type MysteryTuple = readonly any[]
type Titles<T> = {
    [P in keyof T]: string
}
function convertTuple<T extends MysteryTuple>(list: T[], titles: Titles<T>) {
   ///...
}
convertTuple(data, ['age', 'name', 'is_fuzzy']) // works fine
convertTuple(data, ['age', 'name']) // results in an error

Playground Link

If you'd like convertTuple to infer tuple types rather than arrays, adjust the constraint to [any] | any[], but remember to specify object literals inline when calling your function

function convertTuple<T extends [any] | any[]>(list: T[], labels: Titles<T>) {

}
convertTuple([
  [7, 'Moo', true],
  [3, 'Sophie', false],
  [4, 'Tip', true]
], ['age', 'name', 'is_fuzzy']) // ok

Playground Link

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Despite providing a type, Typescript continues to display an error claiming that the property 'children' does not exist on the type 'FC<ProvidersProps>'

I have set up the props interface, but I am still encountering an error. Property 'children' does not exist on type 'FC'. 'use clilent' import React, { FC, ReactNode } from 'react' import { Toaster } from 'rea ...

reactjstypescriptnext.js

Modules failing to load in the System JS framework

Encountering a puzzling issue with System JS while experimenting with Angular 2. Initially, everything runs smoothly, but at random times, System JS struggles to locate modules... An error message pops up: GET http://localhost:9000/angular2/platform/bro ...

javascripttypescriptangularsystemjs

Trigger the identical event to be sent to two distinct functions upon the corresponding button click in Angular 2 using Typescript

I recently implemented a service that fetches JSON data and subscribes to two different variables within my component. These variables are then used by two separate drop-down lists to filter the data accordingly. The filtered data is then sent to another s ...

angulartypescript

Permitted the usage of a global variable of any type as the return value of a function that does not explicitly define its

Here's a snippet of TypeScript code that compiles successfully: let testVar: any; const testFunc: () => number = () => { return testVar; }; Why does this code compile without errors? What is the reasoning behind it? ...

typescripttypescript-types

Angular: extracting value from forkJoin nested within another observable's pipe

Here is the scenario that needs to be implemented: An API call is made which returns a response containing an array of objects. The objects are then mapped to another array of objects. For each item in this new array, another API call needs to be made. Th ...

angulartypescriptrxjsfork-join

Importing components with local data within an ngFor in Angular TypeScript

Having recently started working with Angular2, I am facing a challenge with importing components in ngFor loops. The issue seems to arise when importing components with data in ngFor loops; it checks for values in the .ts file instead of the local variabl ...

angulartypescriptngfor

What kind of null/undefined is being assumed?

system details: Visual Studio Code Version: 1.47.3 Typescript Version: 4.0.0-dev.20200727 tsconfig.js: "strict": true, code example: let x = null; // x is any type let y = x; // x is null type(why? x is any type on top), y is null type x = 1; / ...

typescripttypescript-typings

Adding custom CSS and JavaScript to an Angular 4 project can be done by including the necessary

When working with Angular 2, I was able to include stylesheets directly in the index.html like so: <link rel="stylesheet" href="css/mycss.css"> However, with Angular 4, the styles need to be added to the angular-cli.json file within the styles and ...

node.jsangulartypescriptangular-cli

Contrasting assign and modify operations on arrays

After spending 2 days searching for a bug in my angular2 project's service.ts file, I finally found it and fixed it. However, I'm still trying to understand why the working code behaves differently from the bugged one, as they appear identical to ...

javascriptangulartypescript

Tips for successfully sending an array of numbers using TypeScript and React

Exploring Types in React is new to me and I'm still navigating my way through it. My current challenge involves adding numbers from a form within a child component to an existing array of numbers. To tackle this, I've initialized a useState hoo ...

reactjstypescriptreact-hooks

AngularFire2 Firestore Custom Query: retrieve documents based on current date and time.startTime

Welcome to the world of AngularFire2 and Firestore! My objective is clear: Query data from Firestore where startTime matches currentDateRange. I am facing some challenges with creating a dynamic query in Firestore. After going through the official docume ...

typescripttimestampangularfire2google-cloud-firestore

What is the most efficient way to dynamically load a script file before proceeding with the rest of the code execution?

In my Angular home.component.ts file, I have added the script loading code as shown below: export class HomeComponent { constructor() { this.loadDynamicScript(); } public loadDynamicScript() { var script = document.createElement(&a ...

angulartypescriptsleepscript-tag

Encountering an error when attempting to access an object property dynamically by using a passed down prop as a variable in Vue 2 & Vuex

I have been struggling for hours to find a solution to this problem, but so far I've had no luck. I've looked at these two questions, but they didn't provide the answers I needed: Dynamically access object property using variable Dynamical ...

javascripttypescriptvue.jsvuejs2vuex

The @Input directive is failing to receive any data from its parent component

Recently, I delved into the workings of Angular's @Input feature and have found it quite useful thus far. My database is Firebase, and the data snippet I am fetching looks like this: { "page_area_business_image" : { "expand" : { ...

angulartypescriptangular2-inputs

The issue with the Angular 5 HttpClient GET-Request not closing persists

Currently, I am utilizing an Http-GET request to fetch JSON data from my backend service. Service: public storedCategories: BehaviorSubject<Category[]> = new BehaviorSubject(null); constructor() { const subscription = this.http.get&l ...

angulartypescripthttphttp-getsubscribe

How can we track and record NaN values in JavaScript/TypeScript as they occur in real-time?

Is there a reliable method to identify and prevent NaN values during runtime, throughout all areas of the application where they might arise? A) Are there effective linting tools available to alert about possible occurrences of NaN values within specific ...

javascripttypescripterror-handlinglinthealth-monitoring

Idiosyncratic TypeScript behavior: Extending a class with comparable namespace structure

Lately, I've been working on creating a type library for a JavaScript written library. As I was defining all the namespaces, classes, and interfaces, I encountered an error TS2417 with some of the classes. I double-checked for any issues with method o ...

javascripttypescriptooptypes

Creating a type definition for the createSelector function based on the useQuery result

Struggling to find the correct typings for the createSelector res parameter from redux-js, especially in TypeScript where there are no examples or explanations available. The only guidance is provided in JS. const selectFacts = React.useMemo(() => { ...

javascripttypescriptreduxreact-reduxrtk-query

How to set up an Angular ErrorHandler?

Attempted to register an Angular ErrorHandler in this simplified StackBlitz environment, but it seems that it's not capturing the error thrown within the constructor of the HelloComponent. Any insights on this issue? Your opinions? ...

node.jsangulartypescriptstackblitz

Give it a little time before uploading a widget onto the page

As a newcomer to programming, I recently came across this code from an open source project. I am in the process of loading a widget onto a website. Instead of having the widget load instantly, I would like it to wait 10 seconds before displaying. Below i ...

javascripttypescript