iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Pass a function by giving the parameter a function type: (argument: ArgumentType) => ReturnType. For example, (name: string) => void accepts a string and returns no value the caller needs. Use a named type alias when you reuse a callback shape, and a generic signature when types must stay connected across inputs and outputs.
Write a function type for the parameter
A function type expression uses the same arrow notation as an arrow function, but describes its parameters and return value rather than implementing a function:
function greetWith(greet: (name: string) => void) {
greet("Ada");
}
greetWith((name) => {
console.log(`Hello, ${name}`);
});Here, greet is a function parameter. Its type says that the callback accepts a string and returns void. In this position, void means the caller does not use a return value from the callback. TypeScript can infer the inline callback’s name parameter from the declared type, so repeating name: string is unnecessary. See the TypeScript Handbook’s function type expression guidance.
The parameter name inside a function type is required syntax. It is a label for the type declaration, not a required name for the argument at every call site.
#1 Best Overall
Use a named type alias when the callback shape repeats
If multiple functions accept the same kind of callback, define the type once and reuse it:
type Predicate = (value: string) => boolean;
function filterNames(names: string[], test: Predicate): string[] {
return names.filter(test);
}Predicate describes a function that takes a string and returns a boolean. The alias makes the parameter declaration easier to scan and avoids duplicating the signature. For a callback used only once, an inline type is often clearer.
Rank #2
- TypeScript implements a superset of syntax for strictly typed development, facilitating deep static analysis and enhanced development environment integration. The compiler translates source into standard script formats, ensuring parity across any runtime.
- TypeScript is ideal for front-end developers, full-stack engineers, and software architects who build large-scale web applications. It serves those looking to improve code excellence, reduce bugs through static checking, and maintain complex projects more.
- Lightweight, Classic fit, Double-needle sleeve and bottom hem
Choose the signature based on how the callback is called
Make callback arguments optional only when the caller may omit them
An optional parameter in a callback type says that the function receiving the callback may invoke it without that argument. If the receiver always supplies an argument, keep it required in the callback type—even though a particular callback can choose to ignore it.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Scan for outdated or missing drivers - takes under a minute3Clear out junk files and repair common Windows errorsfunction visitNames(names: string[], visit: (name: string) => void) {
names.forEach((name) => visit(name));
}TypeScript’s Handbook states: “When writing a function type for a callback, never write an optional parameter unless you intend to call the function without passing that argument”. Its More on Functions chapter explains this callback rule.
A callback can ignore arguments it does not need
A function that uses fewer parameters can still be passed where the caller provides more. For instance, an array iteration callback may use only the value and ignore the index and array arguments. This is why you do not need to declare unused callback parameters just to match the caller’s full argument list. The rule is documented in TypeScript’s type compatibility guidance.
Account for this when a library controls invocation
Some APIs call a callback without an object receiver. If the callback must not depend on a this value, annotate that requirement explicitly with a this: void parameter:
type Callback = (this: void, value: string) => void;The special this parameter is a type annotation and is not passed as a regular argument. Follow the API’s invocation contract: a callback that expects an object-bound this may not work when the library calls it without one. See the Handbook’s function and callback this guidance.
Use generics when types need to stay related
A function parameter does not need a generic type merely because it is a function. Use generics when information about a type must flow from one position to another, such as an input value becoming the callback’s input and its result becoming the overall result:
Best Value
function mapOne<Input, Output>(
value: Input,
transform: (item: Input) => Output
): Output {
return transform(value);
}
const length = mapOne("Ada", (name) => name.length);In this example, the callback receives the same Input type as value, and the function returns the callback’s Output type. TypeScript generally infers these type arguments from the supplied values. Explicit type arguments are available if inference does not capture the intended relationship. The Handbook’s Generics chapter and generic function guidance cover inference and generic signatures.
Prefer the simplest signature that expresses the relationship. Adding generic parameters or constraints that do not contribute useful type information can make inference less effective.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Reuse a function’s parameter types when appropriate
TypeScript’s Parameters<Type> utility extracts a function’s parameter list as a tuple. It can help when another type or function needs to reuse that list:
type Handler = (event: string, retry: boolean) => void;
type HandlerArguments = Parameters<Handler>;HandlerArguments is the tuple [event: string, retry: boolean]. For an overloaded function, the utility’s result corresponds to its final signature. Refer to the Utility Types reference.
Avoid any as a shortcut
Using any for a callback discards checks on its inputs and output, obscuring the contract between the function and its caller. Give the callback its actual argument and return types instead; reserve any for cases such as JavaScript migration where its use is deliberate. TypeScript’s declaration-file Do’s and Don’ts also advises against unnecessary generic parameters that do not contribute to the type.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
