Ways to specify the data type of a function's input parameter

Question

Ways to specify the data type of a function's input parameter

I'm new to TypeScript and have a function that accepts another function as a parameter, which in turn takes a number as input.

loadResources(updateProgress: Function)
{
  let progress = 100;
  updateProgress(progress);
}

When calling this function:

loadResources((progressPercentage: number) => {
  console.log(progressPercentage);
});

As you can see, the parameter is a function that takes a number as its input. How can we provide more specific information about this type of function instead of just "updateProgress: Function"?

typescript input types parameters parameter-passing

Answer 1

Answer №1

Absolutely, you can indeed. Personally, I prefer to do it this way:

const NumberLogger = (n: number) => void;

function loadResources(logPercentage: NumberLogger)
{
  let percentage = 100;
  logPercentage(percentage);

}

If you ever find yourself needing to pass this as part of an object, you can follow the same approach.

const NumberLogger = (n: number) => void;

type NumberLoggerProps = {
    logger: NumberLogger;
}

// or

type NumberLoggerProps = {
    logger: (n: number) => void;
}

// or

type NumberLoggerProps = {
    logger(n: number): void;
}

For more information, check out the Typescript documentation.

Answer 2

Absolutely, you can indeed. Personally, I prefer to do it this way:

const NumberLogger = (n: number) => void;

function loadResources(logPercentage: NumberLogger)
{
  let percentage = 100;
  logPercentage(percentage);

}

If you ever find yourself needing to pass this as part of an object, you can follow the same approach.

const NumberLogger = (n: number) => void;

type NumberLoggerProps = {
    logger: NumberLogger;
}

// or

type NumberLoggerProps = {
    logger: (n: number) => void;
}

// or

type NumberLoggerProps = {
    logger(n: number): void;
}

For more information, check out the Typescript documentation.

Ways to specify the data type of a function's input parameter

Answer №1

Similar questions

Is there a way to use jQuery to enable multiple checkboxes without assigning individual IDs to each one?

Angular2 Navigation: Redirecting to a dynamically constructed route

Switching the phone formatting from JavaScript to TypeScript

Troubleshooting TypeScript errors related to ReactNode post-upgrade to Create React App v5

Retrieving the data from a Material UI Slider control

Sorting complex strings in Typescript based on the dates contained within them

Angular 13 does not currently have support for the experimental syntax 'importMeta' activated

Does Angular 2/4 actually distinguish between cases?

Tips for including type definitions when adding elements to an array in TypeScript

The type '(props: Props) => Element' cannot be assigned to the type 'FunctionComponent<FieldRenderProps<any, HTMLElement>>' in React-final-form

Limitations require a member to only accept a type (and not an instance) that extends or implements another type [TypeScript]

Encountering overload error with Vue 3 and Axios integration

Acquire XML documentation for overloaded functions in Typescript

Retrieve data from an HTML form within an Angular 2 ag-grid component

Tips for formatting numbers within a chart

What is the best method for replacing the current page in an Ionic app?

Top Recommendations: Comparing Standalone Components and Modules in Angular Version 14

The issue with the tutorial is regarding the addHero function and determining the source of the new id

Creating a personalized connect function in Typescript for react-redux applications

Struggling to display data from Firebase Database in dropdown menu using Angular