JS
TS

JavaScript to TypeScript

10 lessons

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

Object Types

Typing object structures

Introduction

In this lesson, you'll learn about object 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 object structures.

TS
In TypeScript:

TypeScript has its own approach to typing object structures, 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 objects with inline type
const user: {
  name: string;
  age: number;
  email: string;
} = {
  name: "Alice",
  age: 30,
  email: "alice@example.com"
};

function printUser(user: { name: string; age: number }): void {
  console.log(user.name, user.age);
}

// TypeScript prevents unknown properties
// user.newProperty = "anything"; // Error!

Comparing to JavaScript

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

JS
JavaScript (What you know)
// JavaScript objects
const user = {
  name: "Alice",
  age: 30,
  email: "alice@example.com"
};

function printUser(user) {
  console.log(user.name, user.age);
}

// Objects can have any shape
user.newProperty = "anything";
Mirror Card
JS
From JavaScript:

You may be used to different syntax or behavior.

TS
In TypeScript:

Object types define property names and types

Mirror Card
JS
From JavaScript:

You may be used to different syntax or behavior.

TS
In TypeScript:

Properties are separated by semicolons or commas

Mirror Card
JS
From JavaScript:

You may be used to different syntax or behavior.

TS
In TypeScript:

Unknown properties cause compile errors

Step-by-Step Breakdown

1. Inline Object Types

You can define object types inline, but this can get verbose.

JS
JavaScript
function greet(person) {
  return "Hello " + person.name;
}
TS
TypeScript
function greet(person: { name: string }): string {
  return "Hello " + person.name;
}

2. Optional Properties

Use ? to mark properties that may not exist.

TS
TypeScript
type User = {
  name: string;
  age: number;
  email?: string; // optional
};
Rule of Thumb
Use optional properties for data that may be missing, not for data that might be null.

3. Readonly Properties

Use readonly to prevent property reassignment.

TS
TypeScript
type Config = {
  readonly apiKey: string;
  readonly baseUrl: string;
};

const config: Config = { apiKey: "xxx", baseUrl: "..." };
// config.apiKey = "new"; // Error!
Common Pitfall
readonly only prevents reassignment, not deep mutation. Objects inside can still be modified.

Common Mistakes

When coming from JavaScript, developers often make these mistakes:

  • Object types define property names and types
  • Properties are separated by semicolons or commas
  • Unknown properties cause compile errors
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

  • Object types list properties with their types
  • Use ? for optional properties
  • Use readonly to prevent reassignment
  • Type aliases make object types reusable
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