TypeScript-去除null和undefined检测

简介: TypeScript-去除null和undefined检测

前言


先不管三七二十一,首先来看一个函数的定义,该函数的内部返回了一个函数的回调,主要作用就是获取一个字符串的长度,可是呢函数的入参是一个联合类型,如下:

function getLength(value: (string | null | undefined)) {
    value = 'abc';
    return () => {
        return value.length;
    }
}


报错的原因就是说,该函数的入参呢,有可能是 null 和 undefined 如果是 null 和 undefined 就没有 .length 这个属性所以编译器就会报错,那么这个问题呢,在之前是利用 || 进行解决的解决代码如下:

function getLength(value: (string | null | undefined)) {
    value = 'abc';
    return () => {
        return (value || '').length;
    }
}
let fn = getLength('yangbuyiya');
let res = fn();
console.log(res);


除了如上的方式进行解决以外,还有一种百试不爽的方式就是使用类型断言:

function getLength(value: (string | null | undefined)) {
    value = 'abc';
    return () => {
        return (value as string).length;
    }
}
let fn = getLength('yangbuyiya');
let res = fn();
console.log(res);


如上除了使用类型断言以外,还可以使用类型断言的简写方式来进行简化代码, 类型断言的简写方式就是在变量的后面加一个感叹号 !! 的含义就是告诉编译器,这个变量一定不是 nullundefined

function getLength(value: (string | null | undefined)) {
    value = 'abc';
    return () => {
        return value!.length;
    }
}
let fn = getLength('yangbuyiya');
let res = fn();
console.log(res);



最后

本期结束咱们下次再见👋~

🌊 关注我不迷路,如果本篇文章对你有所帮助,或者你有什么疑问,欢迎在评论区留言,我一般看到都会回复的。大家点赞支持一下哟~ 💗

相关文章
|
4月前
|
JavaScript
JS中Null和Undefined的区别及用法
JS中Null和Undefined的区别及用法
65 1
|
4月前
|
JavaScript 前端开发 算法
undefined与null的区别
在JavaScript中,undefined和null都表示变量未被赋值或值缺失,但它们在使用场景上有一些区别。 - **`语义不同`**:undefined表示一个变量未被赋值或者声明后未进行初始化。而null表示一个变量被明确地设置为无值或者表示空值的概念。 - **`类型不同`**:undefined是一种基本数据类型,而null是一个引用类型。 - **`条件判断`**:在条件判断中,使用if (variable === undefined)或者if (variable === null)可以进行区分。
|
7天前
|
机器学习/深度学习 JavaScript 前端开发
JavaScript typeof, null, 和 undefined
JavaScript typeof, null, 和 undefined
21 4
|
1月前
|
JavaScript
TypeScript——不能将类型“HTMLElement | null”分配给类型“HTMLElement”
TypeScript——不能将类型“HTMLElement | null”分配给类型“HTMLElement”
28 4
|
18天前
|
存储 JavaScript 前端开发
|
27天前
|
前端开发 JavaScript 开发者
JavaScript中的哲学难题:深入探讨undefined与null的情感纠葛
【8月更文挑战第23天】在Web前端开发中,理解和区分`undefined`与`null`至关重要。`undefined`表示变量已声明但未赋值,常出现在未初始化的变量或函数无返回值的情形;`null`则是开发者主动赋值的结果,意味着变量虽存在但值为空。虽然`undefined == null`为真,但`undefined === null`为假,表明它们在语义上有明显差异。合理使用两者能增强代码的健壮性和可读性,避免运行时错误。
23 0
|
28天前
|
JavaScript 前端开发 数据库
编程小白到高手:掌握null与undefined、JavaScript中隐藏的技巧曝光!
编程小白到高手:掌握null与undefined、JavaScript中隐藏的技巧曝光!
|
3月前
|
JavaScript 前端开发 开发者
JavaScript数据类型概述及Undefined与Null详解
JavaScript数据类型概述及Undefined与Null详解
|
3月前
|
JavaScript 前端开发 索引
JavaScript有7个数据类型:Number, String, Boolean, Null, Undefined, Symbol(BES6)和BigInt(ES10)组成基本类型
【6月更文挑战第25天】JavaScript有7个数据类型:Number, String, Boolean, Null, Undefined, Symbol(BES6)和BigInt(ES10)组成基本类型,而Object包括Array、Function等是引用类型。Objects可以包含键值对,Array是特殊的Object。Functions也是对象。`null`和`undefined`被视为特殊的原始值。
38 1
null、undefined和未声明变量的具体应用场景
null、undefined和未声明变量的具体应用场景