深入浅出 TypeScript| 青训营笔记

冷月半明
44 阅读9分钟

TypeScript 简介

TypeScript 是由 Microsoft 开发的开源编程语言，它是 JavaScript 的超集，为 JavaScript 增加了类型检查和更多的面向对象编程特性。它最终会被编译为纯粹的 JavaScript 代码，这意味着现有的 JavaScript 代码可以无缝迁移到 TypeScript 中。

TypeScript 的主要目标是解决 JavaScript 在大型应用开发中的一些问题。JavaScript 是一种动态类型的语言，它在编译时不进行类型检查，而是在运行时才会发现潜在的类型错误。这导致在大型项目中，难以捕捉到类型相关的错误，增加了调试和维护的难度。

TypeScript 引入了静态类型检查，使开发者可以在编译阶段就发现潜在的类型错误。通过类型注解和类型推断，TypeScript 可以在开发过程中提供更准确的代码提示和自动补全功能，提高开发效率和代码质量。

TypeScript 支持 ECMAScript 标准，并在此基础上增加了一些新的特性，如类、接口、泛型、装饰器等。这些特性使得 TypeScript 更适合大型应用的开发，提供了更好的代码结构和可读性。

另外，TypeScript 的编译过程非常灵活，开发者可以选择将 TypeScript 编译为不同版本的 JavaScript，以适应不同的运行环境和浏览器兼容性要求。

总结起来，TypeScript 的主要特点和优势包括：

强大的静态类型系统：通过类型检查提前发现潜在的错误，增强代码的可靠性和可维护性。 更好的开发工具支持：编辑器可以提供准确的代码提示和自动补全功能，大大提高开发效率。 渐进式学习和迁移：可以将现有的 JavaScript 代码逐步迁移到 TypeScript 中，无需一次性重写整个项目。 更好的代码结构和可读性：引入了类、接口、模块等概念，使代码更易于组织和理解。 社区支持和活跃度：TypeScript 拥有庞大的开发者社区和活跃的生态系统，提供了丰富的资源和工具。 通过深入学习 TypeScript，您可以在项目开发中充分发挥 TypeScript 的优势，编写更健壮、可维护和可扩展的代码。无论是前端开发、后端开发还是跨平台开发，TypeScript 都是您值得掌握的技能。

基本类型和变量声明

在 TypeScript 中，我们可以使用基本类型来定义变量的数据类型。下面是 TypeScript 中常用的基本类型：

  • 布尔类型（boolean）：表示逻辑值，可以是 true 或 false。
  • 数字类型（number）：表示数值，可以是整数或浮点数。
  • 字符串类型（string）：表示文本字符串，使用单引号或双引号括起来。
  • 数组类型（array）：表示一个元素类型相同的数组，使用 type[] 或 Array 来声明。
  • 元组类型（tuple）：表示一个固定长度和类型的数组，每个元素的类型可以不同。
  • 枚举类型（enum）：表示一组命名的常量值。
  • 任意类型（any）：表示可以是任意类型的值，通常用于与现有 JavaScript 代码集成或在编码过程中临时处理类型不确定的值。
  • 空类型（void）：表示没有任何类型，通常用于表示函数没有返回值。
  • null 和 undefined：表示变量的值为空或未定义。
  • never 类型：表示永远不存在的类型，通常用于表示抛出异常或无法执行完整的函数。

变量的声明可以使用 let 或 const 关键字。let 声明的变量可以被重新赋值，而 const 声明的变量是一个常量，不能被重新赋值。

下面是一些示例代码：


let isDone: boolean = false;
let age: number = 30;
let name: string = "John";

let numbers: number[] = [1, 2, 3];
let fruits: Array<string> = ["apple", "banana", "orange"];

let person: [string, number] = ["John", 30];

enum Color {
  Red,
  Green,
  Blue,
}

let color: Color = Color.Red;

let anyValue: any = 10;
anyValue = "Hello";

function greet(): void {
  console.log("Hello!");
}

let nullValue: null = null;
let undefinedValue: undefined = undefined;

function throwError(): never {
  throw new Error("Error occurred");
}

通过使用基本类型和变量声明，可以明确变量的类型，提供类型安全性，并在编码过程中获得更好的代码提示和自动补全功能。这有助于减少潜在的错误，并提高代码的可读性和可维护性。

函数和类

在 TypeScript 中，我们可以使用函数和类来组织和抽象代码，实现更复杂的逻辑和功能。

函数（Functions）： 函数是一段可重复调用的代码块，它接收参数并执行特定的任务。在 TypeScript 中，可以使用以下方式声明函数：


function add(x: number, y: number): number {
  return x + y;
}

let result: number = add(5, 3);
console.log(result); // 输出：8

上述代码中，我们声明了一个名为 add 的函数，它接收两个参数 x 和 y，并返回它们的和。函数的参数可以指定类型注解，以确保传入的参数符合预期的类型。函数的返回值类型也可以指定，这样在函数体中的返回语句会被类型检查。

类（Classes）： 类是面向对象编程中的关键概念，它用于定义具有相同属性和行为的对象的蓝图。在 TypeScript 中，可以使用以下方式声明类：


class Person {
  private name: string;
  private age: number;

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

  greet(): void {
    console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
  }
}

let person: Person = new Person("John", 30);
person.greet(); // 输出：Hello, my name is John and I'm 30 years old.

上述代码中，我们声明了一个名为 Person 的类，它有私有属性 name 和 age，以及一个构造函数和一个 greet 方法。构造函数在创建对象时被调用，用于初始化对象的属性。类的方法可以通过 this 关键字访问类的属性。

类还可以通过继承来扩展现有类的功能，通过实现接口来定义类的契约。这些特性使得 TypeScript 中的类更灵活和强大。

总结起来，函数和类是 TypeScript 中常用的工具，用于组织和抽象代码。函数用于封装可重复使用的代码块，类用于定义对象的结构和行为。深入了解和灵活运用函数和类，可以编写更模块化、可扩展和可维护的代码。

接口和泛型

接口和泛型是 TypeScript 中的两个重要概念，它们提供了更灵活和可复用的代码设计和抽象能力。

接口（Interfaces）： 接口用于定义对象的结构和行为，它可以描述对象应该具有哪些属性和方法。在 TypeScript 中，可以使用以下方式声明接口：


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

let person: Person = {
  name: "John",
  age: 30,
  greet() {
    console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
  }
};

person.greet(); // 输出：Hello, my name is John and I'm 30 years old.

上述代码中，我们声明了一个名为 Person 的接口，它包含了 name、age 和 greet 三个属性。然后我们创建了一个符合该接口定义的对象，并调用了 greet 方法。接口可以在多个对象之间共享，提供了一种约束和规范的方式。

泛型（Generics）： 泛型允许我们在编写可复用的代码时，使用不特定类型的变量。通过泛型，可以编写更通用、更灵活的函数和类。在 TypeScript 中，可以使用以下方式声明泛型：


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

let result: string = identity("Hello, TypeScript");
console.log(result); // 输出：Hello, TypeScript

let anotherResult: number = identity(123);
console.log(anotherResult); // 输出：123

上述代码中，我们声明了一个名为 identity 的函数，它使用泛型 来表示参数和返回值的类型。通过泛型，我们可以在调用函数时指定具体的类型，使函数适用于多种不同类型的数据。

除了函数，泛型也可以应用于类和接口。通过使用泛型，可以实现更灵活的数据结构和算法，提高代码的可复用性和扩展性。

接口和泛型是 TypeScript 中非常强大和常用的特性，它们可以提供更丰富的类型约束和抽象能力。深入理解和灵活应用接口和泛型，可以使代码更具可读性、可维护性和可扩展性。

模块化和命名空间

模块化和命名空间是 TypeScript 中用于组织和管理代码的重要概念。

模块化（Modules）： 模块化是一种将代码拆分为独立的功能模块，每个模块负责完成特定的任务或提供特定的功能。模块化可以提高代码的可维护性、可复用性和可测试性。在 TypeScript 中，可以使用模块系统来实现模块化。

模块可以包含变量、函数、类和接口等代码，可以将其导出（export）供其他模块使用，也可以从其他模块导入（import）需要的功能。下面是一个简单的示例：


// greeter.ts
export function greet(name: string) {
  console.log(`Hello, ${name}!`);
}

// main.ts
import { greet } from "./greeter";
greet("John"); // 输出：Hello, John!

上述代码中，我们将 greet 函数定义在 greeter.ts 模块中，并通过 export 关键字将其导出。然后在 main.ts 模块中使用 import 关键字导入 greet 函数，并调用它。

模块化使得代码更具可组织性和可维护性，可以将功能分散到多个文件中，提高代码的复用性，并降低命名冲突的可能性。

命名空间（Namespaces）： 命名空间是一种用于组织具有相似功能的代码的机制。它将相关的变量、函数、类和接口等封装在一个命名空间内，避免全局命名冲突。命名空间可以嵌套，以形成更复杂的结构。在 TypeScript 中，可以使用命名空间来实现模块化和代码组织。

下面是一个命名空间的示例：


namespace MathUtils {
  export function sum(a: number, b: number): number {
    return a + b;
  }
}

let result: number = MathUtils.sum(5, 3);
console.log(result); // 输出：8

上述代码中，我们在 MathUtils 命名空间内定义了一个 sum 函数，并使用 export 关键字将其导出。然后可以通过 命名空间.成员 的方式访问命名空间中的功能。

命名空间提供了一种组织代码的方式，避免全局污染，但在较大的项目中，推荐使用模块化来更好地管理代码。

总结： 模块化和命名空间是 TypeScript 中用于组织和管理代码的重要概念。模块化可以将代码拆分为独立的功能模块，并通过导入和导出实现模块间的通信。命名空间提供了一种组织代码的方式，避免全局命名冲突。深入理解和灵活运用模块化和命名空间可以提高代码的可读性、可维护性和可扩展性。下面我们将继续探讨一些相关的概念和技巧。

模块化的进一步说明： 在 TypeScript 中，模块可以使用不同的模块系统进行定义和导入/导出操作。常见的模块系统包括 CommonJS、AMD、UMD 和 ES6 模块系统。

在使用模块时，可以使用 export 关键字将变量、函数、类或接口导出为模块的公共成员，使其在其他模块中可访问。可以使用 import 关键字导入其他模块导出的成员。


// utils.ts
export function add(a: number, b: number): number {
  return a + b;
}

// app.ts
import { add } from "./utils";
console.log(add(2, 3)); // 输出：5

除了导出和导入特定的成员，还可以使用 export default 语法导出模块的默认成员。一个模块只能有一个默认导出。


// utils.ts
export default function greet(name: string): void {
  console.log(`Hello, ${name}!`);
}

// app.ts
import greet from "./utils";
greet("John"); // 输出：Hello, John!

命名空间的进一步说明： 命名空间可以使用 namespace 关键字进行定义。在命名空间内部，可以使用 export 关键字将成员导出，使用 import 关键字导入其他命名空间或模块。

typescript Copy code namespace MathUtils { export function multiply(a: number, b: number): number { return a * b; } }

namespace App { import multiply = MathUtils.multiply; console.log(multiply(2, 3)); // 输出：6 } 在使用命名空间时，还可以使用 namespace 关键字进行嵌套，以创建更复杂的命名空间结构。


namespace App {
  export namespace Utils {
    export function log(message: string): void {
      console.log(message);
    }
  }
}

App.Utils.log("Hello, TypeScript!"); // 输出：Hello, TypeScript!

命名空间还可以使用 /// 指令引用其他命名空间或模块的声明文件，以便在当前命名空间中使用其类型和成员。


/// <reference path="./utils.d.ts" />

namespace App {
  const result: number = Utils.add(2, 3);
  console.log(result); // 输出：5
}

总结： 模块化和命名空间是 TypeScript 中用于组织和管理代码的重要概念。模块化提供了一种将代码拆分为独立功能模块的机制，使得代码更具可维护性和可复用性。

avatar
文章
阅读
粉丝