一、TypeScript 简介与优势

TypeScript 是 JavaScript 的超集，由微软开发并维护，它引入了静态类型系统和对 ES6+ 特性的支持。TypeScript 最终会被编译成 JavaScript，可在任何支持 JS 的环境中运行。

为什么需要 TypeScript？

• JavaScript 是动态类型语言，大部分错误是类型错误，调试成本高。

• TypeScript 在编译阶段进行类型检查，提前发现错误。

• 配合 IDE（如 VSCode、WebStorm）提供智能提示、代码补全，提升开发效率。

TypeScript 的优势

• 静态类型检查

• 更好的代码组织和面向对象支持

• 支持最新 JavaScript 特性

• 提升代码可维护性和可读性

---

二、TypeScript 基础类型系统

2.1 基本类型

TypeScript 提供了丰富的基本类型，包括：

类型	示例	说明
boolean	let isDone: boolean = false;	布尔值
number	let count: number = 10;	数字（支持二进制、八进制、十六进制）
string	let name: string = "Alice";	字符串
Array	let list: number[] = [1, 2, 3];	数组
Tuple	let person: [string, number] = ["Alice", 30];	元组
enum	enum Color { Red, Green, Blue }	枚举
any	let value: any = "anything";	任意类型
void	function sayHello(): void { }	无返回值
null / undefined	let u: undefined = undefined;	空值
never	function error(): never { throw ... }	永不返回
object	let obj: object = { key: "value" };	非原始类型

2.2 类型注解与类型推断

• 类型注解：显式指定类型

let age: number = 25;
function greet(name: string): string {
  return `Hello, ${name}`;
}

• 类型推断：TS 自动推断类型

let message = "Hello"; // 推断为 string
let count = 10;        // 推断为 number

• 上下文类型推断：根据使用上下文推断类型

window.addEventListener("click", (event) => {
  console.log(event.button); // event 被推断为 MouseEvent
});

2.3 联合类型与类型断言

• 联合类型：变量可以是多种类型之一

let value: string | number;
value = "hello";
value = 42;

• 类型断言：告诉编译器具体类型

let someValue: any = "this is a string";
let len1 = (someValue as string).length;
let len2 = (<string>someValue).length;

• 类型守卫：通过条件判断缩小类型范围

function padLeft(value: string | number): string {
  if (typeof value === "number") {
    return " ".repeat(value);
  }
  return value;
}

---

三、TypeScript 接口与类

3.1 接口基础

接口用于定义对象的结构：

interface Person {
  name: string;
  age?: number;       // 可选属性
  readonly id: number; // 只读属性
}

3.2 函数类型与索引类型接口

// 函数类型接口
interface SearchFunc {
  (source: string, subString: string): boolean;
}

// 索引类型接口
interface StringArray {
  [index: number]: string;
}

3.3 接口继承

interface Animal {
  name: string;
}

interface Dog extends Animal {
  breed: string;
}

3.4 类的基本语法

class Person {
  name: string;

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

  sayHello(): void {
    console.log(`Hello, ${this.name}`);
  }
}

3.5 访问修饰符

修饰符	类内部	子类	类外部
public	✅	✅	✅
private	✅	❌	❌
protected	✅	✅	❌

3.6 抽象类与静态成员

abstract class Shape {
  static PI: number = 3.14;

  abstract calculateArea(): number;

  displayColor(): void {
    console.log("Color displayed");
  }
}

class Circle extends Shape {
  constructor(public radius: number) {
    super();
  }

  calculateArea(): number {
    return Shape.PI * this.radius * this.radius;
  }
}

3.7 类实现接口

interface Movable {
  speed: number;
  move(): void;
}

class Car implements Movable {
  speed: number;

  constructor(speed: number) {
    this.speed = speed;
  }

  move(): void {
    console.log(`Moving at ${this.speed} km/h`);
  }
}

---

四、TypeScript 泛型

4.1 泛型函数

function identity<T>(arg: T): T {
  return arg;
}

let output = identity<string>("hello");

4.2 泛型接口

interface Box<T> {
  value: T;
}

let numberBox: Box<number> = { value: 42 };

4.3 泛型类

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

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

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

4.4 泛型约束

interface Lengthwise {
  length: number;
}

function logLength<T extends Lengthwise>(arg: T): void {
  console.log(arg.length);
}

4.5 多类型参数与默认值

function pair<T, U>(first: T, second: U): [T, U] {
  return [first, second];
}

class Container<T = string> {
  constructor(public value: T) {}
}

---

五、总结

TypeScript 通过静态类型系统、接口与类、泛型三大核心特性，显著提升了 JavaScript 代码的可维护性、可读性和类型安全性。无论是初学者还是资深开发者，掌握 TypeScript 都将极大提升开发效率与代码质量。

附：学习资源推荐

• TypeScript 官方文档

• 《TypeScript 编程》

• 练习项目：搭建 TS 环境、实现类型安全的计算器、用户管理系统等