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:
// Declare a function "myCallback" that takes a string argument "text" and returns nothingfunction myCallback(text: string): void {// Log the message "myCallback called with" followed by the input "text" using template literalsconsole.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 nothingfunction withCallbackArg(message: string,callbackFn: (text: string) => void) {// Log the message "withCallback called, message :" followed by the input "message" using template literalsconsole.log(`withCallback called, message : ${message}`);// Call the callback function "callbackFn" with the message "message + " from withCallback" as an argumentcallbackFn(`${message} from withCallback`);}
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:
// Declare a function "myCallback" that takes a string argument "text" and returns nothingfunction myCallback(text: string): void {// Log the message "myCallback called with" followed by the input "text" using template literalsconsole.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 nothingfunction withCallbackArg(message: string,callbackFn: (text: string) => void) {// Log the message "withCallback called, message :" followed by the input "message" using template literalsconsole.log(`withCallback called, message : ${message}`);// Call the callback function "callbackFn" with the message "message + " from withCallback" as an argumentcallbackFn(`${message} from withCallback`);}withCallbackArg("initial text", myCallback);withCallbackArg("text", "this is not a function");
We invoke the withCallbackArg
function twice: once ...