Type 'Partial' cannot be assigned a value when combining interfaces with generic types

Question

Type 'Partial' cannot be assigned a value when combining interfaces with generic types

Consider the following scenario:

class Table<ValuesType extends DefaultTableValues = DefaultTableValues>{
    public values: ValuesType;
    constructor(initialValues:ValuesType) {
        this.values=initialValues;
    }

    public set(newValues:Partial<ValuesType>){
        this.values={
            ...this.values,
            ...newValues
        }
    }
}

class User<MoreValues extends UserValues = UserValues> extends Table<MoreValues>{
    constructor(values:MoreValues) {
        super(values);

        this.set({avatar:'some-string'});
        //ERROR - Argument of type {avatar:'some-string'} is not assignable to type Partial
    }
}
interface DefaultTableValues{
    id:string;
}
interface UserValues extends DefaultTableValues{
    avatar:string;
    username:string;
}

An error occurs when using this.set with the message:

Argument of type {avatar:'some-string'} is not assignable to type Partial

Changing

class User<MoreValues extends UserValues = UserValues> extends Table<MoreValues>

to

class User extends Table<UserValues>

solves the issue, but it limits passing specific User types and extending the User class.

Is it expected for MoreValues to always include the avatar:string property as it extends UserValues?

This situation seems related to this question on Stack Overflow, but finding a solution for my case remains elusive.

typescript

Answer 1

Answer №1

The issue you are pointing out is indeed similar to the one mentioned in the linked question. The accepted answer from that question states:

Subtyping goes beyond just adding extra properties—it can involve narrowing down the range of acceptable values for those properties.

To illustrate, consider the following interface:

interface RestrictedValues extends UserValues {
    avatar: "nonexistent"
}

This interface extends UserValues, making it compatible with MoreValues. However, the avatar property within this interface is limited to only having the value nonexistent. Therefore, when using the Partial<> type as the first argument for the set() function, it should specifically allow the value nonexistent, not any arbitrary string as implied by UserValues. For example, consider the code snippet below:

class User<MoreValues extends UserValues = UserValues> extends Table<MoreValues>{
    constructor(values: MoreValues) {
        super(values);

        const thing1: RestrictedValues = { avatar: "nonexistent", id: "", username: "" };
        const thing2: MoreValues = thing1;
    }
}

In this scenario, thing1 cannot be directly assigned to

thing2</code because there is no guarantee that <code>MoreValues

will always be instantiated with a value such as { avatar: "" }. If MoreValues allows other subtypes besides RestrictedValues, TypeScript generates the error:

Type 'RestrictedValues' is not assignable to type 'MoreValues'.
  'RestrictedValues' meets the constraints of 'MoreValues', but 'MoreValues' may receive a different subtype than 'UserValues'.

A simpler demonstration of this concept involving boolean values is presented in this answer, which provides further clarity on this matter.

The error indicates that your Generic Type P cannot be assigned a value of {} because P may adhere to a more specific or restricted type that conflicts with the default value.

This means that an empty object {} may not satisfy all the potential types used by Generic Type P.

Let's consider a simpler example focusing solely on boolean values for better comprehension:
interface OnlyBoolIdentityInterface<T> {
  (arg: T): T;
}

function onlyBoolGeneric<T extends boolean>(arg: T = false): T {
  return arg;
}
If we define a type more nuanced than simply a boolean, for instance:
type TrueType = true;
and specialize the function OnlyBoolIdentityInterface to accept only true values like so:
const onlyTrueIdentity: OnlyBoolIdentityInterface<TrueType> = onlyBoolGeneric;
Even though TrueType adheres to the constraint enforced by T extends boolean, the default value arg: T = false does not align with TrueType.

This discrepancy is what the error message aims to convey.

So how can you rectify such errors? Here are some approaches:

Omit the default value

Ensure that T encompasses the specialized type of the default parameter (in this case, false)

Directly align T with parameters utilizing default values

For additional insights into this error message, refer to the corresponding issue: https://github.com/Microsoft/TypeScript/issues/29049.

Answer 2

The issue you are pointing out is indeed similar to the one mentioned in the linked question. The accepted answer from that question states:

Subtyping goes beyond just adding extra properties—it can involve narrowing down the range of acceptable values for those properties.

To illustrate, consider the following interface:

interface RestrictedValues extends UserValues {
    avatar: "nonexistent"
}

This interface extends UserValues, making it compatible with MoreValues. However, the avatar property within this interface is limited to only having the value nonexistent. Therefore, when using the Partial<> type as the first argument for the set() function, it should specifically allow the value nonexistent, not any arbitrary string as implied by UserValues. For example, consider the code snippet below:

class User<MoreValues extends UserValues = UserValues> extends Table<MoreValues>{
    constructor(values: MoreValues) {
        super(values);

        const thing1: RestrictedValues = { avatar: "nonexistent", id: "", username: "" };
        const thing2: MoreValues = thing1;
    }
}

In this scenario, thing1 cannot be directly assigned to

thing2</code because there is no guarantee that <code>MoreValues

will always be instantiated with a value such as { avatar: "" }. If MoreValues allows other subtypes besides RestrictedValues, TypeScript generates the error:

Type 'RestrictedValues' is not assignable to type 'MoreValues'.
  'RestrictedValues' meets the constraints of 'MoreValues', but 'MoreValues' may receive a different subtype than 'UserValues'.

A simpler demonstration of this concept involving boolean values is presented in this answer, which provides further clarity on this matter.

The error indicates that your Generic Type P cannot be assigned a value of {} because P may adhere to a more specific or restricted type that conflicts with the default value.

This means that an empty object {} may not satisfy all the potential types used by Generic Type P.

Let's consider a simpler example focusing solely on boolean values for better comprehension:
interface OnlyBoolIdentityInterface<T> {
  (arg: T): T;
}

function onlyBoolGeneric<T extends boolean>(arg: T = false): T {
  return arg;
}
If we define a type more nuanced than simply a boolean, for instance:
type TrueType = true;
and specialize the function OnlyBoolIdentityInterface to accept only true values like so:
const onlyTrueIdentity: OnlyBoolIdentityInterface<TrueType> = onlyBoolGeneric;
Even though TrueType adheres to the constraint enforced by T extends boolean, the default value arg: T = false does not align with TrueType.

This discrepancy is what the error message aims to convey.

So how can you rectify such errors? Here are some approaches:

Omit the default value

Ensure that T encompasses the specialized type of the default parameter (in this case, false)

Directly align T with parameters utilizing default values

For additional insights into this error message, refer to the corresponding issue: https://github.com/Microsoft/TypeScript/issues/29049.

Type 'Partial' cannot be assigned a value when combining interfaces with generic types

Answer №1

Similar questions

A TypeScript function that returns a boolean value is executed as a void function

Selecting an option with a specific index in Angular 2 RC2

What are the steps to resolve the "EADDRINUSE: address already in use :::3000" error in an integration test?

Error in TypeScript: The property 'data' is not found within type '{ children?: ReactNode; }'. (ts2339)

Setting up eslint for your new react project---Would you like any further

Can ES6 class getters, setters, and private properties be utilized in TypeScript with an interface?

When a variable is used in Postgresql, the ORDER BY clause is disregarded, but accurate results are returned when the variable value is

Unable to send a function as props to a child component in TypeScript

Error encountered while building with Next.js using TypeScript: SyntaxError - Unexpected token 'export' in data export

Creating an enumeration within a class

Setting nodeIntegration to false led to an Uncaught ReferenceError: require is not defined when trying to access Object.url (external "url":1) in the electron-react-typescript environment

Create and export a global function in your webpack configuration file (webpack.config.js) that can be accessed and utilized

How to dynamically inject HTML content from a child component into a different component using Angular 5

Tips for integrating tsconfig with webpack's provide plugin

Angular: Issue encountered while attempting to differentiate an '[object Object]'. Arrays and iterables are the only permissible types for this operation

When trying to access a certain class property, I was met with the following error message: TypeError: Unable to read/set property 'x' of

issues arise post-transpilation with creating errors

Is it feasible to restrict a generic type using typeguard?

Utilizing Angular Services to Share Events and Reusing Components Multiple Times on a Page

Asynchronously download static images with the power of NextJS and TypeScript integration