TypeScript 中 Strict Null Checks 的理解和使用

引言

TypeScript 是目前前端工程师们使用最广泛的静态类型语言之一，有着流行的原因。TypeScript 具有更好的代码补全、更高的可靠性和更好的可维护性。然而，虽然 TypeScript 有很多优点，但是它并不是完美的。 strict null checks 是 TypeScript 2.0 中引入的一个新的特性，它提高了 TypeScript 的可靠性，但是同时也带来了一些挑战，需要在使用时注意细节。这篇文章将详细讲解 strict null checks 在 TypeScript 中的使用和相关知识点。

什么是 strict null checks

strict null checks 是 TypeScript 引入的一项新功能，目的是在编译期强制检查变量是否为 null 或 undefined, 并禁止在没有进行判断的情况下对这些变量进行操作。这里的检查不仅包括检查变量的值是否为 null 或 undefined,还包括变量的类型是否允许这些值。

如何启用 strict null checks

默认情况下，TypeScript 没有启用 strict null checks，在 tsconfig.json 文件中需要添加一个选项 'strictNullChecks' 以启用。该选项可以为 true 或 false，如果为 true 则启用严格的空检查。

下面是一个启用了 strict null checks 的 tsconfig.json 示例。

-
  ------------------ -
    --------- ------
    --------- -----------
    ------------------- -----
    --------- ----
  -
-

如何使用 strict null checks

在启用 strict null checks 后，一些常见的操作就会出现错误。比如我们常常用到的声明变量时不进行初始化的操作，在启用 strict null checks 后就会提示错误：

--- -- -------
---------------

TypeScript 编译时会提示 “Variable 'a' is used before being assigned.” 错误，提示变量 a 未初始化。修复方法是给变量 a 赋值即可。这是 TypeScript 通过启用 strict null checks 可以帮助我们发现的潜在错误。

此外，在 TypeScript 中进行属性访问操作也可能会报错。比如下面的代码：

--- -- - ------ ------ - - ---
---------------------------

这段代码会提示错误 “Object is possibly 'undefined'.”。虽然我们看到了 x 对象中定义了 test 属性，但是 test 属性是可选的，也就是说 x.test 可能是 undefined，而 undefined 并没有 length 属性。这种情况下可以使用 optional chaining （可选链操作符）来避免错误。

--- -- - ------ ------ - - ---
----------------------------

可选链操作符会在访问属性或者方法之前判断对象是否为null或undefined，如果是则直接返回undefined。

操作符

在启用 strict null checks 后，我们需要额外注意一些操作符的使用。

非空断言操作符

非空断言操作符 “!” 表示变量不为 null 或 undefined，比如下面的代码： 

--- -- ------ - --------- - --------
-----------------------

上面的代码添加了非空断言操作符 “!”，来告诉 TypeScript 变量 x 是有值的，不会是 null 或 undefined。如果变量为 null 或 undefined，运行时会抛出异常。

注意，因为使用非空断言操作符可能导致运行时出现异常，所以不建议滥用。

类型断言操作符

类型断言 “as” 也可以用来避免 strict null checks 的错误：

--- -- ------ - --------- - ----------
-------------- -- ----------------

上面的代码强制将 x 的类型断言为字符串类型，这样访问 length 属性就不会报错了。然而需要注意的是，类型断言操作符也可能会导致无关的错误，所以也要注意使用。

实际应用

strict null checks 可以帮助我们发现代码中潜在的错误，提高代码的可靠性，但是在实际开发中 strict null checks 还有其他的应用。

排除潜在错误

我们可以通过 strict null checks 来跟踪变量的类型是否允许 null 或 undefined，进而发现潜在的错误。例如，下面的代码中，TypeScript 能够发现 getMarried 函数可能会返回 null 或 undefined：

-------- --------------------- --------- - ----------- ------ - - --------- -
  -- ----------- -
    ------ - ----------- ------- --
  -
-

----- ---------- - ------------------------------------

在上面的代码中，getMarried 函数有一个 isMarried 参数。如果 isMarried 的值为 true，函数返回一个具有 spouseName 属性的对象，否则函数返回 undefined。我们使用了可选链操作符来避免 undefined 的错误，但是使用 strict null checks 后，TypeScript 还可以帮助我们检测到 getMarried 函数返回 undefined 的潜在情况，我们可以通过下面的代码来达到同样的效果并预防这种潜在错误：

-------- --------------------- --------- - ----------- ------ - -
  -- ----------- -
    ------ - ----------- ------- --
  -
  ------ - ----------- -- --
-

----- ---------- - ------------------------------------

在上面的代码中，getMarried 函数的返回类型变成了 { spouseName: string }，这样 TypeScript 就不能将函数的返回值当作 null 或 undefined 了，此时代码运行不会出错。

函数默认值

strict null checks 还可以帮助我们编写更好的函数默认值。在 TypeScript 中，我们可以在函数参数中指定参数的类型和默认值。例如，下面的代码是一个简单的函数：

-------- ----------- ------ - -------- -
  ------ ------- ----------
-

不过对于可能是 null 或 undefined 的参数，我们需要特别处理。下面的代码则可以处理入参可能为 null 或 undefined 的函数，并给一个默认值：

-------- ------------ ------- -
  ----- ------- - ------- ------ -- -----------
  ------ --------
-

在上面的代码中，我们通过可选链操作符 ?? 指定了默认值，而且 TypeScript 还可以通过类型检查确保 name 为 string | undefined 类型。这样，就能够避免发生潜在错误。

结论

通过本文，我们了解了 strict null checks 的基本知识，并在实际应用中使用了相关的操作符和语法，发现并避免了代码中的潜在错误。这可以为我们编写高质量的代码提供一定的帮助。

示例代码

下面是本文中提到的所有代码示例。

--- -- -------
---------------

--- -- - ------ ------ - - ---
---------------------------

--- -- - ------ ------ - - ---
----------------------------

--- -- ------ - --------- - --------
-----------------------

--- -- ------ - --------- - ----------
-------------- -- ----------------

-------- --------------------- --------- - ----------- ------ - - --------- -
  -- ----------- -
    ------ - ----------- ------- --
  -
-

----- ---------- - ------------------------------------

-------- --------------------- --------- - ----------- ------ - -
  -- ----------- -
    ------ - ----------- ------- --
  -
  ------ - ----------- -- --
-

----- ---------- - ------------------------------------

-------- ----------- ------ - -------- -
  ------ ------- ----------
-

-------- ------------ ------- -
  ----- ------- - ------- ------ -- -----------
  ------ --------
-

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6710e775ad1e889fe2fca8a6

阅读全文

猜你喜欢

  • Redis 使用过程中常见的错误及解决方案

    Redis 简介 Redis（Remote Dictionary Server）是一个开源的高性能键值存储数据库。它支持多种数据结构，如字符串、列表、哈希表、集合等，并提供多种操作这些数据结构的命令。

    9 天前
  • Tailwind CSS 中实现自适应尺寸的背景图

    Tailwind CSS 中实现自适应尺寸的背景图 在构建现代 Web 应用时，难免需要使用一些背景图片来作为页面的装饰或呈现更好的视觉效果。然而，对于不同宽高比的设备来说，如何保证背景图片自适应至关...

    9 天前
  • 处理 Node.js 应用程序中出现的故障的最佳实践

    在开发 Node.js 应用程序时，难免会遇到一些故障。故障可能是由代码错误、网络问题、I/O 操作等引起的。如果处理不当，这些故障可能会导致程序崩溃或出现其他严重问题。

    9 天前
  • ECMAScript 2017 增强的 Async Function

    随着 JavaScript 在前端开发中越来越广泛地应用，异步编程技术也变得越来越重要。在 ECMAScript 2017 中，该规范增加了一种新的特性——Async Function ，它能够轻松地...

    9 天前
  • Sequelize 常见错误及解决方式

    引言 Sequelize 是 Node.js 中一款十分受欢迎的 ORM（Object-Relational Mapping）框架，它可以帮助我们更加轻松地操作数据库，减少开发者的开发成本和学习成本。

    9 天前
  • Next.js 的 CSR 和 SSR 区别及如何选择？

    在前端开发中，网站的渲染方式是一个重要的话题。现在，前端开发人员可以使用多种不同的渲染方式，包括客户端渲染（CSR）和服务器端渲染（SSR）。对于使用 React 框架的开发者来说，Next.js 已...

    9 天前
  • Docker 部署 Nginx：优雅地解决静态文件问题！

    概述 Docker 是一种轻量级容器技术，可以帮助我们快速搭建复杂的应用程序。Nginx 是一种高性能的 Web 服务器，可以处理静态文件，反向代理和负载均衡等任务。

    9 天前
  • 异步编程优化方案：Promise.all() 的使用与注意事项

    在现代前端的开发中，异步编程已经是家常便饭。异步编程的涉及范围非常广泛，其中包括了网络请求、DOM 操作、事件监听等等。而在异步编程中，有时我们需要同时执行多个异步任务，并对这些任务都执行完成后再进行...

    9 天前
  • Hapi 和 Express 的比较：选择哪个框架更适合你的 Node.js 应用

    Node.js 是现代 Web 应用程序开发的流行技术之一。它是一个开源 JavaScript 运行时，可在服务器端运行 JavaScript 代码。由于其灵活性和可扩展性，Node.js 受到越来越...

    9 天前
  • 如何使用 Tailwind CSS 定位 HTML 元素

    在前端开发中，CSS 是不可或缺的技术之一。随着 Web 技术的发展和需求的增加，CSS 的定位技术也不断地更新和优化。而 Tailwind CSS 是一个理念独特、功能强大的 CSS 框架，它可以大...

    9 天前
  • 开发人员必须知道的 GraphQL 基础知识

    在现代前端开发中，Web 应用程序的数据层变得越来越复杂。随着数据来源的不断增加，组织和管理数据变得越来越困难。GraphQL 是一个查询语言，它可以帮助我们优化请求数据的方式，简化数据获取的过程。

    9 天前
  • 如何使用 LESS 实现鼠标悬停时的元素动画效果?

    对于前端开发人员来说，实现鼠标悬停的元素动画效果是一项基础而又常见的任务。有很多种方法能够实现这一效果，但是本篇文章将介绍如何使用 LESS 预处理器实现这一任务。

    9 天前
  • TypeScript 中的多态使用详解

    多态是面向对象编程中的重要概念，它指的是同一行为（方法）在不同的对象上具有不同的实现方式。在 TypeScript 中，多态可以通过接口和类继承来实现。本文将深入探讨 TypeScript 中的多态使...

    9 天前
  • CSS Grid 布局：响应式网页设计的下一步

    在过去的网页设计中，我们通常使用 float 或 position 等技术来排版网页和布局内容。但这些技术常常需要大量的代码和调整，还容易出现兼容性问题。于是，CSS Grid 布局应运而生，成为响应...

    9 天前
  • 使用 Node.js 解决路由传递的问题

    随着前端开发的不断发展，越来越多的 web 应用程序采用了单页应用 (Single Page Applications)，它们通常运行在浏览器中，通过 JavaScript 代码的大量使用来完成页面的...

    9 天前
  • 使用 React 框架构建现代 Web 应用

    React 是一个非常流行的 JavaScript 库，用于构建前端用户界面。它有许多强大的功能，包括虚拟 DOM，组件化开发和声明式编程，使得它非常适合构建现代 Web 应用。

    9 天前
  • ECMA 2017 规范，如何实现完全模块化的 TypeScript 架构

    ECMA 2017是最新的JavaScript语言规范，可以实现一些先进的特性，特别是在TypeScript中，可以通过ECMA 2017的特性实现完全模块化的架构。

    9 天前
  • Hapi 手册：实现路由、验证和缓存

    Hapi 是一个专业的 Node.js 框架，可帮助开发人员构建可伸缩的 Web 应用程序。与 Express 不同，Hapi 提供了更丰富和强大的 API，以及更高度的可扩展性和可重用性。

    9 天前
  • 使用 Kubernetes 部署多个应用的最佳实践

    随着互联网应用的发展，部署多个应用已经成为了前端开发中的常见问题。而 Kubernetes 作为一种可扩展的容器编排系统，可以提供强大的部署和管理多个应用的能力。本文将分享使用 Kubernetes ...

    9 天前
  • 利用 Angular-resource 实现 HTTP 请求及错误处理

    在前端开发中，经常需要向服务器发送 HTTP 请求来获取数据或执行一些操作。AngularJS 是一个非常流行的前端框架，其中 Angular-resource 是一个非常简单易用的模块，用于管理通过...

    9 天前

相关推荐

    暂无文章