Definition of DataTypes in TypeScript

My goal seems simple to me, but I am realizing that my experience with Typescript might not be enough.

I want to create a type that can accept the following expressions:

const dp: DataPoint = [1, 2];
const dp2: DataPoint = [1, 2, 3];
const dps: DataPoints = [[1, 2], [2, 3]];
const dps2: DataPoints = [[1, 2, 3], [2, 3, 4]];

I've attempted the following:

export type DataPoint<T = number, D = number> = [number, T, D?];
export type DataPoints<T = number, D = number> = DataPoint<T, D>[];

I've tried various methods, but they all seem to result in types with two generics: DataPoint<number, number> or DataPoints<number, number>. Is there a way for it to infer never from the example of dp and have DataPoint<number> instead of

<DataPoint<number, number>
?

Answer №1

Perhaps utilizing tuples could simplify the process:

type DataPoint = 
  | [num, num]
  | [num, num, num]
  | [[num, num], [num, num]]
  | [[num, num, num], [num, num, num]];

const dp: DataPoint = [5, 6];
const dp2: DataPoint = [7, 8, 9];
const dps: DataPoint = [[10, 11], [12, 13]];
const dps2: DataPoint = [[14, 15, 16], [17, 18, 19]];

If a more versatile approach is preferred using arrays:

type DataPoint = 
  | [num, num]
  | [num, num, num]
  | Array<[num, num]>
  | Array<[num, num, num]>

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

typescript error: passing an 'any' type argument to a 'never' type parameter is not allowed

Encountering an error with newUser this.userObj.assigned_to.push(newUser);, receiving argument of type 'any' is not assignable to parameter of type 'never' typescript solution Looking for a way to declare newUser to resolve the error. ...

What is the best way to maintain the correct 'this' context for a function that is outside of the Vue

I'm struggling with my Vue component and encountering some errors. <script lang="ts"> import Vue from 'vue'; import { ElForm } from 'element-ui/types/form'; type Validator = ( this: typeof PasswordReset, rule: any, va ...

Hold on until the page is reloaded: React

My current setup includes a React Component that contains a button. When this button is clicked, a sidePane is opened. What I want to achieve is refreshing the page first, waiting until it's completely refreshed, and then opening the sidepane. Below i ...

The credentials in AWS S3Client are failing to load correctly

I encountered an issue with the S3 Client from aws sdk v3: When using the S3Client as outlined in the documentation and providing credentials via environment variables, I received an error message stating The AWS Access Key Id you provided does not exist ...

Utilizing TypeScript to enhance method proxying

I'm currently in the process of converting my JavaScript project to TypeScript, but I've hit a roadblock with an unresolved TypeScript error (TS2339). Within my code base, I have a class defined like this: export const devtoolsBackgroundScriptCl ...

Are npm @types packages causing issues in Visual Studio?

Nowadays, TypeScript's type packages are typically found in node packages with the format @types/packagename. Strangely, Visual Studio, despite its support for npm packages, appears to be unable to locate them: https://i.sstatic.net/7tOK1.png The s ...

What is the best way to retrieve the output value using the EventEmitter module?

I have an element that sends out a simple string when it is clicked Here is the HTML code for my element: <div (click)="emitSomething($event)"></div> This is the TypeScript code for my element: @Output() someString: EventEmitter<string& ...

Transfer an object to $state.go

I'm having trouble solving this issue. Here's the state I am working with: var myState:ng.ui.IState = <ng.ui.IState> { url: '/new/{order.orderNumber}', controller: 'OrderController', controll ...

Is there a way to delete a wrapper (parent element) in Angular without deleting the child element as well?

The solution provided in this answer on Stack Overflow addresses jQuery and not Angular or TypeScript. My inquiry bears resemblance to this question raised on a forum, but I am specifically looking for a resolution within the context of Angular. Is there ...

Angular: controller's property has not been initialized

My small controller is responsible for binding a model to a UI and managing the UI popup using semantic principles (instructs semantic on when to display/hide the popup). export class MyController implements IController { popup: any | undefined onShow(con ...

Having trouble changing file names in a Next.js 13 project

I've been facing an issue ever since Next.Js 13 updated the `pages` folder to a new `app` folder. Whenever I try to rename the default "Pages.tsx" file to something like "Home.tsx" or "Information.tsx", it breaks and shows a 404 Page error. The first ...

What kind of impact on performance can be expected when using index.ts in a Typescript - Ionic App?

When setting up the structure of a standard Ionic app, it typically looks like this: app pages ----page1 ---------page1.ts ----page2 ---------page2.ts If I were to include an index.ts file in the pages folder as follows: pages/index.ts export { Page1 } ...

What steps are involved in implementing ts-transformer-keys in a Next.js project?

I am trying to extract keys from an interface as a string array so that I can iterate over them. After doing some research on stackoverflow, I found out that I need to use a library called 'ts-transformer-keys'. In my Next.js project, which invol ...

The attribute 'X' is not present in the specified type 'IntrinsicAttributes & InferPropsInner'

I've been restructuring my code from a .js file to a .tsx file, as seen below: import React, { useEffect, useState } from 'react' import PropTypes from 'prop-types' import { checkMobile } from '../../utils/common' import ...

NodeJS Jest test failing due to a global variable being set for a different test already

I am currently working on a project in TypeScript using Node.js and Jest. I have a function that may or may not modify a global variable, which is a TypeScript Map. After one test modifies the global variable, it retains that value for subsequent tests. I ...

Curious about the missing dependencies in React Hook useEffect?

I'm encountering the following issue: Line 25:7: React Hook useEffect has missing dependencies: 'getSingleProductData', 'isProductOnSale', and 'productData'. Either include them or remove the dependency array react-hoo ...

What sets a module apart from a script?

As I delve into the depths of TypeScript documentation to grasp the concept of modules, particularly ES6 modules, I stumbled upon some interesting insights. typescript-modules - this documentation talks about typescript modules and highlights an important ...

ReactJS - Opt for useRef over useState for props substitution

Presented below is my ImageFallback component, which serves as a backup by displaying an svg image if the original one is not available. export interface ImageProps { srcImage: string; classNames?: string; fallbackImage?: FallbackImages; } const Im ...

Examining the function of a playwright script for testing the capability of downloading files using the window.open

Currently, we are working on a project that uses Vue3 for the frontend and we are writing tests for the application using Playwright. Within our components, there is a download icon that, when clicked, triggers a handler to retrieve a presigned URL from S3 ...

The enigma of the mysterious karma provider error

As a newcomer to unit testing in JavaScript, AngularJS, and Karma, I have successfully written passing tests for controllers. However, when trying to test services, I encountered an error: Unknown provider <- nProvider <- User. The User service is th ...