050 — #16 Function Type for Callback | TypeScript Basics & Data Types | A Complete TypeScript Course

Video: 050 · #16 Function Type for Callback | TypeScript Basics & Data Types | A Complete TypeScript Course · watch · ~07:41 · procademy

Source: this is a written companion to the video. Part of the Favorite TypeScript Videos curated path.

The lecture extends function types from the previous lesson to callbacks: a function parameter that is itself meant to receive a function. It opens with a recap — an addNumbers variable typed to accept (n1: number, n2: number) => number takes the sum function but rejects the add function, whose return type is void — then builds the callback case from scratch. A getResult(num1, num2, print) function computes a sum and hands the message plus result to print, which starts life untyped (so implicitly any, accepting anything). The fix is annotating print as (str: string, n: number) => void, after which the existing display(message, result) function slots in cleanly. The demo compiles with tsc app.ts and logs “sum equals 25” for inputs 12 and 13; passing a number, a string, or a signature-mismatched function for print all error.

Recap — a function-typed variable enforces the full signature

The sum function can be assigned to addNumbers because it takes two number parameters and returns a number.

let addNumbers: (n1: number, n2: number) => number;
addNumbers = sum; // ok: (number, number) => number
addNumbers = add; // error: add returns void, not number

Hovering the error reads “this type is not assignable to this type” — the return-type half of the signature matters as much as the parameters.

The untyped callback parameter defaults to any

getResult takes two numbers plus a third parameter, print, with no annotation:

function getResult(num1: number, num2: number, print: any) {
	const result = num1 + num2;
	print("sum equals ", result);
}

The print parameter carries no annotation, so by default its type is any — a string, a number, a function, an object, an array, anything can be passed. Inside, print is invoked as a function with the message and the computed result

Typing the callback — (str: string, n: number) => void

Only a function may be assigned to print, and that function must take a string parameter plus a second number parameter, with a void return.

function getResult(num1: number, num2: number, print: (str: string, n: number) => void) {
	const result = num1 + num2;
	print("sum equals ", result);
}

function display(message: string, result: number): void {
	console.log(message + result);
}

getResult(12, 13, display); // sum equals 25

The display signature — string, then number, returns void — matches the declared callback type exactly, so the display function slots into print. Compiling app.ts prints “sum equals 25”: the “sum equals " message plus 12 + 13.

Negative cases — the annotation rejects everything else

Passing a function whose signature does not match print errors too. Passing 100, passing a string, or passing a wrong-shaped function for print all error — that is how a function parameter meant to be used as a callback gets its type.

Transcript corrections applied above: void (not wide (return type)); addNumbers (not add numbers, add number); getResult (not get result); of type string (not Of types jing); this print (not this sprint); tsc app.ts (not tsc.ts); message variable (not MSG).

Prev: 049 — #15 Function as Type | TypeScript Basics & Data Types | A Complete TypeScript Course · Next: 051 — #17 Unknown Type in TypeScript | TypeScript Basics & Data Types | A Complete