Lära 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?

Var allt tydligt?

Tack för dina kommentarer!

Avsnitt 1. Kapitel 6

Fråga AI

Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal

Awesome!

Completion rate improved to 7.14

Svep för att visa menyn


              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?

Var allt tydligt?

Tack för dina kommentarer!

Avsnitt 1. Kapitel 6