TypeScript 基础
1. 什么是 TypeScript？
TypeScript 是一种由微软开发的开源编程语言，它是 JavaScript 的超集，意味着所有的 JavaScript 代码都是有效的 TypeScript 代码。TypeScript 添加了可选的静态类型和基于类的面向对象编程特性，使得开发者可以在编译时发现错误，从而提高代码的可靠性和可维护性。
1.1 TypeScript 的主要特性
- 静态类型：TypeScript 允许开发者为变量、函数参数和返回值指定类型，从而在编译时捕获类型错误。
- 面向对象编程：TypeScript 支持类、接口、继承等面向对象编程的特性。
- ES6+ 特性：TypeScript 支持最新的 ECMAScript 标准，包括箭头函数、解构赋值、模块化等。
- 工具支持：TypeScript 提供了强大的开发工具支持，如智能提示、代码重构等。
2. 安装 TypeScript
在开始编写 TypeScript 代码之前，你需要先安装 TypeScript 编译器。你可以通过 npm（Node.js 的包管理器）来安装 TypeScript。
2.1 安装 Node.js 和 npm
首先，确保你已经安装了 Node.js 和 npm。你可以通过以下命令检查是否已经安装：
node -v
npm -v
如果没有安装，你可以从 Node.js 官网 下载并安装。
2.2 安装 TypeScript
安装 TypeScript 编译器：
npm install -g typescript
安装完成后，你可以通过以下命令检查 TypeScript 是否安装成功：
tsc -v
3. 编写第一个 TypeScript 程序
3.1 创建 TypeScript 文件
在你的项目目录中创建一个新的 TypeScript 文件，例如 hello.ts：
// hello.ts
function greet(name: string) {
return `Hello, ${name}!`;
}
console.log(greet("TypeScript"));
3.2 编译 TypeScript 文件
使用 TypeScript 编译器将 hello.ts 编译为 JavaScript 文件：
tsc hello.ts
编译完成后，你会看到生成了一个 hello.js 文件。
3.3 运行 JavaScript 文件
你可以使用 Node.js 运行生成的 JavaScript 文件：
node hello.js
输出结果应该是：
Hello, TypeScript!
4. TypeScript 的基本类型
TypeScript 支持 JavaScript 的所有数据类型，并且添加了一些额外的类型。
4.1 基本类型
- string：字符串类型，例如
"Hello"。 - number：数字类型，例如
42或3.14。 - boolean：布尔类型，例如
true或false。 - any：任意类型，表示变量可以是任何类型。
- void：表示函数没有返回值。
- null 和 undefined：表示空值或未定义的值。
4.2 示例代码
let name: string = "Alice";
let age: number = 30;
let isStudent: boolean = true;
let anything: any = "可以是任何类型";
function logMessage(message: string): void {
console.log(message);
}
logMessage("Hello, TypeScript!");
5. 数组和元组
5.1 数组
TypeScript 中的数组可以存储相同类型的多个值。你可以使用数组类型注解来定义数组：
let numbers: number[] = [1, 2, 3, 4, 5];
let fruits: Array<string> = ["Apple", "Banana", "Cherry"];
5.2 元组
元组是一种特殊的数组，允许你存储不同类型的值，并且每个位置的类型是固定的：
let person: [string, number] = ["Alice", 30];
6. 函数
TypeScript 中的函数可以指定参数和返回值的类型。
6.1 函数类型注解
function add(a: number, b: number): number {
return a + b;
}
let result: number = add(5, 3);
console.log(result); // 输出 8
6.2 可选参数和默认参数
TypeScript 支持可选参数和默认参数：
function greet(name: string, greeting: string = "Hello"): string {
return `${greeting}, ${name}!`;
}
console.log(greet("Alice")); // 输出 "Hello, Alice!"
console.log(greet("Bob", "Hi")); // 输出 "Hi, Bob!"
7. 接口
接口是 TypeScript 中用于定义对象结构的工具。它可以帮助你确保对象具有特定的属性和方法。
7.1 定义接口
interface Person {
name: string;
age: number;
greet(): void;
}
let alice: Person = {
name: "Alice",
age: 30,
greet() {
console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
}
};
alice.greet(); // 输出 "Hello, my name is Alice and I am 30 years old."
8. 类
TypeScript 支持面向对象编程，允许你创建类和实例化对象。
8.1 定义类
class Animal {
name: string;
constructor(name: string) {
this.name = name;
}
makeSound(): void {
console.log(`${this.name} makes a sound.`);
}
}
let dog = new Animal("Dog");
dog.makeSound(); // 输出 "Dog makes a sound."
8.2 继承
TypeScript 支持类的继承，允许你创建子类并继承父类的属性和方法：
class Dog extends Animal {
constructor(name: string) {
super(name);
}
makeSound(): void {
console.log(`${this.name} barks.`);
}
}
let myDog = new Dog("Buddy");
myDog.makeSound(); // 输出 "Buddy barks."
9. 泛型
泛型是 TypeScript 中的一种高级类型，允许你编写可以处理多种类型的代码。
9.1 泛型函数
function identity<T>(arg: T): T {
return arg;
}
let output1 = identity<string>("Hello");
let output2 = identity<number>(42);
console.log(output1); // 输出 "Hello"
console.log(output2); // 输出 42
9.2 泛型类
class Box<T> {
private value: T;
constructor(value: T) {
this.value = value;
}
getValue(): T {
return this.value;
}
}
let box1 = new Box<string>("Hello");
let box2 = new Box<number>(42);
console.log(box1.getValue()); // 输出 "Hello"
console.log(box2.getValue()); // 输出 42
10. 实践练习
10.1 练习：创建一个简单的待办事项应用
- 创建一个
Todo类，包含id、title和completed属性。 - 创建一个
TodoList类，包含一个todos数组，并提供添加、删除和标记完成的方法。 - 使用 TypeScript 编写代码，并编译运行。
10.2 示例代码
class Todo {
id: number;
title: string;
completed: boolean;
constructor(id: number, title: string) {
this.id = id;
this.title = title;
this.completed = false;
}
}
class TodoList {
todos: Todo[] = [];
addTodo(title: string): void {
const id = this.todos.length + 1;
const todo = new Todo(id, title);
this.todos.push(todo);
}
removeTodo(id: number): void {
this.todos = this.todos.filter(todo => todo.id !== id);
}
markCompleted(id: number): void {
const todo = this.todos.find(todo => todo.id === id);
if (todo) {
todo.completed = true;
}
}
listTodos(): void {
this.todos.forEach(todo => {
console.log(`${todo.id}: ${todo.title} - ${todo.completed ? 'Completed' : 'Pending'}`);
});
}
}
const todoList = new TodoList();
todoList.addTodo("Learn TypeScript");
todoList.addTodo("Build a Todo App");
todoList.markCompleted(1);
todoList.listTodos();
11. 总结
通过本教程，你已经学习了 TypeScript 的基础知识，包括类型系统、接口、类、泛型等。TypeScript 不仅增强了 JavaScript 的类型安全性，还提供了面向对象编程的特性，使得代码更加可靠和易于维护。
在接下来的课程中，我们将继续深入学习 TypeScript 在 Angular 开发中的应用，包括组件、服务、路由等高级主题。希望你能继续保持学习的热情，掌握更多前端开发的技能！
下一步：我们将进入 Angular 的环境搭建，学习如何使用 Angular CLI 创建和管理 Angular 项目。