JS
TS

JavaScript to TypeScript

10 lessons

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

Arrays and Tuples

Typing collections of values

Introduction

In this lesson, you'll learn about arrays and tuples 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 collections of values.

TS
In TypeScript:

TypeScript has its own approach to typing collections of 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 arrays
let numbers: number[] = [1, 2, 3];
let mixed: (number | string | boolean)[] = [1, "two", true];

// Array methods are type-safe
numbers.push(4);
let doubled: number[] = numbers.map(n => n * 2);

// Tuples for fixed-length, typed arrays
let point: [number, number] = [10, 20];

Comparing to JavaScript

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

JS
JavaScript (What you know)
// JavaScript arrays
let numbers = [1, 2, 3];
let mixed = [1, "two", true];

// Array methods
numbers.push(4);
let doubled = numbers.map(n => n * 2);

// Fixed-length arrays
let point = [10, 20]; // x, y coordinates
Mirror Card
JS
From JavaScript:

You may be used to different syntax or behavior.

TS
In TypeScript:

Array types use Type[] or Array<Type> syntax

Mirror Card
JS
From JavaScript:

You may be used to different syntax or behavior.

TS
In TypeScript:

Union types (|) allow multiple types in arrays

Mirror Card
JS
From JavaScript:

You may be used to different syntax or behavior.

TS
In TypeScript:

Tuples define fixed-length arrays with specific types per position

Step-by-Step Breakdown

1. Array Type Syntax

TypeScript offers two equivalent syntaxes for array types.

JS
JavaScript
let items = [1, 2, 3];
TS
TypeScript
let items: number[] = [1, 2, 3];
// or
let items: Array<number> = [1, 2, 3];
Rule of Thumb
Use Type[] syntax for simple types and Array<Type> for complex generics.

2. Union Type Arrays

When an array can contain multiple types, use a union type.

JS
JavaScript
let data = [1, "hello", true];
TS
TypeScript
let data: (number | string | boolean)[] = [1, "hello", true];
Common Pitfall
Avoid using any[] unless absolutely necessary. Define the specific types the array can contain.

3. Tuples

Tuples are fixed-length arrays where each position has a specific type. They're useful for representing structured data.

JS
JavaScript
let coord = [10, 20]; // JS: just an array
TS
TypeScript
let coord: [number, number] = [10, 20];
let user: [string, number] = ["Alice", 30];
Common Pitfall
Tuples are positional - [string, number] is different from [number, string].

Common Mistakes

When coming from JavaScript, developers often make these mistakes:

  • Array types use Type[] or Array<Type> syntax
  • Union types (|) allow multiple types in arrays
  • Tuples define fixed-length arrays with specific types per position
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

  • Use Type[] for homogeneous arrays
  • Use union types for mixed arrays
  • Use tuples for fixed-length, positionally-typed arrays
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