瓶子笔记

TypeScript 中 null,undefined 和 void 的区别

2024-06-25 · 4 min read

在 ts 中的原始类型基本与在 js 中保持一致,但是 nullundefined 是有点区别的,它们跟新增的 void 类型也有点关联,所以这里给它们捋捋关系。

在 js 中,null 表示有值,但值为空 ,而 undefined 表示未定义,没有值 。但是在 ts 中,它们都是一个有具体意义的类型值。在没有开启 strictNullChecks 检查的情况下,它们可以成为其他类型的子类型,且可以互相赋值,示例如下:

let nul: null = null
let und: undefined = undefined

// 以下情况仅在 strictNullChecks 未开启时有效

// 可以互相被赋值
nul = undefined
und = null

// 可以被赋值给其他类型
let str1: string = null
let str2: string = undefined

在 js 中,如果一个函数最后没有显示 return 值,或者没有 return,那么默认返回的就是 undefined 。但是在 ts 中,情况变得不一样,如果函数没有 return 或者 return 为空,那么函数返回类型是 void ,除非手动 return 了 undefined,返回值类型才是 undefined,示例代码:

// 在 ts 中,func1 和 func2返回类型是 void
function func1() {}
function func2() {
	return
}
// 这里推导返回类型是 undefined,但是如果关闭 strictNullChecks,这里会被推导为 any
function func3() {
	return undefined
}

func3 函数显示 return 了 undefined ,推导返回类型就是 undefined,但是在关闭 strictNullChecks 情况,会被推导为 any,这种情况需要注意一下。

再说 void 类型,在 ts 中它表示空类型,如果函数没有返回值,即推导为 void 类型。在关闭 strictNullChecks 情况,nullundefined 都可以被赋值给 void 类型,如下:

// 返回 null,但是可以用 void 类型接
function func4(): void {
	return null
}
// null 和 undefined 可以赋值给 void 类型
const voidVar1: void = null
const voidVar2: void = undefined

所以说到这,有一个很关键的点就是 strictNullChecks 的开启关闭挺混淆概念的,有点乱。所以我觉得在生产开发中,应该始终开启 strictNullChecks 检查。

总结

在 ts 中,nullundefined 都是有意义的类型值,在开发中应始终开启 strictNullChecks 检查,当开启后,有如下表现: