Creating a type that can be used with a generic type T along with an array of the same generic type T

I am experimenting with TypeScript for this project

type ArrayOrSingleType<T> = T | T[];

interface TestType<T> {
    a: ArrayOrSingleType<T>;
    b: (v: ArrayOrSingleType<T>) => void;
}


const testVariable: TestType<number> = {
    a: 4,
    b: (v) => console.log(v)
}

testVariable.b([2]);

Now, I aim to maintain consistency so that testVariable.b([2]) triggers an error due to the fact that a is a singular number, not an array of numbers

After seeking help from ChatGPT, I received a solution:

type ArrayOrSingleType<T> = T extends any[] ? T[] : T;

interface NewTestType<T, U extends ArrayOrSingleType<T>> {
    a: U;
    b: (v: U) => void;
}

// This will generate an error
const example1: NewTestType<number, number> = {
    a: 4,
    b: (v: number[]) => console.log(v) // Error: 'v' should be a single number, not an array of numbers
}

// This one is correct
const example2: NewTestType<number, number[]> = {
    a: [4],
    b: (v: number[]) => console.log(v) // 'v' should be an array of numbers
}

However, I desire a solution where I can avoid specifying the type twice (e.g.,

const example2: NewTestType<number, number[]> = {
. I want to be able to declare
const example2: NewTestType<number> = {

Answer №1

The solution presented here closely resembles the approach taken by GPT.

type ArrayOrSingle<T> = T extends any[] ? T[] : T;

interface Test<T extends ArrayOrSingle<unknown>> {
    a: T;
    b: (v: T) => void;
}

// An error should be thrown for this case
const t1: Test<number> = {
    a: 4,
    b: (v: number[]) => console.log(v) // Error: 'v' should be a number, not number[]
}

// This case should work without errors
const t2: Test<number[]> = {
    a: [4],
    b: (v: number[]) => console.log(v) // 'v' should be a number array
}

Explore the Live Playground here

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

The custom declaration file for the 'react-dates' module could not be located

I've been struggling to create a custom declaration file for the 'react-dates' npm package, but I'm facing issues with the compiler not recognizing my declaration file. Whenever I try to import DateRangePicker from 'react-dates&ap ...

"Encountered an error: Unable to interpret URL from (URL).vercel.app/api/getMessages" while deploying Next.js 13 using TypeScript on Vercel

Hello to all members of the StackOverflow Community: I am encountering an error message stating "TypeError: Failed to parse URL from next-chat-lenx51hr5-gregory-buffard.vercel.app/api/getMessages" while attempting to build my Next.js 13 application using T ...

Ensuring a precise data type in a class or object using TypeScript

I am familiar with Record and Pick, but I struggle to grasp their proper usage. My goal is to ensure that a class or object contains specific data types such as strings, Booleans, arrays, etc., while also requiring properties or fields of Function type. in ...

Guide to Setting Up "Remember Me" Login for Users in Angular

I am having trouble setting the 'Remember Me' option on my Login page. I tried using localstorage session but it seems like something is missing in the service file that's causing it not to respond properly. I attempted to follow a guide on ...

Embark on a journey through a preorder traversal of a Binary Tree using TypeScript

Hello! I've been tasked with creating a function that iterates over a binary tree and returns all its values in pre-order. Here is the code snippet: interface BinTree { root: number; left?: BinTree; right?: BinTree; }; const TreePreArray ...

Exploring Angular 2/4: Unpacking the Process of Accessing API Data Using Tokens

Hello there, I am trying to retrieve API data with a token using Angular 2/4. Below is the code I have written: import { Component, ViewEncapsulation } from '@angular/core'; import { Http, Response } from '@angular/http'; import &apos ...

Adjusting the settimeout delay time during its execution

Is there a way to adjust the setTimeout delay time while it is already running? I tried using debounceTime() as an alternative, but I would like to modify the existing delay time instead of creating a new one. In the code snippet provided, the delay is se ...

The perplexing behavior of RxJS Observables with Mongo Cursors

Recently, I've been working on converting a mongo cursor into an observable using my own RxJS implementation. Despite finding numerous solutions online, I wanted to challenge myself by creating one from scratch. I would greatly appreciate it if someo ...

What advantages does utilizing Jasmine Spy Object provide in Angular Unit Testing?

I have a question regarding unit testing in Angular using Jasmin/Karma. Currently, I am working with three services: EmployeeService, SalaryService, and TaxationService. The EmployeeService depends on the SalaryService, which is injected into its constru ...

Encountering an issue with d3 Angular 2 pie chart related to d3.arc data

I encountered a problem with my code: 'PieArcDatum' is not assignable to parameter of type 'DefaultArcObject.' at this specific line Argument of type return "translate(" + labelArc.centroid(d) + ")";. Could someone please assist me in ...

Is there a way to restrict the return type of a function property depending on the boolean value of another property?

I'm interested in creating a structure similar to IA<T> as shown below: interface IA<T> { f: () => T | number; x: boolean } However, I want f to return a number when x is true, and a T when x is false. Is this feasible? My attempt ...

The error message "Unable to access 'useContext' property of null" appeared

I am currently in the process of developing a component library using Material UI, TypeScript, and Rollup. The package has been successfully published, but I am encountering an error when trying to import it into a new project: "Uncaught TypeError: C ...

Navigating through object keys in YupTrying to iterate through the keys of an

Looking for the best approach to iterate through dynamically created forms using Yup? In my application, users can add an infinite number of small forms that only ask for a client's name (required), surname, and age. I have used Formik to create them ...

The error message "Cannot bind to 'ngForOf' because it is not recognized as a valid property of the element."

After utilizing NGFor for quite some time, I encountered an unexpected issue in a new application where I received the error message: Can't bind to 'ngForOf' since it isn't a known property of 'div'.' I found it strang ...

Building Interface/Type with Static Properties and Constructor Signature in TypeScript

I am looking to devise an interface or a type that contains static properties and a constructor signature. My goal is to utilize this interface/type as a parameter for a function. I experimented with using an interface, but encountered limitations in decla ...

The back button in the Chrome browser fails to trigger a page refresh within an Angular application

The code snippet above was used in an attempt to refresh the page when the back button is pressed, but it only works inconsistently in Chrome. The issue seems to be that despite correctly detecting the back button press, the page does not always refresh ...

Tips for keeping a specific key value pair as the final entry in a Typescript Object

My goal is to construct a Typescript Object that has a specific element with the key 'NONE' always positioned at the end. This arrangement is crucial for displaying the object in my HTML page with this value appearing last. I am seeking an implem ...

What could be the reason my RxJS Observable chain does not run again when new emissions are made?

Currently, I am facing a unique challenge while working with RxJS in an Angular service. The issue revolves around two observable chains designed to enhance a stream of notifications with user data. One chain functions correctly, allowing for multiple trig ...

I need RxJs to return individual elements to the subscriber instead of an array when using http.get

I've been developing an Angular 2 app (RC5) with a NodeJS backend RESTful API integration. One specific route on the backend returns an array of 'Candidates': exports.list = function (req, res, next) { const sort = req.query.sort || null ...

Using Angular to dynamically access component properties

Seeking assistance with creating dynamic Tabs in TabView of PrimeNG. The components are displaying properly, but I am unsure how to access their properties. I am following the guidelines provided at https://angular.io/guide/dynamic-component-loader and us ...