TypeScript 核心概念解析及其实战演练

引言

TypeScript 是 JavaScript 的超集，它引入了一种类型检查机制，并为 JavaScript 代码带来了更强的类型安全性和可读性。TypeScript 代码在运行之前会进行静态类型检查，如果发现错误，编译的时候就会报错。日常一般搭配 Eslint 或 Tslint 使用，在编码过程中即会报出对应错误。

TypeScript 的核心概念

1. 类型注解

TypeScript 通过在变量后加 :类型 声明变量的类型，这种方式称为类型注解。例如：

let name: string = "John";

2. 类型推断

TypeScript 还支持类型推断，即根据变量的值自动推断出它的类型。例如：

let name = "John"; // 类型推断为 string

3. 类型别名

类型别名允许您为一个类型定义一个新的名称，以便在代码中更轻松地引用它。例如：

type Person = {
  name: string;
  age: number;
};

现在，您可以使用 Person 类型来声明变量：

let person: Person = {
  name: "John",
  age: 30
};

4. 接口

接口是一种定义对象的形状（即属性和方法）的规范。接口可以用来约束对象的类型，从而确保对象具有正确的数据结构。例如：

interface Person {
  name: string;
  age: number;
  greet(): string;
}

现在，您可以使用 Person 接口来声明变量：

let person: Person = {
  name: "John",
  age: 30,
  greet() {
    return "Hello, my name is " + this.name;
  }
};

5. 类

类是一种创建对象的蓝图，它允许您定义对象的属性和方法。例如：

class Person {
  name: string;
  age: number;

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

  greet() {
    return "Hello, my name is " + this.name;
  }
}

现在，您可以使用 Person 类来创建对象：

let person = new Person("John", 30);

console.log(person.greet()); // Hello, my name is John

6. 泛型

泛型允许您创建可重用的组件，这些组件可以在不同的数据类型上工作。例如，您可以创建一个泛型函数来交换两个变量的值：

function swap<T>(x: T, y: T): void {
  let temp = x;
  x = y;
  y = temp;
}

现在，您可以使用 swap 函数来交换两个数字、两个字符串或任何其他类型的数据：

swap(1, 2); // 交换两个数字
swap("a", "b"); // 交换两个字符串

7. 混合类型

混合类型允许您将多个类型组合成一个新的类型。例如，您可以创建一个混合类型来表示一个可以存储数字或字符串的值：

type NumberOrString = number | string;

现在，您可以使用 NumberOrString 类型来声明变量：

let value: NumberOrString = 123; // 值为数字
value = "abc"; // 值为字符串

8. 装饰器

装饰器是一种在类、方法或属性上附加额外功能的机制。例如，您可以使用装饰器来记录方法的执行时间：

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

  descriptor.value = function(...args: any[]) {
    const start = Date.now();
    const result = originalMethod.apply(this, args);
    const end = Date.now();
    console.log(`Method ${propertyKey} took ${end - start} ms to execute.`);
    return result;
  };
}

class MyClass {
  @logExecutionTime
  public sayHello() {
    console.log("Hello, world!");
  }
}

const myClass = new MyClass();
myClass.sayHello(); // Method sayHello took 10 ms to execute.

9. 模块

模块允许您将代码组织成更小的单元，以便于管理和重用。例如，您可以创建一个模块来管理用户相关的数据：

export class User {
  name: string;
  age: number;

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

export function greetUser(user: User) {
  console.log(`Hello, ${user.name}!`);
}

现在，您可以将此模块导入到其他模块中并使用其中的类和函数：

import { User, greetUser } from "./user";

const user = new User("John", 30);
greetUser(user); // Hello, John!

10. 命名空间

命名空间允许您将相关的类、接口和函数分组到一个命名空间中，以便于组织和管理代码。例如，您可以创建一个命名空间来管理与数学相关的代码：

namespace Math {
  export class Vector2 {
    x: number;
    y: number;

    constructor(x: number, y: number) {
      this.x = x;
      this.y = y;
    }
  }

  export function add(a: Vector2, b: Vector2): Vector2 {
    return new Vector2(a.x + b.x, a.y + b.y);
  }
}

现在，您可以使用 Math 命名空间中的类和函数：

const v1 = new Math.Vector2(1, 2);
const v2 = new Math.Vector2(3, 4);

const v3 = Math.add(v1, v2); // Vector2 { x: 4, y: 6 }

结束语

TypeScript 是 JavaScript 的一个强大扩展，它为 JavaScript 代码带来了更强的类型安全性和可读性。通过学习 TypeScript 的核心概念，您可以编写出更可靠、更健壮的 JavaScript 代码。在下一篇文章中，我们将详细介绍如何使用 TypeScript 来编写实际的应用程序。