TypeScript Basics for Angular

Angular apps are written in TypeScript, which is JavaScript with types added. The browser still runs plain JavaScript, so your TypeScript is converted for you when the app is built. What you gain is that mistakes, such as passing text where a number is expected, are caught in your editor before the app ever runs.

You do not need to master TypeScript to start. This lesson covers the small part that Angular code uses constantly.

What you will learn

• How to describe values with types
• How to model data with interfaces
• How classes group data and behaviour
• What generics look like, so Angular code is not intimidating

Types for values

You add a type after a name with a colon. TypeScript also works out many types by itself, so you do not have to write them everywhere.

// src/app/ts-basics.ts
export const courseName: string = 'Angular';
export const lessonCount = 35; // inferred as number
export const isPublished: boolean = true;

export const tags: string[] = ['angular', 'typescript'];

// A union type allows more than one kind of value.
export type Level = 'beginner' | 'intermediate' | 'advanced';
export const level: Level = 'beginner';

// Optional values use a question mark.
export function greet(name: string, title?: string): string {
  return title ? `Hello, ${title} ${name}` : `Hello, ${name}`;
}

If you wrote level = 'expert', the editor would underline it, because 'expert' is not one of the three allowed values. That early feedback is the main benefit of TypeScript.

Interfaces describe the shape of data

An interface says which properties an object must have. You will use interfaces for the data your app handles, such as employees or tasks.

// src/app/ts-models.ts
export interface Task {
  id: number;
  title: string;
  done: boolean;
  dueDate?: Date; // optional
}

export const sample: Task = { id: 1, title: 'Learn Angular', done: false };

export function completedTitles(tasks: Task[]): string[] {
  return tasks.filter((task) => task.done).map((task) => task.title);
}

The arrow function (task) => task.done is a short way to write a function. filter keeps the tasks that match, and map turns each task into its title.

Classes group data and behaviour

A class describes an object with properties and methods. Every Angular component is a class, so this is the most important idea in the lesson.

// src/app/ts-class.ts
export class Counter {
  value = 0;

  increase(): void {
    this.value += 1;
  }

  describe(): string {
    return `The counter is at ${this.value}`;
  }
}

const counter = new Counter();
counter.increase();
console.log(counter.describe()); // The counter is at 1

Inside a method, this refers to the object the method belongs to. Properties like value hold data, and methods like increase change it.

Generics in one minute

You will often see angle brackets in Angular code, such as signal<number>(0) or http.get<Task[]>(url). The part in the brackets is a type, passed in so the tool knows what it holds or returns. It works like an argument for types.

// src/app/ts-generics.ts
export function firstItem<T>(items: T[]): T | undefined {
  return items[0];
}

const firstNumber = firstItem([10, 20, 30]); // number | undefined
const firstWord = firstItem(['a', 'b']); // string | undefined
console.log(firstNumber, firstWord);

T is a placeholder. TypeScript fills it in from what you pass, so you get the right type back without writing it twice.

Decorators, briefly

Angular uses decorators, which are lines that start with @ and sit above a class. They attach extra information to it, such as "this class is a component". You will see @Component in the next lessons. You never need to write your own decorators.

Try it yourself

1. Create an interface Employee with id, name, role and an optional email.
2. Write a function that takes an array of employees and returns only their names.
3. Add a class Cart with a list of prices, a method to add a price and a method that returns the total.

Quick check

1. What does title?: string mean in an interface?
2. What do the angle brackets in signal<number>(0) represent?
3. Why is a class so important in Angular?

Next, get your machine ready in Install Node.js and the Angular CLI. For deeper detail on any TypeScript feature, see the TypeScript handbook.