深入浅出TS | 青训营笔记

TypeScript (TS) 是一种由微软开发的编程语言，它是 JavaScript 的超集，提供了静态类型检查、类、接口、泛型等特性。

相比 JavaScript，TS 的静态类型检查让代码更加健壮和可读性更强。TS 的类和接口支持面向对象编程，使得代码可维护性更高。TS 的泛型能力则使得代码更加通用和灵活。

下面我们就来看一些 TS 的代码实例。

首先，我们来看一个简单的 TS 程序，它会输出 "Hello, TypeScript!"：

function sayHello(name: string) {
  console.log(`Hello, ${name}!`);
}

sayHello('TypeScript');

在这个例子中，我们定义了一个函数 sayHello，它有一个参数 name，类型为字符串。在函数体中，我们使用了模板字面量来构造输出语句，其中 ${name} 会被替换成函数调用时传递的参数值。最后，我们调用了 sayHello 函数，并传递了一个字符串参数 'TypeScript'。

接下来，我们来看一个使用类和接口的例子。下面是一个简单的图形类层次结构，包括一个基类 Shape 和两个派生类 Circle 和 Rectangle：

interface Shape {
  getArea(): number;
}

class Circle implements Shape {
  constructor(public radius: number) {}

  getArea() {
    return Math.PI * this.radius ** 2;
  }
}

class Rectangle implements Shape {
  constructor(public width: number, public height: number) {}

  getArea() {
    return this.width * this.height;
  }
}

const shapes: Shape[] = [
  new Circle(1),
  new Rectangle(2, 3),
];

shapes.forEach(shape => {
  console.log(`Area of shape: ${shape.getArea()}`);
});

在这个例子中，我们定义了一个接口 Shape，它有一个方法 getArea，返回值类型为数字。然后，我们定义了两个类 Circle 和 Rectangle，它们都实现了 Shape 接口，并且分别实现了自己的 getArea 方法。

在主程序中，我们创建了一个数组 shapes，其中包含了一个 Circle 对象和一个 Rectangle 对象。然后，我们使用 forEach 方法遍历这个数组，并输出每个图形的面积。

最后，我们来看一下 TS 的泛型能力。下面是一个简单的栈类实现：

class Stack<T> {
  private items: T[] = [];

  push(item: T) {
    this.items.push(item);
  }

  pop(): T | undefined {
    return this.items.pop();
  }
}

const stack = new Stack<number>();

stack.push(1);
stack.push(2);

console.log(stack.pop());
console.log(stack.pop());

在这个例子中，我们定义了一个 Stack 类，它有一个泛型参数 T，表示栈中存储的元素类型。在 push 方法中，我们使用 T 作为参数类型，并将元素存储到内部数组中。在 pop 方法中，我们使用 T 作为返回值类型，并从数组中弹出一个元素。

在主程序中，我们创建了一个 Stack 对象，并指定泛型参数为 number。然后，我们向栈中推入两个数字元素，并分别调用 pop 方法输出这些元素。

总之，TypeScript 是一种功能强大的编程语言，它提供了许多有用的特性来使代码更加健壮、可维护和灵活。如果你想写出高质量的 JavaScript 代码，那么 TS 是一个不错的选择。