Best practice in Typescript for "Incompatible types for parameters 'X' and 'X'"

Question

Best practice in Typescript for "Incompatible types for parameters 'X' and 'X'"

Can someone help me with a Typescript question I have?

// Looking for the best way to handle Params and Options in this scenario

interface Params {
  name: string;
  age: number;
}

interface Option {
  callback: (params: Params | Params[]) => void
}

// My code snippet
const optionError: Option = {
  // Need params type as Params only
  callback: (params: Params) => { 
    console.log(params.name)
    console.log(params.age)
  }
}

const optionOK: Option = {
  callback: (params) => {
    const p = params as Params; // Is there an alternative to redefining the same parameter?
    console.log(p.name)
    console.log(p.age)
  }
}

Is there a different approach than defining the same parameter again?

typescript

Answer 1

Answer №1

Although it may not be exactly what you were searching for, this solution should address your problem:

interface Parameters {
  title: string;
  quantity: number;
}

interface Choice {
  action: (params: Parameters | Parameters[]) => void
}

const mistakeOption:Choice = {
  action:(params: Parameters | Parameters[]) => {
    if (!Array.isArray(params)) {
      console.log(params.title)
    }
  }
}

const correctOption:Choice = {
  action:(params: Parameters | Parameters[]) => {
    if (!Array.isArray(params)) {
      console.log(params.title)
    }
  }
}

We're defining the callback parameters correctly and then verifying if the parameters are of type Parameters or an array of Parameters by utilizing Array.isArray(). TypeScript will detect that if it's not an array, it is Parameters.

Additionally, it is recommended to refrain from using params as Parameters whenever possible to avoid overriding TypeScript typings, which could result in runtime errors if you can't guarantee that the provided argument will indeed be of type Parameters.

Answer 2

Although it may not be exactly what you were searching for, this solution should address your problem:

interface Parameters {
  title: string;
  quantity: number;
}

interface Choice {
  action: (params: Parameters | Parameters[]) => void
}

const mistakeOption:Choice = {
  action:(params: Parameters | Parameters[]) => {
    if (!Array.isArray(params)) {
      console.log(params.title)
    }
  }
}

const correctOption:Choice = {
  action:(params: Parameters | Parameters[]) => {
    if (!Array.isArray(params)) {
      console.log(params.title)
    }
  }
}

We're defining the callback parameters correctly and then verifying if the parameters are of type Parameters or an array of Parameters by utilizing Array.isArray(). TypeScript will detect that if it's not an array, it is Parameters.

Additionally, it is recommended to refrain from using params as Parameters whenever possible to avoid overriding TypeScript typings, which could result in runtime errors if you can't guarantee that the provided argument will indeed be of type Parameters.

Answer 3

Answer №2

The reason for this occurrence is due to contravariance.

There exists a risky workaround that can help eliminate TypeScript errors. All you have to do is convert your callback property into a method by removing the arrow function.

As per TS documentation, TS methods are bivariant.


interface Params {
  name: string;
  age: number;
}

interface Option {
  callback(params: Params | Params[]): void // modification is evident here
}

const optionError: Option = {
  callback: (params: Params) => {
    console.log(params.name)
  }
}

const optionOK: Option = {
  callback: (params: Params[]) => {
    params.map(e => e) // valid
  }
}

Nevertheless, this approach is extremely unsafe. For a safer alternative, follow the solutions provided by @jeremynac.

Answer 4

The reason for this occurrence is due to contravariance.

There exists a risky workaround that can help eliminate TypeScript errors. All you have to do is convert your callback property into a method by removing the arrow function.

As per TS documentation, TS methods are bivariant.


interface Params {
  name: string;
  age: number;
}

interface Option {
  callback(params: Params | Params[]): void // modification is evident here
}

const optionError: Option = {
  callback: (params: Params) => {
    console.log(params.name)
  }
}

const optionOK: Option = {
  callback: (params: Params[]) => {
    params.map(e => e) // valid
  }
}

Nevertheless, this approach is extremely unsafe. For a safer alternative, follow the solutions provided by @jeremynac.

Answer 5

Answer №3

Unsure if this can be considered the most optimal method, but if the goal is to indicate that in order to adhere to the Option type, you must create a callback function that accepts either Params or Params[] (or potentially both), it needs to be explicitly defined as follows:

interface Params {
  name: string;
  age: number;
}

interface OptionWithParams {
  callback:  (params: Params) => void
}

interface OptionWithParamsArray {
  callback:  (params: Params[]) => void
}

type Option = OptionWithParamsArray|OptionWithParams;

In that case, the following examples are all valid:


const optionOk1:Option = {
  callback:(params: Params) => {
    console.log(params.name)
  }
}


const optionOk2:Option = {
  callback:(params: Params[]) => {
    console.log(params[0].name)
  }
}
const optionOk3:Option = {
  callback:(params: Params|Params[]) => {
    console.log('It\'s all good');
  }
}

The last scenario should also work if implicit any is allowed, though ideally that shouldn't be necessary.

Playground link

Answer 6

Unsure if this can be considered the most optimal method, but if the goal is to indicate that in order to adhere to the Option type, you must create a callback function that accepts either Params or Params[] (or potentially both), it needs to be explicitly defined as follows:

interface Params {
  name: string;
  age: number;
}

interface OptionWithParams {
  callback:  (params: Params) => void
}

interface OptionWithParamsArray {
  callback:  (params: Params[]) => void
}

type Option = OptionWithParamsArray|OptionWithParams;

In that case, the following examples are all valid:


const optionOk1:Option = {
  callback:(params: Params) => {
    console.log(params.name)
  }
}


const optionOk2:Option = {
  callback:(params: Params[]) => {
    console.log(params[0].name)
  }
}
const optionOk3:Option = {
  callback:(params: Params|Params[]) => {
    console.log('It\'s all good');
  }
}

The last scenario should also work if implicit any is allowed, though ideally that shouldn't be necessary.

Playground link

Best practice in Typescript for "Incompatible types for parameters 'X' and 'X'"

Answer №1

Answer №2

Answer №3

Similar questions

Issue with Google Node SDK Calendar freebusy query failing to display event times for private calendars

What causes me to create components with incorrect paths?

What advantages do interfaces as data types offer in Angular compared to using classes?

Is there a mistake in the TypeScript guide for custom typography in MUI5?

Issues arise due to data inconsistency stemming from the combination of a for loop and .map() function within the BACK4APP

Using Typescript to establish a connection between ngModel and an object's property

Developing an npm library with ReactJs: A step-by-step guide

Tips for implementing self-managed state in Vue.js data object

What is the correct method for importing a Node module into Angular using TypeScript or AngularCLI?

Steps for importing a CommonJS module that exports as a callable into TypeScript

Similar to Java method references, TypeScript also provides a way to reference functions

Error in Template Syntax for External Pug Templates: Component template must have a root element, not just plain text

What is the easiest way to retrieve a basic date with the month represented by a numerical

Tips for retrieving the text from a POST request in C#

What is the syntax for passing a generic type to an anonymous function in a TypeScript TSX file?

What is the most efficient way to minimize the use of if statements in an Angular component when calling a specific function?

Unable to run unit tests on project using my custom React library

The node.js command runs successfully in the terminal, however, it encounters issues when executed

Ionic - Deleting an item from local storage

How to implement and utilize a history-object interface in React with Typescript?