TypeScript 笔记

TypeScript 笔记

---

一、TypeScript 的作用

TypeScript 是由微软开发的一种强类型的 JavaScript 超集，主要用于提升代码的可维护性和开发效率。

• 静态类型检查：通过在开发阶段检测代码错误，避免运行时错误。
• 增强代码提示：结合 IDE，可提供智能补全、类型提示、重构工具等，提升开发效率。
• 支持现代 JavaScript：兼容所有 JavaScript 特性，并且对未来标准提供预览支持。
• 适合大型项目：通过类型系统和模块化设计，能够更好地组织代码。

---

二、TypeScript VS JavaScript

特性	TypeScript	JavaScript
类型系统	静态类型，编译时检查	动态类型，运行时检查
开发工具支持	提供强大的智能提示和类型推导	提示能力较弱
语法特性	增强了接口、泛型、枚举等	原生支持 ES 标准
调试与维护	编译时发现潜在错误，更适合大型复杂项目	更灵活，适合快速原型开发
运行环境	需要编译为 JavaScript 代码运行	直接运行于浏览器或 Node.js 环境中

总结：TypeScript 提供了更强的约束能力，适合复杂项目；JavaScript 更灵活，适合轻量项目。

---

三、TypeScript 的基础

1. 基本类型

• Boolean: let isDone: boolean = false;

• Number: let age: number = 25;

• String: let name: string = "TypeScript";

• 数组类型:

  • 数组：let list: number[] = [1, 2, 3];
  • 泛型数组：let list: Array = [1, 2, 3];

• 元组 (Tuple) : 数组中每个位置的类型固定：
  `let tuple: [string, number] = ["TS", 2023];

2. 特殊类型

• Any: 任意类型，关闭类型检查，适用于动态内容：
  let value: any = "Hello";
• Unknown: 未知类型，比 any 更安全，需显式类型检查：
  let value: unknown = 10;
• Void: 没有返回值的函数类型：
  function log(): void { console.log("Hello"); }
• Never: 不会返回值（抛出异常或无限循环）：
  function error(): never { throw new Error("Error"); }

3. 函数类型

• 输入类型：函数参数类型必须指定：
  function add(a: number, b: number): number { return a + b; }

• 输出类型：返回值类型也需声明（或推断）。

• 函数重载：支持根据不同参数定义多种函数签名：

  function greet(name: string): string;
  function greet(age: number): string;
  function greet(param: any): string {
      return typeof param === "string" ? `Hello, ${param}` : `You are ${param} years old.`;
  }
  

4. 枚举 (Enum)

enum Direction { Up = 1, Down, Left Right }

let dir: Direction = Direction.Up;

5. 接口 (Interface)

接口定义对象结构：

interface Person {
    name: string;
    age: number;
}
let user: Person = { name: "Alice", age: 25 };

6. 类 (Class)

• 与 JavaScript 类的区别：

  • 增强了访问修饰符（public、private、protected）。
  • 支持抽象类和接口。

示例：

class Animal {
    private name: string;
    constructor(name: string) {
        this.name = name;
    }
    public move(distance: number): void {
        console.log(`${this.name} moved ${distance}m.`);
    }
}
class Dog extends Animal {
    bark() {
        console.log("Woof!");
    }
}

7. 联合类型和交叉类型

• 联合类型（一个值可为多种类型）：
  let id: string | number;
• 交叉类型（合并多种类型特性）：
  type Admin = Person & { role: string };

8. 类型断言和类型别名

• 类型断言：手动指定变量类型：
  let someValue: any = "hello"; let strLength: number = (someValue as string).length;
• 类型别名：给复杂类型起别名：
  type Point = { x: number; y: number; };

---

四、进阶——泛型

泛型提供了一种在类型上可重用的设计方式。

• 泛型函数：

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

• 泛型类：

  class Box<T> {
      contents: T;
      constructor(value: T) {
          this.contents = value;
      }
  }
  

• 泛型工具类：

  • Partial: 将所有属性变为可选。
    type PartialUser = Partial;
  • Pick<T, K>: 从类型中挑选部分属性。
    type UserName = Pick<Person, "name">;

---

总结

TypeScript 是 JavaScript 的强大扩展，通过静态类型系统和现代特性，提升了代码的安全性、可读性和可维护性。从基础到进阶，TypeScript 不仅适合小型项目，也非常适用于复杂的大型系统开发，是现代前端开发中不可或缺的工具。