JS
TS

JavaScript to TypeScript

10 lessons

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

Utility Types

Built-in type transformations

Introduction

In this lesson, you'll learn about utility 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 built-in type transformations.

TS
In TypeScript:

TypeScript has its own approach to built-in type transformations, 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 utility types
interface User {
  name: string;
  age: number;
  email: string;
}

// Partial<T> makes all properties optional
function updateUser(user: User, updates: Partial<User>): User {
  return { ...user, ...updates };
}

// Pick<T, K> selects specific properties
type UserPreview = Pick<User, "name" | "email">;

// Omit<T, K> excludes specific properties
type UserWithoutEmail = Omit<User, "email">;

// Readonly<T> makes all properties readonly
type ImmutableUser = Readonly<User>;

Comparing to JavaScript

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

JS
JavaScript (What you know)
// JavaScript - no built-in type utilities
const user = { name: "Alice", age: 30, email: "a@b.com" };

// Partial updates require careful handling
function updateUser(user, updates) {
  return { ...user, ...updates };
}

// No type safety for which properties can be updated
Mirror Card
JS
From JavaScript:

You may be used to different syntax or behavior.

TS
In TypeScript:

Partial<T> makes all properties optional

Mirror Card
JS
From JavaScript:

You may be used to different syntax or behavior.

TS
In TypeScript:

Required<T> makes all properties required

Mirror Card
JS
From JavaScript:

You may be used to different syntax or behavior.

TS
In TypeScript:

Pick<T, K> selects subset of properties

Mirror Card
JS
From JavaScript:

You may be used to different syntax or behavior.

TS
In TypeScript:

Omit<T, K> excludes properties

Mirror Card
JS
From JavaScript:

You may be used to different syntax or behavior.

TS
In TypeScript:

Readonly<T> prevents modification

Step-by-Step Breakdown

1. Partial and Required

Transform required/optional status of all properties.

TS
TypeScript
interface Config {
  host: string;
  port: number;
  debug?: boolean;
}

type PartialConfig = Partial<Config>;
// { host?: string; port?: number; debug?: boolean }

type FullConfig = Required<Config>;
// { host: string; port: number; debug: boolean }

2. Pick and Omit

Create new types by selecting or excluding properties.

TS
TypeScript
interface Article {
  id: number;
  title: string;
  content: string;
  author: string;
  createdAt: Date;
}

type ArticlePreview = Pick<Article, "id" | "title">;
type ArticleInput = Omit<Article, "id" | "createdAt">;

3. Record

Create object types with specific key and value types.

TS
TypeScript
// Map of user IDs to users
type UserMap = Record<string, User>;

// Status codes to messages
type StatusMessages = Record<200 | 404 | 500, string>;
const messages: StatusMessages = {
  200: "OK",
  404: "Not Found",
  500: "Server Error"
};
Rule of Thumb
Use Record<string, T> instead of { [key: string]: T } for cleaner syntax.

Common Mistakes

When coming from JavaScript, developers often make these mistakes:

  • Partial<T> makes all properties optional
  • Required<T> makes all properties required
  • Pick<T, K> selects subset of properties
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

  • Utility types transform existing types
  • Partial, Required change optionality
  • Pick, Omit create subsets
  • Record creates mapped types
Rule of Thumb
The best way to learn is by doing. Try rewriting some of your JavaScript code in TypeScript to practice these concepts.
PreviousFinish