Aprende Object Typing and Type Aliases | Transitioning from JavaScript to TypeScript

When you begin using TypeScript, one of the first differences you'll notice from JavaScript is how you can specify the shape of objects directly in your code. Typing object literals allows you to define exactly what properties an object must have, along with their types. This not only helps catch errors early but also improves code readability and maintainability. As your codebase grows, you'll often find yourself working with objects that share the same structure in multiple places. To avoid repeating yourself, TypeScript provides a feature called type aliases, which lets you give a custom name to a specific object shape or any type definition. This makes your code more reusable and easier to manage, especially when dealing with complex objects.


              12345678910111213
            
// JavaScript: Defining an object literal
const product = {
  id: 101,
  name: "Laptop",
  price: 999.99
};

// TypeScript: Adding an inline type annotation to the object literal
const product: { id: number; name: string; price: number } = {
  id: 101,
  name: "Laptop",
  price: 999.99
};


              123456789101112131415
            
// TypeScript: Creating a type alias for a user profile object
type UserProfile = {
  id: number;
  username: string;
  email: string;
  isActive: boolean;
};

// Using the type alias to type-check an API response
const fetchedUser: UserProfile = {
  id: 42,
  username: "alexdev",
  email: "alex@example.com",
  isActive: true
};


              12345678910111213141516171819202122
            
// TypeScript: Using a type alias in function parameters
type UserProfile = {
  id: number;
  username: string;
  email: string;
  isActive: boolean;
};

function sendWelcomeEmail(user: UserProfile) {
  if (user.isActive) {
    console.log(`Welcome, ${user.username}! Email sent to ${user.email}.`);
  }
}

const newUser: UserProfile = {
  id: 100,
  username: "jamie",
  email: "jamie@example.com",
  isActive: true
};

sendWelcomeEmail(newUser);

1. What is a type alias in TypeScript?

2. Why are type aliases useful when working with objects in TypeScript?

¿Todo estuvo claro?

¡Gracias por tus comentarios!

Sección 1. Capítulo 6

Pregunte a AI

Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla

Awesome!

Completion rate improved to 7.14

Desliza para mostrar el menú


              12345678910111213
            
// JavaScript: Defining an object literal
const product = {
  id: 101,
  name: "Laptop",
  price: 999.99
};

// TypeScript: Adding an inline type annotation to the object literal
const product: { id: number; name: string; price: number } = {
  id: 101,
  name: "Laptop",
  price: 999.99
};


              123456789101112131415
            
// TypeScript: Creating a type alias for a user profile object
type UserProfile = {
  id: number;
  username: string;
  email: string;
  isActive: boolean;
};

// Using the type alias to type-check an API response
const fetchedUser: UserProfile = {
  id: 42,
  username: "alexdev",
  email: "alex@example.com",
  isActive: true
};


              12345678910111213141516171819202122
            
// TypeScript: Using a type alias in function parameters
type UserProfile = {
  id: number;
  username: string;
  email: string;
  isActive: boolean;
};

function sendWelcomeEmail(user: UserProfile) {
  if (user.isActive) {
    console.log(`Welcome, ${user.username}! Email sent to ${user.email}.`);
  }
}

const newUser: UserProfile = {
  id: 100,
  username: "jamie",
  email: "jamie@example.com",
  isActive: true
};

sendWelcomeEmail(newUser);

1. What is a type alias in TypeScript?

2. Why are type aliases useful when working with objects in TypeScript?

¿Todo estuvo claro?

¡Gracias por tus comentarios!

Sección 1. Capítulo 6