Typescript语言学习入门教程二
在TypeScript 语言学习入门级教程一中，我们已经对 TypeScript 的基本数据类型、变量声明、函数等基础概念有了一定的了解。本教程将在此基础上，深入探讨 TypeScript 的接口、类以及泛型等重要特性，帮助大家进一步提升对 TypeScript 的掌握程度，以便更好地应用于实际项目开发中。
一、接口（Interfaces）
接口在 TypeScript 中用于定义对象的结构和形状，它描述了一个对象应该具有哪些属性和方法，以及这些属性和方法的类型。
- 基本接口定义
例如，我们定义一个简单的接口来描述一个人的信息：
interface Person {
name: string;
age: number;
sayHello(): void;
}
在上述代码中，Person 接口规定了一个对象必须包含 name（字符串类型）和 age（数字类型）两个属性，以及一个名为 sayHello 的无返回值方法。
然后我们可以创建一个符合该接口的对象：
let john: Person = {
name: “John”,
age: 30,
sayHello() {
console.log(Hello, my name is ${this.name} and I'm ${this.age} years old.);
}
};
2. 接口的可选属性
有时候，一个对象的某些属性可能是可选的。我们可以使用 ? 符号来定义可选属性。例如：
interface Car {
brand: string;
model: string;
year?: number;
}
let myCar: Car = {
brand: “Toyotas”,
model: “Corolla”
};
在这个例子中，Car 接口的 year 属性是可选的，所以我们在创建 myCar 对象时可以不提供 year 属性的值。
- 接口的继承
接口之间可以相互继承，这有助于代码的复用和扩展。例如：
interface Shape {
color: string;
}
interface Rectangle extends Shape {
width: number;
height: number;
}
let rectangle: Rectangle = {
color: “blue”,
width: 10,
height: 20
};
这里 Rectangle 接口继承了 Shape 接口，所以 Rectangle 类型的对象不仅要有 width 和 height 属性，还要有 color 属性。
二、类（Classes）
TypeScript 支持面向对象编程中的类和继承，类是一种将数据和操作数据的方法组合在一起的结构。
- 类的基本定义
以下是一个简单的类的定义示例：
class Animal {
name: string;
constructor(name: string) {
this.name = name;
}
makeSound(): void {
console.log(“Some generic animal sound”);
}
}
在这个例子中，Animal 类有一个 name 属性和一个 constructor 构造函数用于初始化 name 属性，还有一个 makeSound 方法。
我们可以创建 Animal 类的实例：
let myAnimal = new Animal(“Lion”);
myAnimal.makeSound();
2. 类的继承
类可以继承其他类，子类可以继承父类的属性和方法，并可以进行扩展或重写。例如：
class Dog extends Animal {
constructor(name: string) {
super(name);
}
makeSound(): void {
console.log(“Woof! Woof!”);
}
}
let myDog = new Dog(“Buddy”);
myDog.makeSound();
这里 Dog 类继承自 Animal 类，它重写了 makeSound 方法，以发出狗特有的叫声。
- 类的访问修饰符
TypeScript 提供了三种访问修饰符：public（默认，可在任何地方访问）、private（只能在类内部访问）和 protected（在类内部和子类中可访问）。例如：
class BankAccount {
private balance: number;
constructor(initialBalance: number) {
this.balance = initialBalance;
}
public deposit(amount: number): void {
this.balance += amount;
}
protected getBalance(): number {
return this.balance;
}
}
let myAccount = new BankAccount(1000);
myAccount.deposit(500);
// console.log(myAccount.balance); // 错误，不能访问 private 成员
// console.log(myAccount.getBalance()); // 错误，不能在类外部访问 protected 成员
在这个 BankAccount 类中，balance 属性被声明为 private，只能在类内部被访问和修改。deposit 方法被声明为 public，可以在类外部被调用。getBalance 方法被声明为 protected，只能在类内部和子类中被访问。
三、泛型（Generics）
泛型是 TypeScript 中一种强大的特性，它允许我们编写可复用的代码，能够适用于多种不同类型的数据，而不是针对特定的类型。
- 简单泛型函数
例如，我们定义一个函数来返回数组中的第一个元素：
function getFirstElement(arr: T[]): T {
return arr[0];
}
let numbers = [1, 2, 3];
let firstNumber = getFirstElement(numbers);
let strings = [“Hello”, “World”];
let firstString = getFirstElement(strings);
在这个函数中，T 是一个泛型类型参数，它代表了数组中元素的类型。函数可以接受任何类型的数组，并返回该数组的第一个元素，其类型与数组元素类型相同。
- 泛型类
我们也可以定义泛型类。例如，一个简单的泛型栈类：
class Stack {
private items: T[] = [];
push(item: T): void {
this.items.push(item);
}
pop(): T | undefined {
return this.items.pop();
}
}
let numberStack = new Stack();
numberStack.push(1);
numberStack.push(2);
let poppedNumber = numberStack.pop();
let stringStack = new Stack();
stringStack.push(“A”);
stringStack.push(“B”);
let poppedString = stringStack.pop();
在 Stack 类中，T 代表栈中元素的类型，这样我们可以创建不同类型元素的栈实例。
通过本教程的学习，我们对 TypeScript 的接口、类和泛型有了深入的了解。这些特性在构建复杂的应用程序、提高代码的可维护性和复用性方面具有非常重要的作用。继续深入学习和实践 TypeScript 的其他高级特性，将有助于你成为一名更优秀的前端或全栈开发者。
如果在学习过程中有任何疑问或建议，欢迎留言交流。