The TypeScript compiler turns TypeScript files into JavaScript that a browser can execute. Type annotations guide compile-time checks but are not retained in the generated JavaScript. In an Angular development build, this is one part of a larger process: the Angular compiler transforms templates, and webpack bundles the resulting code for the browser. section 2.3.1 section 9.3.2
Listing 2.8. The contents of the todoList.ts file in the src/app folder
import { TodoItem } from "./todoItem";
export class TodoList {
constructor(public user: string, private todoItems: TodoItem[] = []) {
// no statements required
}
get items(): readonly TodoItem[] {
return this.todoItems;
}
addItem(task: string) {
this.todoItems.push(new TodoItem(task));
}
}
The to-do list uses a typed constructor parameter, a typed array, and a readonly view of its items. The compiler reports attempts to modify that readonly array; the class can still add items through its own method. section 2.3.1
Type checking catches incompatible uses before the generated code reaches the browser. For example, a constructor parameter declared as `string` is not intended to receive an incompatible type. A `readonly TodoItem[]` return type also prevents callers from modifying the returned array through that typed view. These are compiler checks, not restrictions enforced by TypeScript types in the browser. section 2.3.1
Follow a development rebuild
Edit `src/main.ts` to add a `console.log` statement and save it. Angular’s development tools detect the change, rebuild the project, and reload the browser; the new message appears in its JavaScript console. With `ng serve`, the build starts from `main.ts`, follows imports, compiles dependencies, and produces bundles such as `main.js`. section 3.4.1 section 9.3.2
