4.2.3.3 框架与库 —— 类型系统

在现代前端构建工具的支持下，我们可以使用很多现代化的框架来写一些原生的写法不支持的特性。这些特性可以提供加强的功能，方便我们的开发标准化和提高可用性和健壮性。

现代 JavaScript 框架的到来加快了打造高度动态化和交互性强的应用程序的速度。框架就是提供该如何构建应用程序的意见的库。这些意见能使应用具有可预测性和同质性。可预测性让软件能在扩展到很大规模的同时仍保持可维护性。可预测性和可维护性对于一个软件的长久健康运行是十分重要的。 from MDN: 客户端框架介绍

接下来是我们需要使用的框架和库的介绍。这一节我们介绍 TypeScript。它是一门基于 JS 的语言，在实际应用中更接近库的地位 —— 因为它需要使用一个编译器来进行类型检查和编译到 JS。

TypeScript 类型系统

虽然我们学习了 JavaSript，但是在项目中大家也喜欢用 TypeScript。

TypeScript 不是一门全新的语言，而是在 JavaScript 的基础上加上了类型系统，增加了静态类型检查功能，允许我们在编译时捕捉到类型错误，提高代码的安全性和可维护性。

接下来是 GPT 给的入门，我觉得暂时用用够了。遇到问题就请查 TypeScript: Handbook (英文)：

1. 基础类型

TypeScript 扩展了 JavaScript 的类型系统。最基本的类型有：

• number ：数字类型
• string ：字符串类型
• boolean ：布尔类型
• array ：数组类型（写作方式可以是 number[] 或 Array<number> ）
• tuple ：元组类型，用于固定长度和类型的数组
• enum ：枚举类型，用于定义一些命名的常量
• any ：可以赋予任何类型
• void ：用于没有返回值的函数
• unknown ：表示未知类型
• never ：表示不会有返回值的函数类型，比如抛出异常

let count: number = 5;
let username: string = 'Alice';
let isActive: boolean = true;
let numbers: number[] = [1, 2, 3];
let tuple: [number, string] = [1, 'Alice'];
enum Direction { Up, Down, Left, Right }

2. 接口（Interface）

接口用于定义对象的形状，可以描述对象的属性和方法。

interface User {
  name: string;
  age: number;
  isActive: boolean;
  greet(): string;
}

const user: User = {
  name: 'Alice',
  age: 25,
  isActive: true,
  greet() {
    return `Hello, ${this.name}`;
  }
};

3. 类（Class）

TypeScript 支持面向对象编程的类和继承。

class Person {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
  greet() {
    return `Hello, ${this.name}`;
  }
}

class Student extends Person {
  grade: number;
  constructor(name: string, grade: number) {
    super(name);
    this.grade = grade;
  }
  getGrade() {
    return `Grade: ${this.grade}`;
  }
}

const student = new Student('Alice', 1);
console.log(student.greet());
console.log(student.getGrade());

4. 泛型（Generics）

泛型允许你定义可以处理任意类型的函数或类。

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

let output1 = identity<string>('Hello');
let output2 = identity<number>(42);

5. 类型推断和联合类型

TypeScript 能自动推断变量的类型，也可以使用联合类型来表示多种可能的类型。

let value: number | string;
value = 123;
value = 'Hello';

6. 类型别名（Type Aliases）

类型别名可以为复杂的类型创建一个简单的名称。

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

7. 类型断言（Type Assertions）

类型断言告诉 TypeScript 你比它更清楚某个值的类型。

let someValue: any = 'This is a string';
let strLength: number = (someValue as string).length;

8. 模块化（Modules）

TypeScript 支持模块系统，可以通过 import 和 export 语法来导入或导出功能。

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

// main.ts
import { add } from './module';
console.log(add(2, 3));

9. 类型守卫（Type Guards）

类型守卫用于在运行时检查某个值的类型。

function isString(value: any): value is string {
  return typeof value === 'string';
}

function print(value: number | string) {
  if (isString(value)) {
    console.log(`String: ${value}`);
  } else {
    console.log(`Number: ${value}`);
  }
}

通过不断练习和构建项目，逐渐掌握这些概念，你就能在实际开发中灵活运用 TypeScript！

安装方式

我们前面提到的构建工具在初始化的时候已经使用了 TypeScript 选项。所以我们直接使用 .ts 文件后缀名或者 .tsx (React JSX 文件 TypeScript 版) 即可。