Typescript的类型守卫，类型转换，自定义守卫及其应用场景

Typescript的类型守卫，类型转换，自定义守卫及其应用场景

基本概念

首先，我们来谈谈类型守卫。在TypeScript中，类型守卫用于在运行时检查变量的类型。这些守卫可以是简单的类型检查，也可以是复杂的条件判断。通过类型守卫，我们可以在编程过程中更加精确地了解变量的类型，避免出现潜在的错误。

类型守卫有几种形式，包括类型断言、typeof操作符、instanceof操作符和自定义类型谓词。类型断言是一种告诉编译器某个变量的确切类型的方式。你可以使用尖括号语法（<Type>）或者as语法来进行类型断言。typeof操作符用于获取一个变量的类型字符串，比如"number"、"string"等，可以与条件语句结合使用来进行类型守卫。instanceof操作符用于检查一个对象是否属于某个类的实例。自定义类型谓词是一种自定义函数，它返回一个布尔值，用于在类型守卫中检查变量的类型。

接下来是类型转换。类型转换是一种将一个类型的值转换为另一个类型的过程。在TypeScript中，我们可以使用类型断言来进行类型转换。通过类型断言，我们告诉编译器某个变量的类型，使其在后续代码中被视为所断言的类型。需要注意的是，类型断言并不会在运行时对变量的值进行修改，它只是告诉编译器应该如何处理这个变量。

最后是自定义守卫。自定义守卫是一种通过自定义函数来进行类型守卫的方式。这些函数接收一个参数，并返回一个布尔值。在函数体内部，你可以根据需要进行复杂的条件判断，并返回相应的布尔值来指示变量的类型。

这些概念的真实应用场景非常广泛。比如，类型守卫可以帮助我们在处理联合类型时更好地理解和使用特定类型的属性和方法，避免不必要的类型错误。类型转换在需要将一个类型的值转换为另一个类型的场景下非常有用，比如从API返回的数据中提取特定字段并进行类型转换。自定义守卫可以根据具体业务需求，对特定类型进行更加精确的检查和判断，确保代码的健壮性和正确性。

类型守卫的应用

让我们更深入地探讨一下类型守卫的实际应用场景。

处理联合类型

处理联合类型：当一个变量具有联合类型（例如 string | number），我们可以使用类型守卫来检查变量的具体类型，并针对不同类型执行不同的操作。例如：

function processValue(value: string | number) {
  if (typeof value === 'string') {
    // 处理字符串类型
    console.log(value.toUpperCase());
  } else {
    // 处理数字类型
    console.log(value.toFixed(2));
  }
}

在上面的例子中，通过使用 typeof 进行类型守卫，我们可以在处理 value 之前检查它的类型，以便进行相应的操作。

判断对象的属性是否存在

判断对象的属性是否存在：当我们使用对象时，有时需要检查对象是否具有某个特定的属性。通过类型守卫，我们可以在编译时检查对象属性的存在性，并根据需要执行相应的操作。例如：

interface Car {
  brand: string;
  model: string;
  startEngine?: () => void;
}

function startCar(car: Car) {
  if (car.startEngine) {
    // 如果对象具有 startEngine 方法
    car.startEngine();
  } else {
    console.log("该汽车不支持远程启动功能。");
  }
}

在上面的例子中，我们使用类型守卫来检查 car 对象是否具有 startEngine 方法。如果存在，则调用该方法，否则输出一条信息。

自定义守卫

自定义守卫的实际应用场景也是多种多样的。这些守卫可以帮助我们根据业务需求对特定类型进行更复杂的检查和判断。

例如，假设我们有一个数组，其中包含不同类型的元素。我们希望从数组中提取所有数字类型的元素，并计算它们的总和。我们可以使用自定义守卫来过滤出数字类型的元素，然后进行计算。以下是一个简单的示例：

function sumNumbers(arr: (string | number)[]): number {
  let sum = 0;
  for (const item of arr) {
    if (isNumber(item)) {
      sum += item;
    }
  }
  return sum;
}

function isNumber(value: string | number): value is number {
  return typeof value === 'number';
}

在上面的例子中，isNumber 函数就是一个自定义守卫，它检查传入的值是否为数字类型，并返回相应的布尔值。在 sumNumbers 函数中，我们使用这个自定义守卫来过滤出数字类型的元素，并进行求和操作。

类型转换的应用

处理用户输入

处理用户输入：当我们从用户那里获取输入时，通常输入的数据都是字符串类型。但是，有时我们需要将这些字符串转换为其他类型，例如数字或日期。通过类型转换，我们可以确保数据的正确性，并进行后续的处理。例如：

function calculateSum(num1: number, num2: number) {
  return num1 + num2;
}

const userInput1 = '10';
const userInput2 = '5';

const number1 = Number(userInput1); // 使用类型转换将字符串转换为数字
const number2 = Number(userInput2);

const result = calculateSum(number1, number2);
console.log(result); // 输出：15

在上面的例子中，通过使用 Number() 函数将用户输入的字符串转换为数字，我们可以确保在计算总和时使用了正确的类型。

数据映射

数据映射：当我们从后端API获取数据时，有时数据的结构可能与我们需要的结构不完全匹配。通过类型转换，我们可以将获取到的数据转换为我们所需的数据结构。例如：

interface APIResponse {
  id: number;
  name: string;
  age: string;
}

interface User {
  id: number;
  name: string;
  age: number;
}

function mapAPIResponse(response: APIResponse): User {
  return {
    id: response.id,
    name: response.name,
    age: Number(response.age), // 将字符串类型的 age 转换为数字
  };
}

在上面的例子中，我们使用类型转换将 APIResponse 类型的数据转换为 User 类型的数据，其中将 age 字段从字符串类型转换为数字类型。

类型转换在处理数据时非常有用，可以确保我们在进行计算和处理时使用正确的类型。它们有助于提高代码的健壮性和可维护性。

进阶应用场景

让我们来进一步探讨类型守卫、类型转换和自定义守卫的实际应用场景。

处理异步操作

处理异步操作：在异步编程中，我们经常使用回调函数、Promise或async/await来处理异步操作。在这些情况下，类型守卫和类型转换可以帮助我们处理异步操作的结果类型。例如：

interface APIResponse {
  success: boolean;
  data: string | number;
}

function fetchData(): Promise<APIResponse> {
  // 模拟异步请求
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({ success: true, data: '42' });
    }, 2000);
  });
}

async function processResponse() {
  const response = await fetchData();

  if (response.success) {
    const numberData = Number(response.data); // 类型转换
    console.log(numberData * 2);
  } else {
    console.log('请求失败');
  }
}

processResponse();

在上面的例子中，我们通过异步请求获取到的数据包含在 APIResponse 对象中。通过类型守卫，我们检查 response 对象的 success 属性，然后使用类型转换将 data 属性从字符串转换为数字。

表单验证

表单验证：在前端开发中，我们经常需要对用户输入的表单数据进行验证。通过自定义守卫，我们可以编写自定义函数来检查表单数据是否符合特定的规则。例如：

interface LoginForm {
  username: string;
  password: string;
}

function validateLoginForm(data: any): data is LoginForm {
  return (
    typeof data === 'object' &&
    typeof data.username === 'string' &&
    typeof data.password === 'string'
  );
}

function submitForm(data: any) {
  if (validateLoginForm(data)) {
    // 表单数据有效，执行提交操作
    console.log('提交表单:', data);
  } else {
    console.log('表单数据无效');
  }
}

const formInput = {
  username: 'john',
  password: 'password123',
};

submitForm(formInput);

在上面的例子中，我们使用自定义守卫函数 validateLoginForm 来检查表单数据是否包含正确的属性和类型。如果验证成功，我们执行表单提交操作；否则，输出表单数据无效的消息。

 处理复杂数据结构

处理复杂数据结构：在处理复杂的数据结构时，类型守卫和类型转换可以帮助我们确保数据的正确性，并进行必要的操作。例如：

interface Person {
  name: string;
  age: number;
  address?: {
    street: string;
    city: string;
  };
}

function getCity(person: Person): string {
  if (person.address && typeof person.address.city === 'string') {
    return person.address.city;
  } else {
    return '未知城市';
  }
}

在上面的例子中，我们使用类型守卫来检查 person 对象中 address 属性是否存在，并且确保 city 属性是一个字符串类型。这样，我们可以安全地访问 city 属性，并返回正确的城市值。

 避免空值错误

避免空值错误：通过使用类型守卫，我们可以更好地处理可能为空的值，并避免空值错误。例如：

function getLength(value: string | null): number {
  if (value !== null) {
    return value.length;
  } else {
    return 0;
  }
}

在上面的例子中，我们使用类型守卫来检查 value 的值是否为 null。如果不为 null，则返回字符串的长度；否则，返回 0。

运行时类型检查

运行时类型检查：类型守卫和自定义守卫在运行时可以帮助我们进行类型检查，并采取相应的行动。例如：

interface Animal {
  name: string;
  makeSound: () => void;
}

function makeSound(animal: Animal): void {
  if ('makeSound' in animal && typeof animal.makeSound === 'function') {
    animal.makeSound();
  } else {
    console.log('无法发出声音');
  }
}

在上面的例子中，我们使用类型守卫检查 animal 对象是否具有 makeSound 方法，并且确保该方法是一个函数。如果满足条件，我们调用 makeSound 方法；否则，输出无法发出声音的消息。

 处理数组操作

处理数组操作：类型守卫和类型转换在处理数组操作时非常有用。例如，我们可以使用守卫来过滤出特定类型的元素，或者使用转换将数组中的元素转换为所需的类型。以下是一些例子：

function filterNumbers(arr: (string | number)[]): number[] {
  return arr.filter((item): item is number => typeof item === 'number');
}

function doubleNumbers(arr: number[]): number[] {
  return arr.map((item) => item * 2);
}

在上面的例子中，filterNumbers 函数使用类型守卫过滤出数组中的数字元素，而 doubleNumbers 函数将数组中的数字元素都乘以2。

类型推断和条件分支

类型推断和条件分支：通过使用类型守卫和类型转换，我们可以在条件分支中进行更精确的类型推断，以便编写更健壮的代码。例如：

function processValue(value: string | number | boolean) {
  if (typeof value === 'string') {
    // 在这个分支中，value 被推断为 string 类型
    console.log(value.toUpperCase());
  } else if (typeof value === 'number') {
    // 在这个分支中，value 被推断为 number 类型
    console.log(value.toFixed(2));
  } else {
    // 在这个分支中，value 被推断为 boolean 类型
    console.log(value ? '是' : '否');
  }
}

在上面的例子中，根据不同的条件分支，我们可以根据类型守卫的结果推断出 value 的具体类型，并进行相应的处理。

函数重载

函数重载：类型守卫和类型转换在函数重载中也起到重要的作用。通过为不同的参数类型定义不同的重载，我们可以根据参数类型的守卫来调用不同的函数实现。以下是一个简单的示例：

function processInput(value: string): string;
function processInput(value: number): number;
function processInput(value: string | number): string | number {
  if (typeof value === 'string') {
    return value.toUpperCase();
  } else {
    return value.toFixed(2);
  }
}

在上面的例子中，我们定义了两个函数重载，分别接受 string 和 number 类型的参数。通过类型守卫，我们可以在函数体中根据参数类型执行不同的逻辑。

这些实际应用场景展示了类型守卫、类型转换和自定义守卫的多样性和重要性。它们可以在许多不同的情况下提供类型安全性、代码可读性和灵活性。