Using TypeScript generics to constrain to either a number or a string

I am working on coding a react input component that accepts a defaultValue parameter of type string | number. This component has a state type matching the type of the received defaultValue;

This is my code:

type TypeName<T> = T extends number ? "number" : "string";

interface IInputProps<P extends string | number>{
    defaultValue: P,
    rule: (value: P)=>boolean,
    onChange: (value: P)=>void
}

interface IInputState<P extends string | number>{
    value: P,
    type: TypeName<P>
}

class Input<P extends string | number> extends Component<IInputProps<P>,IInputState<P>>{
    constructor(props:IInputProps<P>){
        super(props);
        this.state = {
            type: typeof props.defaultValue,
            value: this.props.defaultValue
        }

An error is occurring in the constructor section

ERROR in [at-loader] ./src/components/Input/index.tsx:21:4
    TS2322: Type '"string" | "number" | "bigint" | "boolean" | "symbol" | "undefined" | "object" | "function"' is not assignable to type 'TypeName<P>'.
  Type '"string"' is not assignable to type 'TypeName<P>'.

Any suggestions on how to resolve this issue?

typescript

Answer №1

If you happen to be a step ahead of the compiler in this scenario, congratulations on your cleverness. While you grasp that no matter what P represents, the type of props.defaultValue will align with TypeName<P>, the compiler struggles to reach the same conclusion. It simply identifies that typeof props.defaultValue could only result in one of the string outputs from the typeof operator: "string", "number", or "boolean," among others. Even if it were to narrow it down to just "string" or "number," it lacks the sophistication to connect the dots between the value and P to declare it as TypeName<P> (at least in TypeScript 3.2).

The easiest approach is to acknowledge your supremacy over the compiler and assert that typeof props.defaultValue can indeed be handled as a value of type TypeName<P>. The code snippet below should compile without issues:

this.state = {
    type: typeof props.defaultValue as TypeName<P>, // assertion
    value: this.props.defaultValue
}

As of now, there doesn't seem to be a method to guide the compiler towards verifying TypeName<P> autonomously, so any attempt - such as implementing a type guard - would essentially function as an assertion.

In case you need to make this assertion frequently, consider encapsulating it within a function like the one shown below:

function getTypeName<T extends string | number>(t: T): TypeName<T> {
  return typeof t as TypeName<T>; // assertion
}

This way, you confine the assertion to a specific location and shield subsequent users of getTypeName() from confronting the issue directly:

this.state = {
    type: getTypeName(props.defaultValue), // no assertion here
    value: this.props.defaultValue
}

Hopefully, this sheds some light on the situation. Best of luck!

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

Match and populate objects from the array with corresponding items

Currently, I have an array and object containing items, and my goal is to check each item in the array to see if its path matches any of the object names. If a match is found, I push it into that object's array. While this part is working fine, I am ...

arraysangulartypescriptsortingmerge

Exploring the method to retrieve a dynamically added property in Typescript

My React Component Loader receives certain props. The contentAlign property is only available when the local property exists and its value is 'relative'. I am encountering an error when trying to include contentAlign in the props, and I cannot ...

reactjstypescript

Modify an array by incorporating values from another array that have a matching property

I have two arrays that look like this let array1 = [{ 'id': 1, 'name': 'A' }, { 'id': 2, 'name': 'B' }, { 'id': 3, 'name': ' ...

javascriptarraystypescript

Challenge encountered with TypeScript integration in the controller

I am currently in the process of converting a website from VB to C# and incorporating TypeScript. I have successfully managed to send the data to the controller. However, instead of redirecting to the next page, the controller redirects back to the same pa ...

c#ajaxasp.net-mvctypescript

Utilize Firebase for Playwright to efficiently implement 'State Reuse' and 'Authentication Reuse'

In my testing environment, I want to eliminate the need for repeated login actions in each test run. My approach involves implementing 'Re-use state' and 'Re-use Authentication', but I've encountered a challenge with Firebase using ...

typescriptfirebasetestingautomationplaywright

Analyzing arrays and object key/value pairs based on a specific value in javascript

I want to create a new object with key/value pairs. The new object should include values from an existing key/value object as well as unique values from an array. Here is the array: [{ name: "Computer", name: "Car", name: "House&q ...

javascriptarraystypescriptcomparisonkey-value

Angular2's integration of backend API calls

My backend calls are functioning correctly, but I'm encountering an issue with promises. I am unable to retrieve the data from the first promise in order to make the second call. Any insights on where I might be going wrong? login() { if (thi ...

typescriptangular

Mastering the art of connecting content within Prismic

I have been working on creating a mega menu for my website header, but I am encountering a type error. Has anyone else faced this issue before and how did you resolve it? I am currently importing the generated types from @/prismicio-types. Here is an exam ...

typescriptnext.jsprismic.io

Tips for sending data returned asynchronously from an Observable in Angular from a Child component to its Parent

I am facing a challenge passing Async data from child to parent component. When I try to access console.log(this.values) within the ngAfterViewInit() method in the parent component's HTML page load, it returns an empty value. However, upon clicking th ...

angulartypescriptangular-componentsviewchildasyncdata

`Typescript does not adhere to the specified type when used inside a for loop with a local

This code snippet declares a variable venuelist of type Venue array and initializes it as an empty array. The type Venue has a property named neighborhood. There is a for loop that iterates through the venuelist array and checks if the neighborhoods matc ...

typescripttypes

Extract JSON values based on a given condition

I am working on a Typescript project that involves an array and a JSON object. I need to extract the value of a property from the object based on another property's value being in the array. Here is the array: let country: string[] = [ 'AR' ...

arraysjsontypescript

What is the best way to create a personalized filter function for dates in JavaScript?

I am working with a DataTable that includes a column called Timestamp: <p-dataTable sortMode="multiple" scrollable="scrollable" scrollHeight="150" [value]="currentChartData" #dt> <p-column field="timestamp" header="Timestamp" [sortable]=" ...

angulartypescriptprimengprimeng-datatable

How can I compel npm to resolve dependencies flatly?

I am working on a project where multiple frontends share a common library. The module dependencies for these projects are managed using npm. In the package.json file of each project, I specify: "dependencies": { "mylib": "file:../<...path...> ...

angulartypescriptnpmangular-aot

A guide on assigning specific (x, y) coordinates to individual IDs within the tree structure

When attempting to calculate the positions of each ID in order to arrange them hierarchically on the canvas, I encounter some challenges. Whether it's organizing them into a tree structure or multiple trees resembling a forest, one restriction is that ...

javascripttypescriptalgorithmgraphtree

Exploring the World of Popper.js Modifiers

Within our React and Typescript application, we integrate the react-datepicker library, which utilizes popper.js. Attempting to configure PopperModifiers according to the example provided here: . Despite replicating the exact setup from the example, a typ ...

javascriptreactjstypescriptpopper.js

What is the process for importing a file with an .mts extension in a CJS-first project?

Here's a snippet from a fetchin.mts file: import type { RequestInfo, RequestInit, Response } from "node-fetch"; const importDynamic = new Function("modulePath", "return import(modulePath);") export async function fetch(u ...

javascriptnode.jstypescriptes6-modulescommonjs

Unable to access due to CORS restriction on Express server

Whenever I attempt to send a POST api request to my express server, I encounter the following error message. Access to XMLHttpRequest at 'localhost:8081/application' from origin 'localhost:8083' has been blocked by CORS policy: No &apos ...

typescriptexpresscorspassport.jsnuxtjs

Angular HTTP Patch method requires explicitly defined HTTP options as input parameters

I encountered a challenge with using Angular's HTTP patch method and noticed that the overloaded function patch(url, body, options) only accepts hardcoded values for HTTP options. An example of a hardcoded approach that works: patchEntity(id: number) ...

angulartypescript

Tips on changing the name of a property within an object using JavaScript

While this question may appear to be a duplicate, there is actually a distinction. I am attempting to provide a new key that does not contain any spaces. {order_id :"123" , order_name : "bags" , pkg_no : "00123#"} My goal is ...

javascripttypescript

The div element is finally loading properly after multiple clicks

I need some assistance with loading dynamic divs in Angular. I have created a button that adds new divs each time it is clicked in a specific area. However, once these new divs are added, they appear incorrectly: After adding the divs, the editor and cale ...

javascripthtmlangulartypescriptprimeng