Using TypeScript: Applying constraints to generic types with primitive datatypes

Question

Using TypeScript: Applying constraints to generic types with primitive datatypes

My TypeScript code includes some generic classes:

type UserId = number
type Primitive = string | number | boolean
class ColumnValue<T, S extends Primitive> {
    constructor(public columnName: String, public value: S) { }
}
abstract class Column<T> {
    constructor(public columnName: String) { }
    public set<S extends Primitive>(value: T): ColumnValue<T, S> {
        return new ColumnValue(this.columnName, this.getValue(value))
    }
    public abstract getValue<S extends Primitive>(value: T): S
}
let id = new class extends Column<UserId> {
    constructor() { super("id") }
    public getValue(value: UserId): number {
        return value
    }
}()

However, I'm encountering an error that reads:

Class '(Anonymous class)' incorrectly extends base class 'Column<number>'.
  Types of property 'getValue' are incompatible.
    Type '(value: number) => number' is not assignable to type '<S extends Primitive>(value: number) => S'.
      Type 'number' is not assignable to type 'S'

typescript typescript-generics

Answer 1

Answer №1

When dealing with the getter and setter functions for Columns, it's important to note that the type of S might not always be the same as T. Therefore, it is recommended to move the type parameter to the parent class like this:

Column<T, S extends Primitive>

.

type UserId = number
type Primitive = string | number | boolean
class ColumnValue<T, S extends Primitive> {
    constructor(public columnName: String, public value: S) { }
}
abstract class Column<T, S extends Primitive> {
    constructor(public columnName: String) { }
    public set(value: T): ColumnValue<T, S> {
        return new ColumnValue(this.columnName, this.getValue(value))
    }
    public abstract getValue(value: T): S
}
let id = new class extends Column<UserId, number> {
    constructor() { super("id") }
    public getValue(value: UserId): number {
        return value
    }
}()

The code above runs without errors when tested on the TypeScript playground.https://www.typescriptlang.org/play/#src=...

It's common to want to infer the type S based on the data being used with the setter function. However, the Column class must have a clearly defined type upon instantiation. This means you need to either specify the types explicitly when creating an instance (e.g., new Column<UserId, number>) or include a S parameter in the constructor for easier inference (like in

new Column<UserId>('id', 123)

).

Answer 2

When dealing with the getter and setter functions for Columns, it's important to note that the type of S might not always be the same as T. Therefore, it is recommended to move the type parameter to the parent class like this:

Column<T, S extends Primitive>

.

type UserId = number
type Primitive = string | number | boolean
class ColumnValue<T, S extends Primitive> {
    constructor(public columnName: String, public value: S) { }
}
abstract class Column<T, S extends Primitive> {
    constructor(public columnName: String) { }
    public set(value: T): ColumnValue<T, S> {
        return new ColumnValue(this.columnName, this.getValue(value))
    }
    public abstract getValue(value: T): S
}
let id = new class extends Column<UserId, number> {
    constructor() { super("id") }
    public getValue(value: UserId): number {
        return value
    }
}()

The code above runs without errors when tested on the TypeScript playground.https://www.typescriptlang.org/play/#src=...

It's common to want to infer the type S based on the data being used with the setter function. However, the Column class must have a clearly defined type upon instantiation. This means you need to either specify the types explicitly when creating an instance (e.g., new Column<UserId, number>) or include a S parameter in the constructor for easier inference (like in

new Column<UserId>('id', 123)

).

Answer 3

Answer №2

When utilizing your getValue function with a generic type S, it is essential that the inherited implementation also uses the same generic type S.

let id = new class extends Column<UserId> {
    constructor() { super("id") }
    public getValue<S extends Primative>(value: UserId): S {
        return <S>value
    }
}()

By incorporating the generic type S into the class, you have the opportunity to narrow down your function to specifically return a number.

abstract class Column<T, S extends Primative> {
    constructor(public columnName: String) { }
    public set(value: T): ColumnValue<T, S> {
        return new ColumnValue(this.columnName, this.getValue(value))
    }
    public abstract getValue(value: T): S
}

let id = new class extends Column<UserId, UserId> {
    constructor() { super("id") }
    public getValue(value: UserId): number {
        return value
    }
}()

Answer 4

When utilizing your getValue function with a generic type S, it is essential that the inherited implementation also uses the same generic type S.

let id = new class extends Column<UserId> {
    constructor() { super("id") }
    public getValue<S extends Primative>(value: UserId): S {
        return <S>value
    }
}()

By incorporating the generic type S into the class, you have the opportunity to narrow down your function to specifically return a number.

abstract class Column<T, S extends Primative> {
    constructor(public columnName: String) { }
    public set(value: T): ColumnValue<T, S> {
        return new ColumnValue(this.columnName, this.getValue(value))
    }
    public abstract getValue(value: T): S
}

let id = new class extends Column<UserId, UserId> {
    constructor() { super("id") }
    public getValue(value: UserId): number {
        return value
    }
}()

Using TypeScript: Applying constraints to generic types with primitive datatypes

Answer №1

Answer №2

Similar questions

Choosing a default selected value from a dropdown list with multiple editing options

Modifying a variable within an arrow function does not result in the variable being changed when checked outside of the arrow

Is there a way to extract information from an HttpClient Rest Api through interpolation?

Error encountered while unit testing a class decorator with type mismatch

Issue with Ionic Native File: File.writeFile function - file is not being created and there is no callback response

Implementing Angular 2 - Steps to ensure a service is accessible within the app module

Bug in timezone calculation on Internet Explorer 11

Angular component experiencing difficulty sorting a column sent from parent component to child component

Exploring the process of selecting checkboxes in Angular 6

Reference loss occurs in Angular Ionic when using @ViewChild

TypeScript version 3.7 has implemented a new feature where it will now display errors for each individual invalid prop instead of grouping them together as it

The W3C Validator has found a discrepancy in the index.html file, specifically at the app-root location

The limitation of accessing an object using a key from a callback in Typescript

How to Embed HTML Tags in a TypeScript File in Angular

An error should not be thrown if the object is potentially 'undefined', as there is a filter in place from rxjs

Typescript enums causing Safari to display blank screen in Next.js

What could be causing the issue where only one of my videos plays when hovered over using UseRef?

Adjust the dimensions of the ng2-charts to fit your needs

Troubleshooting: NextJS Typescript getInitialProps returning null value

The error message states that the property "user" is not found in the type "Session & Partial<SessionData>"