Why TypeScript is required in Angular - See It in Action

Why TypeScript is required in Angular

📖 Scenario: You are building a simple Angular app to display a list of users. You want to understand why Angular uses TypeScript instead of plain JavaScript.

🎯 Goal: Learn how to set up a basic Angular component using TypeScript and see how TypeScript helps with type safety and better code structure.

📋 What You'll Learn

Create a user list array with exact user names

Add a TypeScript type for the user data

Use Angular standalone component with TypeScript

Display the user list in the template

💡 Why This Matters

🌍 Real World

Most Angular apps use TypeScript to build reliable and maintainable web applications with clear code structure.

💼 Career

Understanding why Angular uses TypeScript is essential for frontend developers working with Angular frameworks in professional environments.

1

Create a user list array

Create a constant array called users with these exact string values: 'Alice', 'Bob', 'Charlie'.

Angular

# Create a constant array called users with 'Alice', 'Bob', 'Charlie'
# Your code here

Need a hint?

Use const users = ['Alice', 'Bob', 'Charlie']; to create the array.

2

Add a TypeScript type for users

Create a TypeScript type alias called User as string. Then create a constant array called users with type User[] and the same values: 'Alice', 'Bob', 'Charlie'.

Angular

type User = string;
const users: User[] = ['Alice', 'Bob', 'Charlie'];
# Your code here

Need a hint?

Use type User = string; and const users: User[] = [...].

3

Create an Angular standalone component

Create a standalone Angular component called UserListComponent using @Component decorator. Use selector: 'app-user-list', and add a template that uses *ngFor="let user of users" to display each user inside a <li>. Import CommonModule and declare users as a public property with type User[] initialized to the users array.

Angular

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-user-list',
  standalone: true,
  imports: [CommonModule],
  template: `
    
      {{ user }}
    
  `
})
export class UserListComponent {
  users: User[] = users;
}
# Your code here

Need a hint?

Use @Component with standalone: true and import CommonModule. Use *ngFor in template.

4

Complete the component setup

Export the UserListComponent class and ensure it uses the users array typed as User[]. Confirm the template displays the list of users with <li> elements inside a <ul>.

Angular

export class UserListComponent {
  users: User[] = users;
}
# Your code here

Need a hint?

Make sure the class is exported and the template uses *ngFor to show users.