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

Question

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

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, 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 (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. 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 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!

Answer 2

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, 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 (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. 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 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!

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

Answer №1

Similar questions

The database migration encounters an issue: The module 'typeorm' cannot be located

Ways to update a component upon becoming visible in Angular

Prevent updating components when modifying state variables

The exploration of child routes and modules

Error 2322: Troubleshooting Typescript arrow functions overloads issues

Tips for quietly printing a PDF document in reactjs?

Access SCSS variable values in Angular HTML or TypeScript files

Vue 3 - Compelled to utilize any data type with computedRef

Typescript is throwing a Mongoose error stating that the Schema has not been registered for the model

Identifying collisions or contact between HTML elements with Angular 4

Using TypeScript, pass an image as a prop in a Styled Component

Only one choice for discriminated unions in react props

Using Mat-Error for Two Way Binding leads to frequent triggering of ngModelChange事件

The proper approach for managing downloaded d.ts files from DefinitelyTyped after installation through npm

When a reaction function is triggered within a context, it will output four logs to the console and

What is preventing me from retrieving a value from a member function or method within a TypeScript class instance?

Exploring multiple states within an interval function in React Native

Steps for eliminating the chat value from an array tab in React

The Event Typing System

Unraveling the mysteries of an undefined entity