简介

在上一篇 TypeScript 入门教程中，我们了解了 TypeScript 的基础概念和语法。本篇进阶教程将深入介绍 TypeScript 的高级特性，包括类的继承与接口的继承，命名空间，枚举，类型别名，装饰器等内容。

类的继承与接口的继承

在 TypeScript 中，我们可以使用 extends 关键字来实现类的继承，从而复用现有的类的代码。语法如下所示：

class Person {
  name: string;

  constructor(name: string) {
    this.name = name;
  }

  run() {
    console.log(`${this.name} is running.`);
  }
}

class Student extends Person {
  grade: number;

  constructor(name: string, grade: number) {
    super(name);
    this.grade = grade;
  }

  study() {
    console.log(`${this.name} is studying in ${this.grade} grade.`);
  }
}

let stu = new Student("Tom", 6);
stu.run();
stu.study();

同样的，接口也可以使用 extends 关键字来进行继承：

interface IPerson {
  name: string;
  age: number;
}

interface IStudent extends IPerson {
  grade: number;
}

let stu: IStudent = { name: "Tom", age: 12, grade: 6 }

命名空间

命名空间是 TypeScript 提供的一种避免全局命名冲突的机制。使用命名空间可以将代码模块化，并且可以避免不同模块之间的命名冲突。下面是一个简单的命名空间定义：

namespace MyNamespace {
  export const PI: number = 3.14;
  export function sayHello(name: string) {
    console.log(`Hello, ${name}!`);
  }
}

console.log(MyNamespace.PI);
MyNamespace.sayHello("Tom");

在命名空间中定义的成员必须通过 export 关键字进行暴露，才能在其他模块中使用。

枚举

枚举是 TypeScript 中常用的一种特殊数据类型，它可以为一组有限的取值建立一种命名方式。下面是一个简单的枚举定义：

enum Color {
  Red,
  Green,
  Blue,
}

let c: Color = Color.Green;
console.log(c);

默认情况下，枚举类型的值从 0 开始递增，也可以手动指定枚举值的编号：

enum Color {
  Red = 1,
  Green,
  Blue,
}

let c: Color = Color.Green;
console.log(c);

类型别名

类型别名可以为一个已有的类型定义一个新的名字，便于代码的复用和维护。下面是一个简单的类型别名定义：

type Name = string;
type Age = number;

interface Person {
  name: Name;
  age: Age;
}

let p: Person = { name: 'Tom', age: 12 };
console.log(p);

装饰器

装饰器是 TypeScript 中提供的一种特殊语法，用于在运行时修改类的行为。装饰器常用于扩展类的属性和方法、添加日志记录、错误检查等场景。下面是一个简单的装饰器定义：

function log(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;

  descriptor.value = function (...args: any[]) {
    console.log(`Calling ${propertyKey} with`, args);
    const result = originalMethod.apply(this, args);
    console.log(`Called ${propertyKey} with the result`, result);
    return result;
  };

  return descriptor;
}

class Calculator {
  @log
  add(x: number, y: number) {
    return x + y;
  }
}

const calc = new Calculator();
console.log(calc.add(1, 2));

该装饰器用于添加日志记录的功能，在执行类中的 add 方法时记录调用的参数和结果。我们可以使用 TypeScript 开发工具中的装饰器插件来查看装饰器的执行过程。

总结

通过本篇 TypeScript 进阶教程，我们学习了 TypeScript 的高级特性，例如类的继承和接口继承、命名空间、枚举、类型别名和装饰器等。了解和掌握这些特性可以使我们写出更加规范、可重用和易维护的 TypeScript 代码。另外，我们可以查看 TypeScript 官网中的文档和示例代码，深入了解 TypeScript 的各种特性和用法。

文章目录