What is causing the failure of this polymorphic assignment within a typed observableArray in Knockout?

Question

What is causing the failure of this polymorphic assignment within a typed observableArray in Knockout?

Consider a scenario where we have a class A and its subclass B. The goal is to assign an array of instances of class B to an array of instances of class A. While this works with normal arrays, the same operation fails when using ko.ObservableArray.

import ko from "knockout";

class A {};
class B extends A {b = 1};

const a: A = new B();                // This operation is fine
const aArr: A[] = [] as B[];         // This operation is fine
// PROBLEM OCCURS ON THE LAST LINE!
const aObs: ko.ObservableArray<A> = ko.observableArray() as ko.ObservableArray<B>;

The issue arises in the last line where the compiler flags an error:

Type 'ObservableArray<B>' is not assignable to type 'ObservableArray<A>'.
  Types of parameters 'value' and 'value' are incompatible.
    Type 'A[] | null | undefined' is not assignable to type 'B[] | null | undefined'.
      Type 'A[]' is not assignable to type 'B[]'.
        Type 'A' is not assignable to type 'B'.

It is important to note that the intent here is to assign instances of class B to class A, not the other way around.

How can this issue be addressed?

typescript knockout.js

Answer 1

Answer №1

There is an issue with ObservableArray<T> as it is contravariant on the type variable T. This causes assignments to occur in reverse direction.

While you can easily assign B to A (since B extends A and no explicit declaration is needed) when placed in a covariant position:

class A { }
class B { b = 1 }

const a: A = new B();
const aArr: A[] = [] as B[];

Link to playground for demonstration

You cannot directly assign a function with arguments of these types in the same direction, only in the opposite one.

type Fn<T> = (t: T) => void

const fn1: Fn<A> = null as unknown as Fn<B> // error occurs here
const fn2: Fn<B> = null as unknown as Fn<A> // no error

Link to playground for demonstration

If you are confident that the assignment is correct and the compiler is unnecessarily restricting you, you can manually typecast it to the expected type:

import ko, { ObservableArray } from 'knockout'

class A {};
class B extends A {b = 1};

const bObs: ObservableArray<B> = ko.observableArray()
const aObs: ObservableArray<A> = bObs as unknown as ObservableArray<A>;

Link to playground for demonstration

You also have the option to globally disable contravariance checking for function arguments using --strictFunctionTypes. However, this check is usually beneficial most of the time.

Answer 2

There is an issue with ObservableArray<T> as it is contravariant on the type variable T. This causes assignments to occur in reverse direction.

While you can easily assign B to A (since B extends A and no explicit declaration is needed) when placed in a covariant position:

class A { }
class B { b = 1 }

const a: A = new B();
const aArr: A[] = [] as B[];

Link to playground for demonstration

You cannot directly assign a function with arguments of these types in the same direction, only in the opposite one.

type Fn<T> = (t: T) => void

const fn1: Fn<A> = null as unknown as Fn<B> // error occurs here
const fn2: Fn<B> = null as unknown as Fn<A> // no error

Link to playground for demonstration

If you are confident that the assignment is correct and the compiler is unnecessarily restricting you, you can manually typecast it to the expected type:

import ko, { ObservableArray } from 'knockout'

class A {};
class B extends A {b = 1};

const bObs: ObservableArray<B> = ko.observableArray()
const aObs: ObservableArray<A> = bObs as unknown as ObservableArray<A>;

Link to playground for demonstration

You also have the option to globally disable contravariance checking for function arguments using --strictFunctionTypes. However, this check is usually beneficial most of the time.

What is causing the failure of this polymorphic assignment within a typed observableArray in Knockout?

Answer №1

Similar questions

Creating a canvas that adjusts proportionally to different screen sizes

There were no visible outputs displayed within the table's tbody section

Generics in Typescript interfaces

Finding the index of a chosen option in Angular

` Detecting initialized properties of classes using Eslint rule`

Upon hovering, icons for each project name are displayed when `mouseenter` event is triggered

What is the best way to refer to a specific argument by implication within a function type?

Angular Material Table displaying real-time information

Opening and closing a default Bootstrap modal in Angular 2

What are some key indicators in the source code that differentiate TypeScript from JavaScript?

Is it possible to associate a generic TypeScript type with another type by utilizing its generic parameters?

Creating an Object Type from a String Union Type in TypeScript

What purpose does the # symbol serve in Angular when interpolating values?

Versatile Typescript options

What steps should I take to troubleshoot this Angular issue within a Visual Studio 2022 project that utilizes the Standalone Angular template?

Checking for Object Equality in TypeScript

What about combining a fat arrow function with a nested decorator?

Issues with select options not functioning correctly in knockout framework

Discover the power of TypeScript's dynamic type inference in functions

Implement dynamic validation in Angular 4 based on specific conditions