1.4TypeScript 基础

## 1.4TypeScript 基础 ## 1.4 TypeScript 基础 TypeScript 是 JavaScript 的超集，它添加了静态类型、类、接口等特性，使得代码更易于维护、阅读和重构。在 Angular 项目中，TypeScript 是首选语言，因为它提供了强大的类型检查和面向对象编程能力，有助于构建大型、复杂的应用程序。 ### 1.4.1 TypeScript 的优势 * **静态类型检查：** 在编译时发现潜在的类型错误，避免运行时错误。 * **更好的代码可读性：** 类型注解使得代码意图更清晰。 * **代码重构更容易：** 静态类型可以帮助工具进行更准确的代码重构。 * **面向对象编程支持：** 类、接口、继承等特性使得代码组织更模块化。 * **强大的工具支持：** TypeScript 编译器、编辑器插件等提供更好的开发体验。 ### 1.4.2 TypeScript 基础语法 **1. 类型注解** TypeScript 允许为变量、函数参数、返回值等添加类型注解。 ```typescript let age: number = 30; let name: string = "Alice"; let isStudent: boolean = true; function greet(name: string): string { return `Hello, ${name}!`; } ``` **2. 基本数据类型** TypeScript 支持 JavaScript 的所有基本数据类型，并添加了一些新的类型。 * `number`: 数字类型，包括整数和浮点数。 * `string`: 字符串类型。 * `boolean`: 布尔类型，`true` 或 `false`。 * `null`: 空值类型。 * `undefined`: 未定义类型。 * `symbol`: 符号类型 (ES6)。 * `void`: 表示没有返回值的函数。 * `any`: 表示任意类型，可以赋值为任何值。 * `unknown`: 表示类型不确定，但比 `any` 更安全，需要进行类型检查或断言。 * `never`: 表示永远不会到达的类型，例如抛出异常的函数。 * `tuple`: 元组类型，表示一个已知元素数量和类型的数组。 * `enum`: 枚举类型，表示一组命名的常量。 ```typescript let num: number = 10; let str: string = "Hello"; let flag: boolean = true; let nothing: null = null; let undef: undefined = undefined; let anything: any = 123; anything = "abc"; function logMessage(): void { console.log("This function returns nothing."); } // Tuple let person: [string, number] = ["Bob", 25]; // Enum enum Color { Red, Green, Blue, } let myColor: Color = Color.Green; // myColor will be 1 ``` **3. 接口 (Interface)** 接口用于定义对象的结构。它可以定义对象的属性和方法的类型。 ```typescript interface Person { name: string; age: number; greet(): string; } let user: Person = { name: "John", age: 28, greet() { return `Hello, my name is ${this.name}.`; }, }; console.log(user.greet()); // Output: Hello, my name is John. ``` **4. 类 (Class)** TypeScript 支持类和面向对象编程。 ```typescript class Animal { name: string; constructor(name: string) { this.name = name; } makeSound(): void { console.log("Generic animal sound"); } } class Dog extends Animal { breed: string; constructor(name: string, breed: string) { super(name); this.breed = breed; } makeSound(): void { console.log("Woof!"); } fetch(): void { console.log("Fetching the ball!"); } } let animal = new Animal("Generic Animal"); animal.makeSound(); // Output: Generic animal sound let dog = new Dog("Buddy", "Golden Retriever"); dog.makeSound(); // Output: Woof! dog.fetch(); // Output: Fetching the ball! ``` **5. 函数** TypeScript 增强了 JavaScript 函数的类型定义。 ```typescript // 函数类型定义 type Add = (x: number, y: number) => number; const add: Add = (a, b) => { return a + b; }; console.log(add(5, 3)); // Output: 8 // 可选参数 function greet(name: string, greeting?: string): string { if (greeting) { return `${greeting}, ${name}!`; } else { return `Hello, ${name}!`; } } console.log(greet("Alice")); // Output: Hello, Alice! console.log(greet("Bob", "Good morning")); // Output: Good morning, Bob! // 默认参数 function multiply(num: number, factor: number = 2): number { return num * factor; } console.log(multiply(5)); // Output: 10 console.log(multiply(5, 3)); // Output: 15 ``` **6. 泛型 (Generics)** 泛型允许编写可以处理多种类型的代码，而无需为每种类型编写单独的函数或类。 ```typescript function identity(arg: T): T { return arg; } let myString: string = identity("hello"); let myNumber: number = identity(123); console.log(myString); // Output: hello console.log(myNumber); // Output: 123 // 泛型接口 interface GenericIdentityFn { (arg: T): T; } let myIdentity: GenericIdentityFn = identity; console.log(myIdentity(456)); // Output: 456 ``` **7. 联合类型 (Union Types)** 联合类型允许一个变量可以存储多种类型的值。 ```typescript let code: string | number; code = "123"; code = 456; function printCode(code: string | number) { console.log(`Code is ${code}`); } printCode("ABC"); // Output: Code is ABC printCode(789); // Output: Code is 789 ``` **8. 类型别名 (Type Aliases)** 类型别名用于为现有类型创建一个新的名称。 ```typescript type StringOrNumber = string | number; let code: StringOrNumber; code = "123"; code = 456; type Point = { x: number; y: number; }; let myPoint: Point = { x: 10, y: 20 }; ``` **9. 类型断言 (Type Assertions)** 类型断言允许你告诉编译器一个变量的类型。 ```typescript let someValue: any = "this is a string"; let strLength: number = (someValue as string).length; let anotherValue: any = 123; let strValue: string = anotherValue.toString(); console.log(strLength); // Output: 16 console.log(strValue); // Output: 123 ``` ### 1.4.3 TypeScript 在 Angular 中的应用 在 Angular 项目中，TypeScript 用于编写组件、服务、模块等。 * **组件：** 使用类来定义组件，并使用类型注解来定义组件的属性和方法。 * **服务：** 使用类来定义服务，并使用依赖注入来管理服务之间的依赖关系。 * **模块：** 使用 `NgModule` 装饰器来定义模块，并使用类型注解来定义模块的导入和导出。 **示例：一个简单的 Angular 组件** ```typescript import { Component } from '@angular/core'; @Component({ selector: 'app-greeting', template: `

Hello, {{ name }}!

` }) export class GreetingComponent { name: string = 'World'; constructor() { } greet(): string { return `Hello, ${this.name}!`; } } ``` 在这个例子中，`GreetingComponent` 类使用 `string` 类型注解来定义 `name` 属性。 ### 1.4.4 TypeScript 编译过程 TypeScript 代码需要编译成 JavaScript 代码才能在浏览器中运行。Angular CLI 提供了内置的 TypeScript 编译器。 1. **编写 TypeScript 代码：** 创建 `.ts` 文件，并编写 TypeScript 代码。 2. **配置 `tsconfig.json`：** `tsconfig.json` 文件包含 TypeScript 编译器的配置选项，例如目标 JavaScript 版本、模块系统等。 3. **运行编译命令：** 使用 `ng build` 或 `ng serve` 命令来编译 TypeScript 代码。Angular CLI 会自动调用 TypeScript 编译器，将 `.ts` 文件编译成 `.js` 文件。 4. **浏览器执行 JavaScript 代码：** 浏览器加载和执行编译后的 JavaScript 代码。 ### 1.4.5 TypeScript 高级特性 (可选) * **装饰器 (Decorators):** 装饰器是一种特殊的声明，可以添加到类、方法、属性或参数上，用于修改它们的行为。Angular 广泛使用装饰器，例如 `@Component`、`@Injectable` 等。 * **命名空间 (Namespaces):** 命名空间用于组织代码，避免命名冲突。在模块化编程中，通常使用 ES 模块而不是命名空间。 * **条件类型 (Conditional Types):** 条件类型允许根据类型条件选择不同的类型。 * **映射类型 (Mapped Types):** 映射类型允许根据现有类型创建新的类型。 ### 1.4.6 总结 TypeScript 是 Angular 开发中不可或缺的一部分。掌握 TypeScript 的基础语法和高级特性，可以帮助你编写更健壮、可维护的 Angular 应用程序。通过类型注解、接口、类、泛型等特性，可以提高代码的可读性、可重用性和可测试性。 ### Mermaid 图示例 以下是一个简单的 mermaid 图示例，展示了 TypeScript 编译过程： ```mermaid graph TD A[TypeScript 代码 (.ts)] --> B(TypeScript 编译器); B --> C[JavaScript 代码 (.js)]; C --> D(浏览器); ``` 这个图展示了 TypeScript 代码如何通过编译器转换为 JavaScript 代码，最终在浏览器中运行。 希望这篇文章能够帮助你理解 TypeScript 的基础知识，并在 Angular 项目中更好地使用 TypeScript。