The type 'Observable<false>' cannot be assigned to the type 'Observable<boolean>'

Question

The type 'Observable<false>' cannot be assigned to the type 'Observable<boolean>'

Our team had been using Knockout.js (v3.5.0) along with its TypeScript definitions without any issues until TypeScript 4.6.2 came along. It seems that the problem goes beyond just the definitions file, possibly due to a change in how TypeScript handles boolean types. To showcase this issue, I created a small code example inspired by the Knockout d.ts:

interface Observable<T>
{
  (): T;
  (value: T): any;
}

function observable<T>(value: T): Observable<T>
{
  return undefined as any;  // the actual implementation is not crucial for this demonstration
}

const x: Observable<boolean> = observable(false);

This code snippet encounters a compilation error:

Type 'Observable<false>' is not assignable to type 'Observable<boolean>'.
  Types of parameters 'value' and 'value' are incompatible.
    Type 'boolean' is not assignable to type 'false'.

While casting false as boolean may work, it feels more like a workaround than a proper solution (especially considering the need to cast every occurrence of true/false). Are there any better approaches to address this?

Edit: Upon reviewing comments, it appears that there have been changes in type checking. Additional examples can be found here. Playground Link.

Has there been any official information (with explanation) regarding this change?

Edit2: Following suggestions from the comments, a bug report has been filed at https://github.com/microsoft/TypeScript/issues/48150

typescript boolean

Answer 1

Answer №1

Instead of assuming, I recommend explicitly defining the generic type like so:

const variable = observable<boolean>(false);

This helps avoid any confusion that may arise from assuming the type based on the initial value. For example, consider these scenarios:

const variable = observable<false | undefined>(false);
const anotherVariable = observable(false);

(If you are exploring alternative solutions to resolve typing issues, ensure that the mentioned examples remain applicable.)

Answer 2

Instead of assuming, I recommend explicitly defining the generic type like so:

const variable = observable<boolean>(false);

This helps avoid any confusion that may arise from assuming the type based on the initial value. For example, consider these scenarios:

const variable = observable<false | undefined>(false);
const anotherVariable = observable(false);

(If you are exploring alternative solutions to resolve typing issues, ensure that the mentioned examples remain applicable.)

Answer 3

Answer №2

Based on input from a contributor regarding the Github issue (https://github.com/microsoft/TypeScript/issues/48150), it appears that the Typescript 4.6 compilation error is an intended behavior:

The explanation provided indicates a correct error handling, which may have been overlooked in previous versions. The generic parameter T displays both invariant and contravariant positions.

This observation holds true indeed. In light of the user's assistance in resolving the issue, I will attempt to summarize their insights here for clarity.

An initial proposed fix addresses the problem partially:

function observable<T>(value: T extends infer U ? U: never): Observable<T>
{
  return undefined as any;  // actual implementation isn't crucial
}

const x: Observable<boolean> = observable(false); // no error

However, this approach yields an `unknown` type without proper annotation.

const bad = observable(false);
//     ^ unknown, when it should be Observable<boolean>

A more effective solution suggests introducing another type parameter:

declare function observable<T, U = any>(value?: T extends infer R ? R : U): 
    unknown extends T ? Observable<U> : Observable<T>

Try Playground Link

Since the primary issue pertains to the Knockout.js library, I have reported the concern there (https://github.com/knockout/knockout/issues/2589). Hopefully, someone with sufficient knowledge of Typescript will address the matter accordingly.

Answer 4

Based on input from a contributor regarding the Github issue (https://github.com/microsoft/TypeScript/issues/48150), it appears that the Typescript 4.6 compilation error is an intended behavior:

The explanation provided indicates a correct error handling, which may have been overlooked in previous versions. The generic parameter T displays both invariant and contravariant positions.

This observation holds true indeed. In light of the user's assistance in resolving the issue, I will attempt to summarize their insights here for clarity.

An initial proposed fix addresses the problem partially:

function observable<T>(value: T extends infer U ? U: never): Observable<T>
{
  return undefined as any;  // actual implementation isn't crucial
}

const x: Observable<boolean> = observable(false); // no error

However, this approach yields an `unknown` type without proper annotation.

const bad = observable(false);
//     ^ unknown, when it should be Observable<boolean>

A more effective solution suggests introducing another type parameter:

declare function observable<T, U = any>(value?: T extends infer R ? R : U): 
    unknown extends T ? Observable<U> : Observable<T>

Try Playground Link

Since the primary issue pertains to the Knockout.js library, I have reported the concern there (https://github.com/knockout/knockout/issues/2589). Hopefully, someone with sufficient knowledge of Typescript will address the matter accordingly.

The type 'Observable<false>' cannot be assigned to the type 'Observable<boolean>'

Answer №1

Answer №2

Similar questions

Working with Vue class-based components in TypeScript and setting props

The 'changes' parameter is inherently defined with an 'any' type.ts(7006)

Utilizing useLocation for Defining Text Styles

I seem to be stuck in an endless cycle with React hooks and I can't figure out the root cause

Using Angular i18n to create dynamic forms from an array of objects

What is the method for creating pipes that filter multiple columns?

Unable to Identify Actual Type from Global Declaration within TypeScript Project References

Typescript is unable to comprehend that the initial item in an array of strings is considered to be a string

The server has access to an environment variable that is not available on the client, despite being properly prefixed

Can you set up a mechanism to receive notifications for changes in an array variable in Angular?

The module 'crypto-js' or its corresponding type declarations cannot be located

ParcelJs is having trouble resolving the service_worker path when building the web extension manifest v3

Disable the functionality of the device's back button to prevent it from going back to the

How to implement an Angular Animation that is customizable with an @Input() parameter?

Issue with Datepicker validation in Angular 5 and Angular Material

VS Code is throwing an Error TS7013, while Typescript remains unfazed

The data type 'string | null | undefined' cannot be assigned to the data type 'string | undefined'

When initialized within an object, Angular may identify a field as undefined

Accessing the currently operating WS server instance with NodeJS

Enhancing MUI themes by incorporating module augmentation for multiple typings