TypeScript 3.4-3.7 新增特性详解：可选链、空值合并与断言签名

作者：纸飞机时间：2026-10-24 10:26:01浏览：404

本文详细介绍 TypeScript 从 v3.4 到 v3.7 引入的七项核心功能，包括可选链操作符、空值合并运算符、递归类型别名、断言签名、Promise 错误提示优化、Unicode 标识符支持及增量编译。通过对比新旧版本代码示例，解析各特性在解决嵌套数据访问、类型保护及构建性能方面的实际应用场景。

TypeScript 持续演进，不断引入提升开发体验与代码安全性的新特性。

这些功能自 v3.7 版本起可用。

在处理深层嵌套数据结构时，开发者常面临访问路径过长且易出错的问题，嵌套层级越深，代码逻辑越显繁琐。

以访问 address 为例，传统方式需遍历 data.customer.address，且需处理 data 或 customer 可能为 undefined 的情况。通常需借助 && 运算符或类似技巧逐层检查各层级是否存在，代码冗长。

现在，开发者可使用 ?. 运算符进行选择性数据访问。该机制确保若链中任一父级对象未定义，则直接返回 undefined，从而避免运行时崩溃。


// v3.7 以前
if (data && data.customer && data.customer.address) {
   const {address} = data.customer
   const fullAddress = `${address.street}, ${address.city}, ${address.state }${address.zipcode}`
}

// v3.7

// data access
const address = data?.customer?.address
const fullAddress = `${address?.street}, ${address?.city}, ${address?.state } ${address?.zipcode}`

// 也适用于数组
customers?.[0]?.['address']

// 检查方法是否已定义并调用
customer.approve?.()

空值合并运算符提供了更精确的逻辑判断方式。

该功能同样自 v3.7 版本起可用。

空值合并运算符（??）是逻辑或运算符（||）的替代方案。当左侧操作数为 null 或 undefined 时，它返回右侧表达式。与 || 的区别在于：|| 是布尔或运算符，旨在返回第一个非 false 值。这可能导致意外结果，例如当数字 0 或空字符串作为有效输入时，会被误判为 false。


// 以前
passPhrase = data.inputString || 'Unknown'  //不会接受 "" (空字符串)
passCode =  data.number || '-1111' // 不会接受 0 
rememberMe = data.rememberFlag || true // 将会总是 true!!!


// 现在
passPhrase = data.inputString ?? 'Unknown'  //仅在 inputString 未定义时为 Unknown
passCode =  data.number ?? '-1111' // 0 可以通过
rememberMe = data.rememberFlag ?? true // false 是有效值

通过这种方式，可以明确区分 undefined 与 false 的值，确保 0 或空字符串等有效值不被错误覆盖。

递归类型别名解决了复杂数据结构的定义难题。

该功能自 v3.7 版本起可用。

现实世界中的许多数据类型具有递归特性。例如处理分层数据时，常发现相同类型数据的重复模式。JSON 是典型例子，其本质为哈希映射，而映射本身可包含另一个映射或映射数组。

在 v3.6 之前，若需定义简单的 JSON 类型，必须采用特定的接口与类型组合方式。


interface JSONObject { [x: string]: JSONValue; }
interface JSONArray extends Array<JSONValue> { }
type JSONValue = string | number | boolean | JSONObject | JSONArray

若尝试将第 1 行和第 2 行的类型在像第 3 那样内联，则可能出现以下错误：Type alias JSONValue circularly references itself。

在 v3.7 中，该问题已有效解决，开发者可以像下面这样简单地进行编码：


type JSONValue = string | number | boolean | { [x: string]: JSONValue } | Array<JSONValue>

断言签名增强了类型保护的能力。

该功能自 v3.7 版本起可用。

TypeScript 具备类型保护机制，可与 JavaScript 中的 typeof 和 instanceof 运算符良好配合。这有助于为函数参数添加前提条件，将其限制为特定类型。

让我们写一段把上面提到的这些东西都用到的代码，通过添加类型保护来确保给定的输入是日期，并从中提取年份：


function isDate(input: unknown) : asserts input is Date { 
  if (input instanceof Date) 
    return; 
  else 
    throw new Error('Input must be a Date!'); 
} 

function getYear(input: unknown) : number { 
  isDate(input); 
  return input.getFullYear()  // TypeScripts knows that input is Date 
} 


console.log(getYear(new Date('2019-01-01'))); 
console.log(getYear('2019-01-01'));

上面的代码看起来很不错，但 TypeScript 仍然会提示 getFullYear 在未知类型上不可用。

从 v3.7 开始，TypeScript 添加了一个名为 asserts 的新关键字，它能够使编译器从断言起就知道正确的类型。对于断言函数，应该添加 asserts <param> as <type> 而不是返回类型。

这样，如果断言通过，TypeScript 将假定参数是前面定义的类型。修改后的代码如下所示：


function isDate(input: unknown) : asserts input is Date { 
  if (input instanceof Date) 
    return; 
  else 
    throw new Error('Input must be a Date!'); 
} 

function getYear(input: unknown) : number { 
  isDate(input); 
  return input.getFullYear()  // TypeScripts knows that input is Date 
} 


console.log(getYear(new Date('2019-01-01'))); 
console.log(getYear('2019-01-01'));

Promise 错误反馈机制得到显著改进。

从 3.6 起改进。

在代码中直接使用 Promise 而忘记使用 await 或 then 是常见的错误，如下所示：


interface Customer {
    name: string
    phone: string
}

declare function getCustomerData(id: string): Promise<Customer>;
declare function payCustomer(customer: Customer): void;

async function f() {
    const customer = getCustomerData('c1')
    payCustomer(customer)
}

以前的 TypeScript 完全不了解 Promise，并显示一条与其无关的错误消息，如下所示：

TypeScript 持续演进，不断引入提升开发体验与代码安全性的新特性。