Mastering TypeScript/

...

/

Function Signatures and Function Overrides in TypeScript

Function Signatures and Function Overrides in TypeScript

Learn TypeScript's strong typing rules for callback functions, multiple function signatures in a single function, and the role of function literals in parameter definitions.

We'll cover the following...

Function signatures

TypeScript uses its strong typing rules to ensure that if we define a function that needs a callback function, we can ensure that this function is provided correctly. In order to specify that a function parameter must be a function signature, TypeScript introduces the fat arrow syntax, or () =>, to indicate a function signature.

Let’s see an example using this syntax as follows:

TypeScript 4.9.5
// Declare a function "myCallback" that takes a string argument "text" and returns nothing
function myCallback(text: string): void {
  // Log the message "myCallback called with" followed by the input "text" using template literals
  console.log(`myCallback called with ${text}`);
}
// Declare a function "withCallbackArg" that takes two arguments:
// - "message" of type string
// - "callbackFn" of type function that takes a string argument and returns nothing
function withCallbackArg(
 message: string,
 callbackFn: (text: string) => void
) {
  // Log the message "withCallback called, message :" followed by the input "message" using template literals
  console.log(`withCallback called, message : ${message}`);
  // Call the callback function "callbackFn" with the message "message + " from withCallback" as an argument
  callbackFn(`${message} from withCallback`);
}
Declaring a function with a callback argument

We define a strongly typed function named myCallback that has a single parameter named text, which is of type string, and returns void.

We then define a strongly typed function named withCallbackArg that also has two parameters. The first parameter is named message and is of type string, and the second parameter, named callbackFn on line 12, is using the fat arrow syntax, as follows:

callbackFn: (text: string) => void

This syntax defines the callbackFn parameter as being a function that accepts a single parameter of type string, and returns void.

We can then use this withCallbackArg function as follows:

TypeScript 4.9.5
// Declare a function "myCallback" that takes a string argument "text" and returns nothing
function myCallback(text: string): void {
  // Log the message "myCallback called with" followed by the input "text" using template literals
  console.log(`myCallback called with ${text}`);
}
// Declare a function "withCallbackArg" that takes two arguments:
// - "message" of type string
// - "callbackFn" of type function that takes a string argument and returns nothing
function withCallbackArg(
 message: string,
 callbackFn: (text: string) => void
) {
  // Log the message "withCallback called, message :" followed by the input "message" using template literals
  console.log(`withCallback called, message : ${message}`);
  // Call the callback function "callbackFn" with the message "message + " from withCallback" as an argument
  callbackFn(`${message} from withCallback`);
}
withCallbackArg("initial text", myCallback);
withCallbackArg("text", "this is not a function");
Callback with a string argument handling error

We invoke the withCallbackArg function twice: ...