TypeScript 常用高级类型

最新推荐文章于 2024-03-12 16:54:42 发布

冰海恋雨.

最新推荐文章于 2024-03-12 16:54:42 发布

阅读量1.3k

点赞数 34

分类专栏： ts 文章标签： typescript javascript 前端

本文链接：https://blog.csdn.net/m0_64590669/article/details/134940019

版权

ts 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1. 交叉类型（Intersection Types）

2. 联合类型（Union Types）

3. 映射类型（Mapped Types）

4. 条件类型（Conditional Types）

5. 可辨识联合（Discriminated Unions）

6. 映射类型（Template Literal Types）

前言：

"TS" 是 TypeScript 的缩写，TypeScript 是一种由微软开发的开源编程语言。它是 JavaScript 的一个超集，意味着 TypeScript 包含了 JavaScript 的所有特性，并且在此基础上添加了静态类型和其他一些额外的特性。

TypeScript 常用高级类型

TypeScript（TS）是一种强类型超集 JavaScript 语言，它在前端开发中提供了强大的类型检查和类型抽象工具。其中，高级类型是 TypeScript 的一项强大功能，它们可以帮助我们处理复杂的数据结构、函数签名和类型变换。在本文中，我们将深入研究前端开发中的 TypeScript 常用高级类型，包括交叉类型、联合类型、映射类型、条件类型和更多。

基本概念

在探索 TypeScript 的高级类型之前，让我们回顾一下几个基本的类型概念。

基本类型： TypeScript 包括像 number、string、boolean 这样的基本类型，它们表示简单的数据。
对象类型： 可以使用对象字面量、接口、类等定义对象类型。
数组和元组： TypeScript 具有内置的数组类型和元组类型，用于处理集合数据。
函数类型： TypeScript 支持函数类型，包括参数类型和返回值类型。

高级类型

1. 交叉类型（Intersection Types）

交叉类型用于将多个类型合并为一个类型。它通过 & 运算符实现，将多个类型的属性和方法合并在一个新类型中。

type User = { name: string; age: number };
type Admin = { role: string; isAdmin: true };

type SuperUser = User & Admin;
// SuperUser 类型包含了 User 和 Admin 类型的属性

2. 联合类型（Union Types）

联合类型用于表示一个值可以属于多个类型之一。它通过 | 运算符实现。

type Result = number | string;
// Result 变量可以存储数字或字符串

3. 映射类型（Mapped Types）

映射类型允许您通过旧类型的属性来创建新类型。它通常与泛型一起使用，可以用于批量更改或添加属性。

type Options = {
  readonly id: number;
  title?: string;
};

type MutableOptions = {
  -readonly [P in keyof Options]: Options[P];
};
// MutableOptions 移除了 id 属性的只读修饰符，但保留了其他属性

4. 条件类型（Conditional Types）

条件类型是 TypeScript 中的高级类型，它允许根据条件选择不同的类型。它常用于泛型和复杂类型逻辑。

type IsString<T> = T extends string ? true : false;
type A = IsString<string>; // true
type B = IsString<number>; // false

5. 可辨识联合（Discriminated Unions）

可辨识联合是一种用于处理不同类型的数据的高级模式。它通过一个共同的字段来标识不同的类型。

interface Circle {
  kind: "circle";
  radius: number;
}

interface Square {
  kind: "square";
  sideLength: number;
}

type Shape = Circle | Square;

function getArea(shape: Shape) {
  if (shape.kind === "circle") {
    return Math.PI * shape.radius ** 2;
  } else {
    return shape.sideLength ** 2;
  }
}

6. 映射类型（Template Literal Types）

Template Literal Types 是 TypeScript 4.1 引入的，它们允许你将字符串字面量类型与模板字符串相结合，以生成新的字符串类型。

type Greeting = "Hello, " | "Hi, ";
type Name = "Alice" | "Bob";

type Welcome = `${Greeting}${Name}`;
// Welcome 类型是 "Hello, Alice" | "Hello, Bob" | "Hi, Alice" | "Hi, Bob"

7. 预定义条件类型

TypeScript 4.1 引入了一些预定义的条件类型，如 Extract、Exclude 和 ReturnType，它们可以用于提取类型信息、排除不需要的类型或获取函数的返回类型。

type T = Extract<"a" | "b" | "c", "a" | "c">; // "a" | "c"
type U = Exclude<"a" | "b" | "c", "a" | "c">; // "b"
type F = ReturnType<() => string>; // string

应用场景

高级类型在前端开发中有许多应用场景，包括：

复杂数据处理： 交叉类型和联合类型可用于处理复杂的数据结构，如 API 响应和组合数据。
类型安全的状态管理： 可辨识联合可用于构建类型安全的状态管理，如 Redux 中的动作。
动态组件： 映射类型和条件类型可用于构建动态组件或高阶组件。
字符串操作： Template Literal Types 可用于字符串操作，如国际化和路由生成。
预定义条件类型： 预定义条件类型使代码更加可读和类型安全。

注意事项

高级类型是强大的工具，但在使用它们时需要小心谨慎。过度复杂的类型可能会导致难以理解和维护的代码。在项目中选择适当的类型抽象和高级类型取决于您的需求和团队的约定。

结语

TypeScript 的高级类型是前端开发中的强大工具，可以帮助我们处理复杂的数据结构、构建类型安全的应用程序和提高代码的可维护性。通过深入研究交叉类型、联合类型、映射类型、条件类型等，您可以更好地应用它们在实际项目中。希望这篇文章有助于您深入了解 TypeScript 的高级

特点

TypeScript 主要的特点包括：

静态类型：TypeScript 引入了静态类型系统，允许开发者在编写代码时定义变量、函数参数和返回值的类型。这有助于在编译时发现潜在的类型错误，提高了代码的健壮性和可维护性。
类型推断：TypeScript 能够根据赋值操作的值推断出变量的类型，这使得在声明变量时不必显式指定类型，从而简化了代码。
增强的工具支持：TypeScript 提供了更好的编辑器支持和工具集成。许多流行的编辑器（如 VS Code、Sublime Text 等）都支持 TypeScript，能够提供代码补全、错误检查、重构等功能。
ECMAScript 标准支持：TypeScript 严格遵循 ECMAScript 标准，支持最新的 JavaScript 特性和语法，开发者可以在 TypeScript 中使用 ECMAScript 6、7、8 等版本的语法。
面向对象编程的支持：TypeScript 支持面向对象编程的特性，包括类、接口、模块等，使得代码结构更加清晰和易于组织。
编译时类型检查：TypeScript 在编译阶段进行类型检查，能够发现潜在的类型错误，减少在运行时出现的错误。