深入理解 TypeScript：基础与面向对象用法指南

资源摘要信息: "TypeScript 基本用法和面向对象用法" TypeScript 是 JavaScript 的一个超集，它在JavaScript的基础上添加了静态类型系统，使得在编码阶段就能发现类型相关的错误，同时提供了如类、接口、枚举等更丰富的语法特性。本资源将详细介绍TypeScript的基本语法和面向对象编程（OOP）的相关用法。 ### TypeScript 基本用法 #### 1. 类型注解和类型推断 TypeScript 通过类型注解来声明变量、函数的参数和返回值的类型。类型注解可以显式地指定一个变量的类型，但TypeScript编译器也非常智能，能够根据上下文推断出变量的类型，这被称为类型推断。 ```typescript // 类型注解 let isDone: boolean = false; let decimal: number = 6; let color: string = "blue"; // 类型推断 let myName = "Alice"; // TypeScript 推断 myName 是一个 string 类型 ``` #### 2. 接口 在 TypeScript 中，接口是一种定义对象形状的方式。接口可以定义一个对象应该有什么属性和方法，但并不实际实现这些属性和方法。 ```typescript interface Person { name: string; age: number; } let employee: Person = { name: "Bob", age: 30 }; ``` #### 3. 类 TypeScript 支持基于类的面向对象编程。类可以包含属性、方法和构造函数。TypeScript 的类也支持继承、装饰器等特性。 ```typescript class Greeter { greeting: string; constructor(message: string) { this.greeting = message; } greet() { return "Hello, " + this.greeting; } } let greeter = new Greeter("world"); ``` #### 4. 函数 TypeScript 中的函数可以有具体的类型注解，可以指定参数的类型和返回值的类型。 ```typescript function add(x: number, y: number): number { return x + y; } let myAdd = function(x: number, y: number): number { return x + y; }; ``` #### 5. 枚举 枚举是TypeScript为数不多的JavaScript中没有的特性之一，它允许为一组数值赋予友好的名字。 ```typescript enum Color {Red, Green, Blue} let c: Color = Color.Green; ``` #### 6. 泛型 泛型使得函数、接口或类能够处理不同类型的数据，同时保证类型安全。 ```typescript function identity<T>(arg: T): T { return arg; } let output = identity<string>("myString"); ``` ### TypeScript 面向对象用法 #### 1. 类的继承 在TypeScript中，使用关键字`extends`来实现类的继承。子类继承父类的方法和属性，可以增加新功能或覆盖原有功能。 ```typescript class Animal { name: string; constructor(theName: string) { this.name = theName; } move(distanceInMeters: number = 0) { console.log(`${this.name} moved ${distanceInMeters}m.`); } } class Snake extends Animal { constructor(name: string) { super(name); } move(distanceInMeters = 5) { console.log("Slithering..."); super.move(distanceInMeters); } } ``` #### 2. 访问修饰符 TypeScript支持`public`、`private`和`protected`等访问修饰符，用来控制类成员的访问级别。 ```typescript class Animal { public name: string; private constructor(theName: string) { this.name = theName; } } class Rhino extends Animal { constructor(name: string) { super(name); } myMethod() { console.log(this.name); } } let animal = new Animal("Goat"); // 错误: 'Animal' 的构造函数是私有的. let rhino = new Rhino("Rhino"); // 正确 ``` #### 3. 静态属性和静态方法 静态成员属于类本身，而不是类的实例。 ```typescript class Grid { static origin = {x: 0, y: 0}; static calculateDistanceFromOrigin(point: {x: number; y: number;}) { let xDist = (point.x - Grid.origin.x); let yDist = (point.y - Grid.origin.y); return Math.sqrt(xDist * xDist + yDist * yDist) / this.scale; } scale: number; constructor (scale: number) { this.scale = scale; } } ``` #### 4. 抽象类和抽象方法 抽象类不能被实例化，且可以包含抽象方法，抽象方法只声明不实现，由继承的子类实现。 ```typescript abstract class Department { constructor(public name: string) {} printName(): void { console.log("Department name: " + this.name); } abstract printMeeting(): void; // 必须在派生类中实现 } class AccountingDepartment extends Department { constructor() { super("Accounting and Auditing"); } printMeeting(): void { console.log("The Accounting Department meets each Monday at 10am."); } } ``` ### 结语 TypeScript 通过提供类型系统和面向对象编程特性，使***ript开发更加安全和高效。基本用法涵盖了TypeScript编程的基础，而面向对象用法则进一步扩展了类和继承的概念。对于任何希望提高前端开发质量的开发者来说，掌握TypeScript的基本和面向对象用法是必备技能之一。