Mismatched data types for function arguments

Question

Mismatched data types for function arguments

const x: Example = {
    toY: (y: Maple) => {
        return y.p;
    }
};
interface Example {
    toY: (y: Pine) => void;
}

interface Pine {
    c: string;
}

interface Maple extends Pine {
    p: boolean;
}

Despite the warning for interface names, there is a discrepancy:

Type '(y: Maple) => Maple' is not compatible with type '(y: Pine) => void'. Parameters 'y' are incompatible.

Even though it functions properly, what is the correct approach to avoid this discrepancy?

Your help is truly appreciated.

javascript typescript

Answer 1

Answer №1

Here is an explanation of a valid error in TypeScript:

const example: Example = {
    doSomething: (data: Data) => { // Error: you cannot accept Data for an Example
        return data.value;
    }
};
interface Example {
    doSomething: (data: ExampleData) => void;
}

interface ExampleData {
    value: string;
}

interface Data extends ExampleData {
    isValid: boolean;
}

// The correct way to prevent this error is to only accept ExampleData
example.doSomething({
    value: 'sample' // Allowed
})

What is the correct approach to avoid this error?

Accept only ExampleData instead of Data.

Answer 2

Here is an explanation of a valid error in TypeScript:

const example: Example = {
    doSomething: (data: Data) => { // Error: you cannot accept Data for an Example
        return data.value;
    }
};
interface Example {
    doSomething: (data: ExampleData) => void;
}

interface ExampleData {
    value: string;
}

interface Data extends ExampleData {
    isValid: boolean;
}

// The correct way to prevent this error is to only accept ExampleData
example.doSomething({
    value: 'sample' // Allowed
})

What is the correct approach to avoid this error?

Accept only ExampleData instead of Data.

Mismatched data types for function arguments

Answer №1

Similar questions

How can I store the status of checked and unchecked checkboxes in an array of objects using Angular 7?

Steps to creating an elliptical border using CSS

The JSP page does not redirect after an Ajax post request has been made

The save functionality is not working due to a JavaScript issue

Is it possible to utilize Angular's dependency injection in place of RequireJS?

Ways to have a React Component trigger a function with each state update

When performing an Angular HTTP post, additional parameters are automatically included in the request

Making AngularJS work with angular-ui bootstrap and ensuring compatibility with IE8

An error message 'module.js:557 throw err' appeared while executing npm command in the terminal

When attempting to import css-animator in Angular2/Typescript, a 404 error is displayed, indicating that the

mandating the selection of checkboxes

Angular correctly displaying specific array items within button elements

Utilizing the power of functional programming with Javascript to perform mapping

Explore interactive hover effects with jQuery and UI for a dynamic user experience!

I'm experiencing some issues with the JavaScript setTimeout function - can anyone help troubleshoot

perform an action if any division element is void of content

Retrieving user input through JavaScript and transmitting information using Ajax

Dealing with encoding problems in Node.JS when parsing JSON data with UTF-

Adding event listeners to elements created dynamically

What is the best way to optimize my ExpressJS + Sequelize files for proper compatibility with Jest testing framework?