Passing TypeScript Interface Functions as Parameters

Question

Passing TypeScript Interface Functions as Parameters

The course flags an error in the code: Argument of type {"name":string} is not assignable to a parameter of type 'squareDescriptor'. The property "size" is missing in the type {"name":string;}.

Course link:

I personally tested the code and did not encounter the error.

interface squareDescriptor{
    "name":string,
    "size":number
}

let squareFn : Function = (square : squareDescriptor) => {
    return square.name;
}

let square = {
    "name": "a square"
}

let executeFn = squareFn(square);

Expected result: error

Actual result: no error.

typescript function interface parameter-passing

Answer 1

Answer №1

The Function type in this scenario indicates to the compiler that it contains functions where you can input any arguments and potentially receive a return value. The variable squareFn is classified as a function of type Function, hence it can accept various arguments. Even though the function assigned to it only takes a single squareDescriptor as an argument, this detail is inconsequential. What truly matters is the type assigned to the variable.

To rectify the error message you encounter, you need to redefine the declaration to specify the actual type of the function being assigned. You could opt to leave out the type altogether, allowing the compiler to deduce the correct type on its own, or you can explicitly include the correct type.

let squareFn1 = (square : squareDescriptor) => {
    return square.name;
}
// or
let squareFn2 : (square : squareDescriptor) => string = (square : squareDescriptor) => {
    return square.name;
}

Answer 2

The Function type in this scenario indicates to the compiler that it contains functions where you can input any arguments and potentially receive a return value. The variable squareFn is classified as a function of type Function, hence it can accept various arguments. Even though the function assigned to it only takes a single squareDescriptor as an argument, this detail is inconsequential. What truly matters is the type assigned to the variable.

To rectify the error message you encounter, you need to redefine the declaration to specify the actual type of the function being assigned. You could opt to leave out the type altogether, allowing the compiler to deduce the correct type on its own, or you can explicitly include the correct type.

let squareFn1 = (square : squareDescriptor) => {
    return square.name;
}
// or
let squareFn2 : (square : squareDescriptor) => string = (square : squareDescriptor) => {
    return square.name;
}

Passing TypeScript Interface Functions as Parameters

Answer №1

Similar questions

Why is it that a static variable cannot be accessed using the `this` keyword in a static method when the static method is called in any route's controller in NODEJS?

What could be the reason for the HttpEventType.UploadProgress event only triggering once during an Angular file upload request?

Is it possible for VSCode to automatically generate callback method scaffolding for TypeScript?

Error occurred when trying to import an external module using an invalid hook call

When using Remix v2.8.1, the function useRouteLoaderData can return undefined if an error boundary is present in the root.tsx file

Refresh Angular page data following new routing paths

Encountering issues when trying to import const enums in a webpack project using babel

Is your React conditional rendering malfunctioning due to state issues?

Implementing debounce in Subject within rxjs/Angular2

Steps for utilizing field labels to transmit values in Protractor

Utilize interface as a field type within a mongoose Schema

Creating multiple relationships in TypeORM for entities with private properties

Why isn't the parent (click) event triggered by the child element in Angular 4?

Whenever I try to load the page and access the p-tableHeaderCheckbox in Angular (primeng), the checkbox appears to be disabled and I am unable to

Utilizing the `in` operator for type narrowing is yielding unexpected results

What practical applications exist for preserving JSX post-transpilation of a tsx file?

Changing Angular code to vanilla JavaScript

How to troubleshoot the issue of "Property not found in type 'Vue'"

Implementing a props interface for conditions in styled components within a React application using Typescript

Retrieve the keys of an interface using generic methods