0
点赞
收藏
分享

微信扫一扫

TypeScript 基础 — Null 和 Undefined

​null​​​ 和 ​​undefined​​​ 都有各自的类型名称。这些类型本身没有用处,因为我们只能将 ​​null​​​ 和 ​​undefined​​​ 赋值给定义为 ​​null​​​ 或 ​​undefined​​ 类型的变量。

let u: undefined = undefined
u = 'string' // compile error

let n: null = null
n = 43 //compile error

默认情况下,​​null​​​ 和 ​​undefined​​​ 是所有类型的子类型。 就是说可以把 ​​null​​​ 和 ​​undefined​​​ 赋值给 ​​number​​ 类型的变量。

let value: string | undefined | null = null
value = 'hello'
value = undefined

注意:默认情况下,将禁用 ​​null​​​ 和 ​​undefined​​​ 处理,我们可以通过在 ​​tsconfig.json​​​ 文件将 ​​strictNullChecks​​​ 设置为 ​​true​​​ 来启用。当启用 ​​strictNullChecks​​ 时,本文的示例才能正常运行。

可选链

可选链接是一种 JavaScript 功能,它与 TypeScript 的空处理配合得很好。它允许使用紧凑的语法访问对象上的属性,这些属性可能存在,也可能不存在。它可以和 ​?.(可选链)运算符访在问属性时一起使用。

interface User {
name: string
address?: {
street: string
}
}

function printStreet(user: User) {
const streetInfo = user.address?.street
if (streetInfo === undefined) {
console.log('No street info')
} else {
console.log(streetInfo)
}
}

let user: User = {
name: 'O.O'
}

printStreet(user) // 'No street info'

空值合并

空值合并是另一个 JavaScript 特性,它也可以很好地与 TypeScript 的空处理配合使用。

它允许编写在处理 ​​null​​​ 或 ​​undefined​​ 时有回退的表达式。当表达式中可能出现其他 falsy 值,但这些值仍然有效时,这非常有用。

它可以与表达式中的 ​??(空值合并运算符)一起使用,类似于使用 ​&&(与运算符)

function printName(name: string | null | undefined) {
console.log(`${name ?? '无名氏'}`)
}

printName(null) // '无名氏'
printName('O.O') // 'O.O'

空断言

TypeScript 的推理系统并不完美,有时候忽略一个值为 ​​null​​​ 或 ​​undefined​​​ 的可能性是有意义的。一个简单的方法就是使用类型转换,但是 TypeScript 也提供了 ​​!​​ 运算符作为方便的快捷方式。

function getValue(): string | undefined {
return 'hello'
}

let value = getValue()

value.length // value 可能为 undefined
// 使用 ! 运算符
value!.length // 5

就像类型转化一样,这可能是不安全的,应该小心使用。

数组边界处理

即使启用了 ​​strictNullChecks​​​,默认情况下 TypeScript 也会假定数组访问永远不会返回 ​​undefined​​​(除非 ​​undefined​​ 是数组类型的一部分)。

let array: number[] = [1, 2, 3]
let value = array[0] // value 的类型为 number

我们可以配置 ​​noUncheckedIndexedAccess​​ 来更改此行为。

let array: number[] = [1, 2, 3]
let value = array[0] // value 的类型为 number | undefined

举报

相关推荐

0 条评论