typescript 不为空时赋值 typescript非空断言

转载

IT独行侠 2024-06-20 07:59:38

文章标签 typescript 不为空时赋值 typescript node.js 前端 es6 文章分类 TypeScript 前端开发

引言

标题：掌握TypeScript的非空断言和可选链：开发效率翻倍！
简短介绍：在TypeScript中，?和!操作符是提高代码安全性和开发效率的强大工具。本文将为你揭示它们的使用方式和最佳实践。

背景知识

易于理解的解释：在JavaScript中，处理空值和未定义值是常见的问题。TypeScript通过引入类型系统，提供了一些特殊的操作符来帮助我们更好地管理这些情况。

核心概念

非空断言（!）：用于告诉TypeScript编译器，某个变量是存在的，即使它可能是null或undefined。
可选链（?.）：允许你访问对象的嵌套属性，而不必担心对象的某个部分可能不存在。

简单示例

非空断言示例：

interface Person {
  name?: string;
}

const person: Person = { name: "Alice" };
const nameLength = person.name!.length; // 使用非空断言来获取名字长度

可选链示例：

interface Person {
  name?: string;
  address?: {
    city?: string;
  };
}

const person: Person = { name: "Alice" };

const city = person.address?.city; // 使用可选链来安全地获取城市名称

深入理解

工作原理：非空断言通过后缀!告诉TypeScript编译器，即使变量可能为null或undefined，你确信它有值。可选链通过?.操作符允许对可能不存在的对象属性进行访问，如果属性不存在，则返回undefined。

实际应用

案例研究：展示如何在一个复杂的对象结构中使用非空断言和可选链来简化代码并避免运行时错误。
当然，让我们通过一些更具体、更贴近实际的例子来进一步解释TypeScript中的非空断言（!）和可选链（?.）操作符，以便初学者能够更好地理解。

非空断言（`!`）实例

在TypeScript中，非空断言操作符!用于告诉编译器，某个变量虽然在类型上允许为null或undefined，但在当前上下文中，你确信它不是。

示例 1：使用非空断言来确保一个可能未定义的返回值。

function findNameById(id: number): string | undefined {
  // 假设这是一个复杂的查询，可能返回undefined
  const person = database.query(id);
  return person?.name; // 使用可选链安全地获取名字
}

const name = findNameById(1)!.toUpperCase(); // 使用非空断言，确信findNameById不会返回undefined

示例 2：处理从API获取的数据。

interface ApiResponse {
  data?: {
    name?: string;
  };
}

const response: ApiResponse = await fetchUserData();

// 假设我们确信API在成功时一定会返回data对象，并且data对象中一定有name属性
const name = response.data!.name; // 使用非空断言来获取名字

可选链（`?.`）实例

可选链操作符?.允许你访问对象的深层属性，而不用担心因为对象的某个中间层不存在而导致错误。

示例 1：访问用户对象中的地址信息。

interface User {
  profile?: {
    address?: {
      city?: string;
    };
  };
}

const user: User = {
  profile: {
    address: {
      city: "New York"
    }
  }
};

// 使用可选链来获取城市名称，如果profile或address不存在，city将为undefined，而不是抛出错误
const city = user.profile?.address?.city;

示例 2：处理一个复杂的嵌套对象。

interface Product {
  name: string;
  details?: {
    manufacturer?: {
      foundedYear?: number;
    };
  };
}

const product: Product = {
  name: "Laptop",
  details: {
    manufacturer: {
      foundedYear: 1992
    }
  }
};

// 使用可选链来安全地访问制造商的成立年份
const foundedYear = product.details?.manufacturer?.foundedYear;

在这些示例中，我们尽量避免了复杂的逻辑，专注于展示如何在实际代码中应用非空断言和可选链操作符。通过这些例子，初学者可以更直观地理解这两个操作符的用途和它们如何帮助编写更安全、更简洁的代码。同时，这些示例也展示了在实际编程中如何避免常见的错误，比如运行时的null或undefined错误。

请记住，非空断言是一种断言，它告诉TypeScript编译器你的确定性，但如果使用不当，可能会导致运行时错误。因此，使用非空断言时需要格外小心，确保你对变量的值有足够的了解和信心。而可选链是一种更安全的方式，它允许变量链在任意点中断，并返回undefined，这是一种更防御性的编程方式。