JS
TS

JavaScript to TypeScript

10 lessons

Progress0%
1Introduction to TypeScript2Basic Types3Arrays and Tuples4Function Types5Object Types6Interfaces7Union Types8Generics9Type Guards10Utility Types
All Mirror Courses
JS
TS
Function Types
MirrorLesson 4 of 10
Lesson 4

Function Types

Typing function parameters and return values

Introduction

In this lesson, you'll learn about function types in TypeScript. Coming from JavaScript, you already have a foundation for understanding this concept. We'll build on that knowledge while highlighting the key differences.

Mirror Card
JS
From JavaScript:

In JavaScript, you're familiar with typing function parameters and return values.

TS
In TypeScript:

TypeScript has its own approach to typing function parameters and return values, which we'll explore step by step.

The TypeScript Way

Let's see how TypeScript handles this concept. Here's a typical example:

TS
TypeScript Example
// TypeScript functions
function add(a: number, b: number): number {
  return a + b;
}

const multiply = (a: number, b: number): number => a * b;

function greet(name: string, greeting: string = "Hello"): string {
  return greeting + ", " + name;
}

function processItems(
  items: string[],
  callback: (item: string, index: number) => void
): void {
  items.forEach(callback);
}

Comparing to JavaScript

Here's how you might have written similar code in JavaScript:

JS
JavaScript (What you know)
// JavaScript functions
function add(a, b) {
  return a + b;
}

const multiply = (a, b) => a * b;

function greet(name, greeting = "Hello") {
  return greeting + ", " + name;
}

function processItems(items, callback) {
  items.forEach(callback);
}
Mirror Card
JS
From JavaScript:

You may be used to different syntax or behavior.

TS
In TypeScript:

Parameters require type annotations

Mirror Card
JS
From JavaScript:

You may be used to different syntax or behavior.

TS
In TypeScript:

Return type comes after the parameter list

Mirror Card
JS
From JavaScript:

You may be used to different syntax or behavior.

TS
In TypeScript:

Callback function types include parameter and return types

Mirror Card
JS
From JavaScript:

You may be used to different syntax or behavior.

TS
In TypeScript:

void indicates no return value

Step-by-Step Breakdown

1. Parameter Types

Every function parameter should have a type annotation.

JS
JavaScript
function greet(name) { ... }
TS
TypeScript
function greet(name: string) { ... }

2. Return Types

Add return type after the parameters. TypeScript can often infer this, but explicit types are clearer.

JS
JavaScript
function add(a, b) {
  return a + b;
}
TS
TypeScript
function add(a: number, b: number): number {
  return a + b;
}
Rule of Thumb
Always add explicit return types to exported/public functions for better documentation.

3. Optional Parameters

Use ? to mark optional parameters. They must come after required parameters.

JS
JavaScript
function greet(name, title) {
  return title ? title + " " + name : name;
}
TS
TypeScript
function greet(name: string, title?: string): string {
  return title ? title + " " + name : name;
}

4. Function Type Expressions

You can define the complete type of a function, useful for callbacks.

JS
JavaScript
const handler = (event) => { ... };
TS
TypeScript
const handler: (event: Event) => void = (event) => { ... };
// Or as a type alias:
type EventHandler = (event: Event) => void;
const handler: EventHandler = (event) => { ... };
Common Pitfall
Don't confuse => in function types (type annotation) with => in arrow functions (implementation).

Common Mistakes

When coming from JavaScript, developers often make these mistakes:

  • Parameters require type annotations
  • Return type comes after the parameter list
  • Callback function types include parameter and return types
Common Pitfall
Don't assume TypeScript works exactly like JavaScript. While the concepts may be similar, the syntax and behavior can differ significantly.

Key Takeaways

  • Always type function parameters
  • Return types can be inferred but explicit is clearer
  • Use ? for optional parameters, = for defaults
  • Function types define the shape of callable values
Rule of Thumb
The best way to learn is by doing. Try rewriting some of your JavaScript code in TypeScript to practice these concepts.
PreviousNext