Mastering TypeScript: Leveraging Type Parameters in Generic Boundaries

Question

Mastering TypeScript: Leveraging Type Parameters in Generic Boundaries

"Utilizing Type Parameters within Generic Constraints" on the TypeScript website showcases the following example code. However, an error is thrown:

'Type 'U[keyof U]' is not compatible with type 'T[keyof U]'. Type 'U' cannot be assigned to type 'T'.'

function cloneFields<T extends U, U>(target: T, source: U): T {
    for (let id in source) {
        target[id] = source[id];
    }
    return target;
}
let x = { a: 1, b: 2, c: 3, d: 4 };
cloneFields(x, { b: 10, d: 20 });

Interestingly, this code snippet does not execute properly in the Playground. Can you spot what's causing the issue?

javascript typescript

Answer 1

Answer №1

It's logical that U cannot be assigned to T because the object fulfilling U may contain extra fields that are not present in T:

interface Foo { foo: number; }
interface Bar extends Foo { bar: number; }
interface Bar2 extends Foo { bar: string; }

function assign<T extends U, U>(b: U): T {
    const returnVal: T = b;  // error: Type 'U' is not assignable to type 'T'.
    return returnVal;
}

const bar2: Bar2 = { foo: 7, bar: "happy" };
assign<Bar, Foo>(bar2);

Therefore, since U and T are not interchangeable, it becomes impossible to ensure that a specific U[keyof U] can be assigned to T[keyof U].

(Although I'm not completely certain about this explanation, it appears to make sense to me.)

Nevertheless, with some tweaks to the typing approach, you can create a working version of copyFields, just like the one mentioned here:

function copyFields<T, K extends keyof T>(target: T, source: Pick<T, K>) {
    for (let id in source) {
        target[id] = source[id];
    }
    return target;
}

Answer 2

It's logical that U cannot be assigned to T because the object fulfilling U may contain extra fields that are not present in T:

interface Foo { foo: number; }
interface Bar extends Foo { bar: number; }
interface Bar2 extends Foo { bar: string; }

function assign<T extends U, U>(b: U): T {
    const returnVal: T = b;  // error: Type 'U' is not assignable to type 'T'.
    return returnVal;
}

const bar2: Bar2 = { foo: 7, bar: "happy" };
assign<Bar, Foo>(bar2);

Therefore, since U and T are not interchangeable, it becomes impossible to ensure that a specific U[keyof U] can be assigned to T[keyof U].

(Although I'm not completely certain about this explanation, it appears to make sense to me.)

Nevertheless, with some tweaks to the typing approach, you can create a working version of copyFields, just like the one mentioned here:

function copyFields<T, K extends keyof T>(target: T, source: Pick<T, K>) {
    for (let id in source) {
        target[id] = source[id];
    }
    return target;
}

Mastering TypeScript: Leveraging Type Parameters in Generic Boundaries

Answer №1

Similar questions

Comparing a series of smaller strings to a larger string for testing purposes

Utilize flexbox to create a list that is displayed in a column-reverse layout

Activate Navigation Bar in Angular Controller. Incorrect Scope Handling?

importing with a specific name may result in errors, while importing everything with * from does not

Retrieving information from input text and accessing it in a separate tab without submitting the form

Maintaining a reliable and efficient way to update the userlist in a chatroom using PHP, AJAX, and SQL

Using a React component within an HTML file

Implementing Passport authentication for Steam, transitioning from Express to NestJS

Getting a string output from a Typescript promise

Using parameters while defining an onclick event in JavaScript

Error: The JSON in app.js is invalid due to the unexpected token "C" at position 0

Utilize ngFor in Angular Ionic to dynamically highlight rows based on specific criteria

Error encountered in React V16.7: The function is not valid and cannot be executed

Is writeConcern not being returned by MongoDb's deleteOne function?

Clicking on each link will cause the content to scroll downward

Developing a compressed file in JavaScript

Managing Checkbox Actions and Pagination in an Angular Table

International replacement of external interface exportation

Reducing HTML content to 20 words efficiently through the use of JS and VueJS

A command-line style text input box in HTML