Potential Issue: TypeScript appears to have a bug involving the typing of overridden methods called by inherited methods

Question

Potential Issue: TypeScript appears to have a bug involving the typing of overridden methods called by inherited methods

I recently came across a puzzling situation:

class A {
  public method1(x: string | string[]): string | string[] {
    return this.method2(x);
  }
  protected method2(x: string | string[]): string | string[] {
    return x;
  }
}
class B extends A {
  protected method2(x: string[]): string { // no compiler warning
    return x.join(',');
  }
}
const b = new B();
console.log(b.method1(['a', 'b', 'c'])); // ok
console.log(b.method1('d')); // runtime error

Is this an issue with TypeScript's typing system or intentional behavior? If the latter, what adjustments can be made to the typing to catch these errors during compilation?

typescript inheritance methods overriding

Answer 1

Answer №1

In TypeScript, methods have the property of being bivariant, while function properties exhibit contravariance when used with --strictFunctionTypes. It is important to note that they have different syntax:

class MyClass {
  public fn(a: string): string { ... } // this represents a method
  public fn = (a: string): string => { ... } // in contrast, this signifies a function as a property
}

To enforce stricter typing for m2, it is essential to have --strictFunctionTypes enabled (default with strict) and utilize a function property:

protected m2 = (x: string | string[]): string | string[] => {
  return x;
}

Subsequently, m2 will now generate errors appropriately, prompting you to distinguish between string and string[]:

protected m2 = (x: string | string[]): string => { 
  return Array.isArray(x) ? x.join(',') : `${x},`;
}

Check out live code example on Playground

Related: Understanding covariance and contravariance

Related: Explore JS class fields

Answer 2

In TypeScript, methods have the property of being bivariant, while function properties exhibit contravariance when used with --strictFunctionTypes. It is important to note that they have different syntax:

class MyClass {
  public fn(a: string): string { ... } // this represents a method
  public fn = (a: string): string => { ... } // in contrast, this signifies a function as a property
}

To enforce stricter typing for m2, it is essential to have --strictFunctionTypes enabled (default with strict) and utilize a function property:

protected m2 = (x: string | string[]): string | string[] => {
  return x;
}

Subsequently, m2 will now generate errors appropriately, prompting you to distinguish between string and string[]:

protected m2 = (x: string | string[]): string => { 
  return Array.isArray(x) ? x.join(',') : `${x},`;
}

Check out live code example on Playground

Related: Understanding covariance and contravariance

Related: Explore JS class fields

Answer 3

Answer №2

This is the expected behavior in TypeScript. When you override a method, you are narrowing down the specificity of the method rather than widening it as in some other programming languages.

Regarding the explanation...

class A {
  public m1(x: string | string[]): string | string[] {
    /**
     * In this case, variable 'x' can be either a string or a string[], 
     * which aligns perfectly with the arguments for the method m2. This is why there is no compile-time error.
     */
    return this.m2(x);
  }
  protected m2(x: string | string[]): string | string[] {
    return x;
  }
}
class B extends A {
  /**
   * Here, the method m2 is overridden with a method that only accepts a string[], 
   * which falls within the range accepted by the parent's method. Hence, no compile-time error occurs. Even if the argument type were changed to 'string', it would still be accepted.
   */
  protected m2(x: string[]): string { // no compiler warning
    return x.join(',');
  }
}
const b = new B();
console.log(b.m1(['a', 'b', 'c'])); // ok
/**
 * The type specified when calling method m1 matches what was defined, so there should be no issue here as well
 */
console.log(b.m1('d')); // runtime error

In conclusion, this is more of a logical error rather than a bug in the code.

Answer 4

This is the expected behavior in TypeScript. When you override a method, you are narrowing down the specificity of the method rather than widening it as in some other programming languages.

Regarding the explanation...

class A {
  public m1(x: string | string[]): string | string[] {
    /**
     * In this case, variable 'x' can be either a string or a string[], 
     * which aligns perfectly with the arguments for the method m2. This is why there is no compile-time error.
     */
    return this.m2(x);
  }
  protected m2(x: string | string[]): string | string[] {
    return x;
  }
}
class B extends A {
  /**
   * Here, the method m2 is overridden with a method that only accepts a string[], 
   * which falls within the range accepted by the parent's method. Hence, no compile-time error occurs. Even if the argument type were changed to 'string', it would still be accepted.
   */
  protected m2(x: string[]): string { // no compiler warning
    return x.join(',');
  }
}
const b = new B();
console.log(b.m1(['a', 'b', 'c'])); // ok
/**
 * The type specified when calling method m1 matches what was defined, so there should be no issue here as well
 */
console.log(b.m1('d')); // runtime error

In conclusion, this is more of a logical error rather than a bug in the code.

Potential Issue: TypeScript appears to have a bug involving the typing of overridden methods called by inherited methods

Answer №1

Answer №2

Similar questions

Searching for a specific document using AngularFirestore - what's the best method?

How did my attempt to add a length() method to Object end up breaking jQuery?

Tips for utilizing an elective conversion by typing

How can you ensure a code snippet in JavaScript runs only a single time?

Encountering a Typescript issue with the updated Apollo server version within a NestJS application

Information sent from TypeScript frontend to Java backend is converted into a LinkedHashMap

Discovering the generic parameter in the return type using TypeScript

Tips for displaying personalized data with MUI DatePicker

Converting an array of objects into a dictionary using TypeScript

Avoid accessing members in Vue 3 using TypeScript that may be unsafe

What steps should I take to resolve an unhandled promise error in a React TypeScript application while making an axios POST request?

Is there a way for me to navigate from one child view to another by clicking on [routerLink]?

Combining subclasses in TypeScript

"Error: The method setValue is not found in the AbstractControl type" when trying to clear form in Angular 2

Ways to retrieve a value from a span using the Document Object Model

Accessing URL fragments in Next JS with context during the execution of getServerSideProps

Angular2 - Breaking down applications into reusable components

Passing a Typescript object as a parameter in a function call

Creating a completely dynamic button in Angular 6: A step-by-step guide

Send the Children prop to the React Memo component