TypeScript 笔记 | 豆包MarsCode AI刷题

我想想办法
35 阅读4分钟

TypeScript 笔记

TypeScript 是 JavaScript 的一个超集，它在 JavaScript 的基础上增加了静态类型检查、类型注解和接口等特性，使得开发过程更加可靠和可维护。在这篇笔记中，我将介绍 TypeScript 的基础知识，帮助你理解它的核心特性，并展示一些实际的应用案例。

什么是 TypeScript

TypeScript 是由微软开发的开源编程语言，它是 JavaScript 的一个严格超集。换句话说，所有有效的 JavaScript 代码都是有效的 TypeScript 代码，但 TypeScript 添加了类型系统和其他功能。

TypeScript 的核心目标是提高 JavaScript 开发的可维护性和开发体验，它通过静态类型检查帮助开发者在编码时发现潜在的错误。

TypeScript 的核心特性

  1. 类型系统
    TypeScript 引入了静态类型系统，可以在编写代码时检测类型错误。通过类型注解，开发者可以明确指定变量、函数的参数和返回值的类型。

  2. 接口 (Interface)
    TypeScript 提供了 interface 来定义对象的结构，它可以约束对象的形状，并用于类型检查。

  3. 类 (Class)
    TypeScript 支持 ES6 类的特性，并且提供了额外的访问修饰符（如 public、private、protected）来控制类成员的可访问性。

  4. 枚举 (Enum)
    TypeScript 引入了枚举类型，它允许你为数字值命名，增加了代码的可读性。

  5. 模块和命名空间
    TypeScript 支持 ES6 模块和命名空间，用于组织和管理代码。

为什么使用 TypeScript？

  1. 静态类型检查
    TypeScript 提供了静态类型检查，帮助开发者在编译阶段发现潜在的错误。例如，如果你尝试将一个字符串赋值给一个数字类型的变量，TypeScript 会抛出错误。

  2. 提高开发效率
    TypeScript 强制使用类型注解，使得代码的含义更加明确。这对团队开发尤为重要，可以减少代码中的潜在错误，并提高代码的可读性。

  3. 良好的 IDE 支持
    许多现代的开发环境（如 VS Code）都对 TypeScript 提供了优越的支持，如自动补全、代码提示和重构功能。

  4. 易于与 JavaScript 兼容
    TypeScript 是 JavaScript 的超集，意味着你可以逐步将 TypeScript 引入现有的 JavaScript 项目中。

TypeScript 基础

1. 类型注解

在 TypeScript 中，我可以通过类型注解来指定变量、函数的类型。

let name: string = "John";  // 字符串类型
let age: number = 30;       // 数字类型
let isActive: boolean = true; // 布尔类型

2. 数组类型

在 TypeScript 中，数组的类型可以通过两种方式声明：

let numbers: number[] = [1, 2, 3];  // 数字类型数组
let strings: Array<string> = ["a", "b", "c"];  // 字符串类型数组

3. 函数类型注解

在 TypeScript 中，我们可以为函数的参数和返回值指定类型。

function greet(name: string): string {
  return `Hello, ${name}!`;
}

let message = greet("John"); // 返回 "Hello, John!"

4. 接口 (Interface)

接口用于定义对象的形状（属性及其类型）。我可以通过接口来约束一个对象必须包含的属性和方法。

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

let john: Person = {
  name: "John",
  age: 30,
  greet: function() {
    return `Hello, my name is ${this.name}`;
  }
};

接口不仅可以用于对象，还可以用于类（类实现接口）。

interface Shape {
  area(): number;
}

class Circle implements Shape {
  radius: number;
  constructor(radius: number) {
    this.radius = radius;
  }
  area(): number {
    return Math.PI * this.radius * this.radius;
  }
}

let circle = new Circle(10);
console.log(circle.area()); // 输出圆的面积

5. 枚举 (Enum)

枚举是一种特殊的类型，它用于表示一组数值的集合。默认情况下，枚举从 0 开始递增。

enum Direction {
  Up,    // 0
  Down,  // 1
  Left,  // 2
  Right  // 3
}

let dir: Direction = Direction.Up;
console.log(dir);  // 输出 0

我也可以为枚举成员指定自定义值：

enum Direction {
  Up = 1,
  Down = 2,
  Left = 3,
  Right = 4
}

let dir: Direction = Direction.Up;
console.log(dir);  // 输出 1

6. 类 (Class)

TypeScript 支持面向对象编程的类（Class）和继承。除了 JavaScript 中的基本类特性，TypeScript 还允许为类的属性和方法添加类型注解。

class Animal {
  name: string;

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

  speak(): void {
    console.log(`${this.name} makes a sound.`);
  }
}

class Dog extends Animal {
  breed: string;

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

  speak(): void {
    console.log(`${this.name} barks.`);
  }
}

let dog = new Dog("Max", "Golden Retriever");
dog.speak();  // 输出 "Max barks."

7. 联合类型与类型推断

在 TypeScript 中，我可以使用联合类型（Union Types）来指定一个变量可以接受多种类型的值。

let value: string | number; // value 可以是字符串或数字
value = "Hello";
value = 100;

TypeScript 还提供了类型推断（Type Inference），当我没有显式声明变量的类型时，TypeScript 会自动推断变量的类型：

let x = 10;  // TypeScript 自动推断 x 的类型为 number

8. 类型别名 (Type Alias)

类型别名允许我为现有类型创建一个新的名字，常用于创建复杂类型的别名。

type Point = {
  x: number;
  y: number;
};

let p: Point = { x: 10, y: 20 };

TypeScript 与 JavaScript 的关系

TypeScript 是 JavaScript 的一个超集，这意味着你可以使用现有的 JavaScript 代码库，并逐步引入 TypeScript 的特性。你可以从一个 JavaScript 项目开始，通过逐步将文件后缀改为 .ts 来转化为 TypeScript 文件。

总结

TypeScript 为 JavaScript 引入了强大的类型系统，使得代码在编写时就能得到类型检查，避免了运行时错误。通过接口、枚举、类和类型别名等特性，TypeScript 使得开发更加规范和高效。尽管 TypeScript 需要一定的学习曲线，但它带来的开发体验和代码质量提升是非常值得的。

在实际开发中，我可以逐步将 TypeScript 引入我的 JavaScript 项目，充分利用它的静态类型检查和开发工具的支持，提升代码的可维护性和开发效率。

avatar
文章
阅读
粉丝