The specified type 'X' cannot be used in place of type 'Y' in Typescript generics

Question

The specified type 'X' cannot be used in place of type 'Y' in Typescript generics

Check out this code snippet:

interface DummyTableRow {
    id: number;
    name: string;
}
interface RowChange<Row extends object> {
    newRow: Row | null;
    oldRow: Row | null;
}
interface RowChangeBag {
    Dummy: RowChangeList<DummyTableRow>;
}
type RowChangeList<Row extends object> = Array<RowChange<Row>>;

function add<
    Row extends object,
    T extends keyof RowChangeBag,
    // receiving an error on the following line: Type 'DummyTableRow' is not assignable to type 'Row'.
    L extends RowChangeList<Row> = RowChangeBag[T]
    >(
    bag: RowChangeBag,
    tableName: T,
    newRow: Row | null,
    oldRow: Row | null,
) {
    bag[tableName].push({ newRow, oldRow });
}

Any idea why it's showing an error? Why can't it assign DummyTableRow to Row?

Do you think this might be a TypeScript issue? (I'm using version 2.6.2 for reference)

typescript generics

Answer 1

Answer №1

It's important to note that this issue is not caused by TypeScript.

The situation you observed can be simplified as follows:

interface ExampleTableRow {
    id: number;
    name: string;
}

function performAction<Row>() {
    let x: ExampleTableRow
    let y: Row
    // error on next line: Type 'ExampleTableRow' is not assignable to type 'Row'.
    y = x
}

The challenge arises from the fact that as Row is a generic type, it becomes difficult for the compiler to determine whether x can be assigned to y. This is because y can potentially be any type defined at the time of usage, for instance:

performAction<{ a: string }>()

Answer 2

It's important to note that this issue is not caused by TypeScript.

The situation you observed can be simplified as follows:

interface ExampleTableRow {
    id: number;
    name: string;
}

function performAction<Row>() {
    let x: ExampleTableRow
    let y: Row
    // error on next line: Type 'ExampleTableRow' is not assignable to type 'Row'.
    y = x
}

The challenge arises from the fact that as Row is a generic type, it becomes difficult for the compiler to determine whether x can be assigned to y. This is because y can potentially be any type defined at the time of usage, for instance:

performAction<{ a: string }>()

Answer 3

Answer №2

Your code is encountering issues because it is mixing two types with similar names that are not compatible:

DummyTableRow serves as your abstraction for the row → acceptable
The generic type constraint Row extends object: object is not compatible with DummyTableRow: id and name properties are missing. → Instead, use Row extends DummyTableRow.

Additional issues to address:

RowChangeBag should also be generic.
RowChangeBag is intended to store multiple RowChangeList, where T extends keyof RowChangeBag and bag[tableName] is a RowChangeList. In the provided code, it has been divided into 2 interfaces to simplify the addition of tables.
The L generic type constraint in the add method is currently not utilized.

Recommendations to enhance the code readability:

Opt for generic type names starting with T: Row becomes TRow
Subsequently, simplify the name of DummyTableRow to just Row
Avoid the use of null; use only undefined instead
Define properties as optional rather than nullable
Use T[] over Array<T> for brevity and JavaScript convention

Proposed fix (validated on the TypeScript Playground):

interface Row {
    id: number;
    name: string;
}

interface RowChange<TRow extends Row> {
    newRow?: TRow;
    oldRow?: TRow;
}

type RowChangeList<TRow extends Row> = RowChange<TRow>[];

interface TableGroup<T> {
    Table1: T;
    Table2: T;
}

interface RowChangeBag<TRow extends Row>
    extends TableGroup<RowChangeList<TRow>> { }

function add<
    TRow extends Row,
    TKey extends keyof RowChangeBag<TRow>
>(
    bag: RowChangeBag<TRow>,
    tableName: TKey,
    newRow: TRow,
    oldRow: TRow,
) {
    bag[tableName].push({ newRow, oldRow });
}

Answer 4

Your code is encountering issues because it is mixing two types with similar names that are not compatible:

DummyTableRow serves as your abstraction for the row → acceptable
The generic type constraint Row extends object: object is not compatible with DummyTableRow: id and name properties are missing. → Instead, use Row extends DummyTableRow.

Additional issues to address:

RowChangeBag should also be generic.
RowChangeBag is intended to store multiple RowChangeList, where T extends keyof RowChangeBag and bag[tableName] is a RowChangeList. In the provided code, it has been divided into 2 interfaces to simplify the addition of tables.
The L generic type constraint in the add method is currently not utilized.

Recommendations to enhance the code readability:

Opt for generic type names starting with T: Row becomes TRow
Subsequently, simplify the name of DummyTableRow to just Row
Avoid the use of null; use only undefined instead
Define properties as optional rather than nullable
Use T[] over Array<T> for brevity and JavaScript convention

Proposed fix (validated on the TypeScript Playground):

interface Row {
    id: number;
    name: string;
}

interface RowChange<TRow extends Row> {
    newRow?: TRow;
    oldRow?: TRow;
}

type RowChangeList<TRow extends Row> = RowChange<TRow>[];

interface TableGroup<T> {
    Table1: T;
    Table2: T;
}

interface RowChangeBag<TRow extends Row>
    extends TableGroup<RowChangeList<TRow>> { }

function add<
    TRow extends Row,
    TKey extends keyof RowChangeBag<TRow>
>(
    bag: RowChangeBag<TRow>,
    tableName: TKey,
    newRow: TRow,
    oldRow: TRow,
) {
    bag[tableName].push({ newRow, oldRow });
}

The specified type 'X' cannot be used in place of type 'Y' in Typescript generics

Answer №1

Answer №2

Similar questions

The object might be undefined; TypeScript; Object

Integrating TypeScript into an established project utilizing React, Webpack, and Babel

Display a JSON file within an Angular application using HTML

Utilizing MUI for layering components vertically: A step-by-step guide

What is the best way to reload a React/TypeScript page after submitting a POST request?

Attempting to build a table within a table structure

The initial processing step for the export namespace is to utilize the `@babel/plugin-proposal-export-namespace-from` plugin. Previous attempts to resolve this issue have been

Updating a record in a Node.js Express API using TypeScript version 3

TypeScript PatchBaseline with AWS CDK

Checking a sequence using a list of strings

When conducting a test, it was found that the JSX element labeled as 'AddIcon' does not possess any construct or call signatures

Is your React Native list elements feeling a little too close for comfort?

Adding a fresh element and removing the initial item from a collection of Objects in JavaScript

What is the most effective way to manage over 100 cases in Typescript without getting overwhelmed?

Trouble with displaying cell content in ag-grid within an Angular application

What could be causing the type errors I am encountering while trying to resolve this Promise within a generic function?

Sending real-time data from the tRPC stream API in OpenAI to the React client

Accept only the keys specifically assigned to an object

Using data analysis to customize the appearance of boundaries across various map styles - Google Maps Javascript API V3

When trying to reload Angular 8 pages, encountering an error that reads "Cannot GET /login" and also receiving a notification stating the image '/favicon.ico' cannot be loaded due to a violation of