【译】JavaScript和TypeScript中的void

简介: 【译】JavaScript和TypeScript中的void

640.jpg


原文地址:https://fettblog.eu/void-in-javascript-and-typescript/

原文标题:void in JavaScript and TypeScript


- 正文开始 -


如果你是从传统的强类型语言转到JavaScript来的,那么你可能熟悉void的概念:一种类型,它告诉你函数和方法在调用时不返回任何内容。

void在JavaScript中作为运算符存在,在TypeScript中作为基本类型存在。在JS和TS中,void的用法和大多数人习惯的有所不同。


JavaScript中的void


JS中的void是一个运算符,它对紧跟其后的表达式求值。不管是什么表达式,void总是返回undefined


let i = void 2; // i === undefined


为什么我们需要这么写?这是因为在早些时候,人们可以重写undefined,并且给它一个特定的值。void总是返回真正的undefined

另外,void是一种调用立即执行函数的不错的方式。


void function() {   console.log('What')}()


可以避免污染全局命名空间:


void function aRecursion(i) {   if(i > 0) {       console.log(i--)       aRecursion(i)   }}(3)
console.log(typeof aRecursion) // undefined


由于void总是返回undefined,并且void总是会对表达式求值,所以有一个非常简单的方法,从函数返回而不返回值,但是仍然调用回调函数:


// returning something else than undefined would crash the appfunction middleware(nextCallback) {   if(conditionApplies()) {       return void nextCallback();   }}


我认为,void最重要的用法:因为void总是返回undefined,他是你app安全的守护者。


button.onclick = () => void doSomething();


TypeScript中的void


TypeScript中的voidundefined的子类型。JS中的函数总会有返回,要么是一个具体的值,要么是undefined.


function iHaveNoReturnValue(i) {  console.log(i)} // returns undefined


在JS中,如果没有具体的返回值的函数会返回undefined,并且void总是会返回undefined,TS中的void是y一个合适的类型,告诉开发人员此函数返回undefined


declare function iHaveNoReturnValue(i: number): void


void作为一个类型,也可以用在函数参数和其他的声明上。唯一可以传入的值是void


declare function iTakeNoParameters(x: void): void
iTakeNoParameters() // 👍iTakeNoParameters(undefined) // 👍iTakeNoParameters(void 2) // 👍

voidundefined几乎是一样的。但是还是有一点不同,这个区别是十分重要的:

void作为返回类型可以用不同的类型替换,以允许高级回调模式:


function doSomething(callback: () => void) { let c = callback() // at this position, callback always returns undefined //c is also of type undefiend}
// this function returns a numberfunction aNumberCallback(): number { return 2;}
// works 👍 type safety is ensured in doSometingdoSomething(aNumberCallback)


如果你想确保只能传入返回undefined的函数,调整你的回调函数类型:


- function doSomething(callback: () => void) {+ function doSomething(callback: () => undefined) { /* ... */ }
function aNumberCallback(): number { return 2; }
// 💥 types don't matchdoSomething(aNumberCallback)


现在,在大多数时候,你都可以很好的处理void了。

- 正文结束 -

相关文章
|
3月前
|
前端开发 JavaScript 安全
javascript:void(0);用法及常见问题解析
【6月更文挑战第3天】JavaScript 中的 `javascript:void(0)` 用于创建空操作或防止页面跳转。它常见于事件处理程序和超链接的 `href` 属性。然而,现代 web 开发推荐使用 `event.preventDefault()` 替代。使用 `javascript:void(0)` 可能涉及语法错误、微小的性能影响和XSS风险。考虑使用更安全的替代方案,如返回 false 或箭头函数。最佳实践是保持代码清晰、安全和高性能。
125 0
|
4月前
|
JavaScript 前端开发 安全
使用TypeScript增强JavaScript应用的类型安全性
【5月更文挑战第23天】TypeScript是微软开发的JavaScript超集,引入静态类型检查和面向对象特性,提升代码可维护性和可靠性。它在编译阶段捕获类型错误,增强代码可读性,并通过接口、类、泛型和类型断言等工具确保类型安全。使用TypeScript能有效避免复杂项目中的调试难题,尤其适合大型项目。
|
13天前
|
JavaScript 前端开发
JavaScript / TypeScript日期格式化(dateFormat)
这篇文章介绍了如何在TypeScript中创建和使用一个日期格式化函数`dateFormat`,支持多种日期格式的自定义,并提供了函数的实现代码和使用示例。
JavaScript / TypeScript日期格式化(dateFormat)
|
11天前
|
JSON JavaScript 前端开发
如何使用代码注释:关于JavaScript与TypeScript
TSDoc是一种标准化TypeScript代码文档注释的规范,使不同工具能无干扰地提取内容。它包括多种标记,如@alpha、@beta等发布阶段标记;@decorator、@deprecated等功能标记;@defaultValue、@eventProperty等描述标记;@example、@experimental等示例与实验性标记;@inheritDoc、@internal等引用与内部标记;@label、@link等链接标记;@override、@sealed等修饰符标记;以及@packageDocumentation、@param、
22 5
|
21天前
|
JavaScript 前端开发 安全
揭秘TypeScript的魔力:它是如何华丽变身为JavaScript的超能英雄,让您的代码飞入全新的编程维度!
【8月更文挑战第22天】在Web开发领域,JavaScript是最主流的编程语言之一。但随着应用规模的增长,其类型安全和模块化的不足逐渐显现。为解决这些问题,微软推出了TypeScript,这是JavaScript的一个超集,通过添加静态类型检查来提升开发效率。TypeScript兼容所有JavaScript代码,并引入类型注解功能。
25 2
|
12天前
|
JavaScript 前端开发 安全
【技术革新】Vue.js + TypeScript:如何让前端开发既高效又安心?
【8月更文挑战第30天】在使用Vue.js构建前端应用时,结合TypeScript能显著提升代码质量和开发效率。TypeScript作为JavaScript的超集,通过添加静态类型检查帮助早期发现错误,减少运行时问题。本文通过具体案例展示如何在Vue.js项目中集成TypeScript,并利用其类型系统提升代码质量。首先,使用Vue CLI创建支持TypeScript的新项目,然后构建一个简单的待办事项应用,通过定义接口描述数据结构并在组件中使用类型注解,确保代码符合预期并提供更好的编辑器支持。
31 0
|
21天前
|
JavaScript 前端开发 安全
TypeScript:解锁JavaScript的超级英雄模式!类型系统如何化身守护神,拯救你的代码免于崩溃与混乱,戏剧性变革开发体验!
【8月更文挑战第22天】TypeScript作为JavaScript的超集,引入了强大的类型系统,提升了编程的安全性和效率。本文通过案例展示TypeScript如何增强JavaScript:1) 显式类型声明确保函数参数与返回值的准确性;2) 接口和类加强类型检查,保证对象结构符合预期;3) 泛型编程提高代码复用性和灵活性。这些特性共同推动了前端开发的标准化和规模化。
42 0
|
2月前
|
JavaScript 前端开发 IDE
TypeScript取代JavaScript的优势
TypeScript取代JavaScript的优势
|
3月前
|
JavaScript 前端开发 编译器
探讨TypeScript如何帮助JavaScript开发者避免这些常见错误,从而提高代码质量和开发效率
【6月更文挑战第13天】TypeScript,JavaScript的超集,通过添加静态类型检查和面向对象特性,帮助开发者避免常见错误,提升代码质量和开发效率。它能检测类型错误,防止运行时类型转变引发的问题;使用可选链和空值合并避免引用错误;通过枚举减少逻辑错误中的魔法数字;接口和泛型等特性提高代码可维护性。学习TypeScript对提升JavaScript开发质量有显著效果。
50 4
|
3月前
|
监控 JavaScript 前端开发
如何在现有的 JavaScript 项目中渐进式地采用 TypeScript
【6月更文挑战第13天】TypeScript,JavaScript的超集,引入静态类型和更多特性,提升代码安全性和可读性。在JavaScript项目中渐进式采用TypeScript可从新模块开始,逐步转换代码,编写.d.ts文件支持第三方库,配置编译选项,并编写测试用例。通过监控和评估,改善项目质量和效率。大型项目尤其受益于TypeScript的类型安全、社区支持和工具兼容性。
48 3