作为JavaScript的“超集”,感受一下TypeScript 的那些黑魔法
// TypeScript 是JavaScript的“超集” //
// 前端语言中冉冉升起的新星 //
TypeScript是一种由微软开发的、开源的编程语言,近两年发展迅猛,越来越多的JavaScript项目正在迁移到TypeScript,主流前端框架及Node.js对TypeScript的支持也越来越友好。自2012年10月发布首个公开版本以来,它已得到了人们的广泛认可。
TypeScript发展至今,已经成为很多大型项目的标配,其提供的静态类型系统,大大增强了代码的可读性及可维护性;同时,它提供最新的和不断发展的JavaScript特性,能让我们构建更健壮的组件。
然而在TypeScript中,有些地方对“开箱即用”进行了限制,例如当使用一个未被声明过的变量时(当然,你可以为外部系统使用声明文件)。也就是说,传统的编程语言在类型系统允许与不允许之间存在明显的边界。
TypeScript不同于传统的编程语言,它可以让你自己设置类型系统的边界。这实际上是为了让你能够使用你喜欢的JavaScript,并尽可能安全地使用它。
在TypeScript中,有很多选项都可以精确地控制此边界,下文选自**《深入理解TypeScript》**一书,现在就让我们去了解它们吧。
▼▼▼
选项为boolean的compilerOptions,可以被指定为tsconfig.json下的compilerOptions。
{ "compilerOptions": { "someBooleanOption": true } }
或者使用命令行。
tsc --someBooleanOption
▼▼▼
有些代码无法被推断,或者推断它们可能会导致意外的错误。一个很好的例子就是函数参数,如果没有对它们进行注解,那么你将不清楚哪些是有效的。
functionlog(someArg) { sendDataToServer(someArg); } // 参数是什么,下面哪个是不正确的 log(123); log('hello world');
因此,如果你没有注解函数的参数,TypeScript将会认为它是any类型的,并将继续执行。在这种情况下,将会关闭类型检查,这是JavaScript开发人员所期望的。但是这可能会让那些对安全性要求较高的人措手不及。因此,这里有一个noImplicitAny选项,当开启这个选项时,它将会标记无法被推断的类型的情况,如下所示。
functionlog(someArg) {// 错误:someArg是any类型的 sendDataToServer(someArg); }
当然,你可以继续进行注解。
functionlog(someArg: number) { sendDataToServer(someArg); }
如果真的想抛弃安全性,你可以把它标记为any。
functionlog(someArg: any) { sendDataToServer(someArg); }
▼▼▼
在默认情况下,null和undefined可以被赋值给TypeScript中的所有类型。
let foo: number = 123; foo = null; // 可以 foo = undefined; // 可以
这顺应了大多数编写JavaScript的人的习惯。但是,同时TypeScript允许你明确指出可以分配给null/undefined的内容。
在严格的null检查模式下,null和undefined是不同的。
let foo = undefined; foo = null; // 不可以
假设有一个接口Member,如下所示。
interface Member { name: string, age?: number }
并不是所有的Member都会提供年龄,所以age是一个可选属性,也就是说age的值可能为undefined。
undefined是“万恶之源”,它通常会导致运行时错误。(编写在运行时抛出错误的代码很容易。)
getMember() .then(member: Member =>{ conststringifyAge = member.age.toString() //toString属性可能undefined })
但是在严格的null检查模式下,这个错误将会在编译时被捕获。
getMember() .then(member: Member =>{ conststringifyAge = member.age.toString() // 对象可能undefined })
◆ 非空断言操作符
在一个类型检查无法得出结论的上下文中,一个新的!表达式后缀操作符,可以用来断言运算对象是非null和非undefined的,示例如下。
// 用--strictNullChecks进行编译 functionvalidateEntity(e?: Entity) { // 如果e是null或其他无效的实体,则抛出错误 } functionprocessEntity(e?: Entity) { validateEntity(e); let a = e.name; // 错误:e可能是null let b = e!.name; // 可以,我们已经断言e是非null }
注意,它只是一个断言,就像类型断言一样,你需要确保该值不为空。一个非null的断言实质上意味着你在告诉编译器“我知道它不是null,但是请让我使用它,即使它不是null”。
◆ 明确赋值断言操作符
TypeScript将会对类中未初始化的属性抛出错误。
class C { foo: number; // 可以,已经在构造器中初始化 bar: string = "hello"; // 可以,已经初始化 baz: boolean; // 错误:属性baz没有初始化,也没有在构造器中被赋值 constructor() { this.foo = 42; } }
你可以使用明确赋值断言,在属性名后加后缀,来告诉TypeScript你已经在其他地方(不是在构造器中)对它进行了初始化。
class C { foo!: number; // 注意这个感叹号 // 这是明确赋值断言操作符 constructor() { this.initialize(); } initialize() { this.foo = 0; } }
你也可以将此操作符与变量声明一起使用。
let a: number[]; // 没有断言 let b!: number[]; // 断言 initialize(); a.push(4); // 错误:变量在赋值之前被使用 b.push(4); // 可以:因为被断言 functioninitialize() { a = [0,1,2,3]; b = [0,1,2,3]; }
就像所有的断言一样,你在告诉编译器让它相信你,让编译器不再抛出错误,即使代码并没有被分配属性。
作为JavaScript的“超集”,TypeScript静态类型检查让我们能轻松地构建和维护大型的前端项目。《深入理解TypeScript》一书是 TypeScript Deep Dive 的中文版,全面阐述了TypeScript的各种“魔法”,示例丰富,简单易懂,并且对初学者非常友好!
本书从实际应用场景出发,对TypeScript语言进行深度剖析,并结合代码示例讲解了诸多TypeScript高级编程技巧,以及在实际开发工作中的最佳实践方案,能帮助读者更加透彻地理解TypeScript。
█ 与官方文档相比,本书主要有以下几个特点
- 知识点全面。本书不仅涵盖了官方文档的大部分知识点,对于官方文档中没有却经常遇到的知识点,也做了细致的讲解。
- 示例丰富,简单易懂。书中的例子,大都来自作者对日常工作的总结,我们甚至可以直接将它们用于自己的开发工作。
- 深入编译原理。在与TypeScript编译原理相关的章节中,本书对如何把TypeScript编译为JavaScript做了详尽的解析。
█ 关 于 作 译 者
Basarat Ali Syed
TypeScript专家,微软JavaScript/TypeScript的MVP贡献者。他是TypeScript社区受人尊敬的成员,澳洲Picnic software高级开发人员,在DefinitelyTyped团队工作。Basarat经常参加澳大利亚与前端开发技术有关的会议,在多个技术活动中做过演讲。Basarat还著有Beginning Node.js 一书,目前该书已被下载39000多次,在亚马逊、豆瓣等平台得到了读者的一致好评。
郭文超:TypeScript深度爱好者,常用笔名三毛,公众号 FENews 主要维护者。曾在 TutorABC、eBay 任职,目前在千寻位置担任前端工程师。对 TypeScript、React、Vue 等有较深理解。
何小磊:山西能快科贸CTO,有十年以上软件开发经验。
柳星:TypeScript 重度用户,常用网名 S1ngS1ng,是 freeCodeCamp 中文社区的维护者之一。曾在 Rackspace、VMware、Apple 任前端工程师一职。
徐野:携程AI研发部前端工程师。热爱大前端,爱折腾新鲜技术,精通 TypeScript、React、Node 等前端技术。
█ 目 录 结 构
- 第1章 为什么要使用TypeScript
- 第2章 JavaScript常见语法
- 第3章 JavaScript 新语法特性
- 第4章 TypeScript项目构成
- 第5章 快速创建TypeScript项目
- 第6章 TypeScript类型系统
- 第7章 关于 JSX
- 第8章 TypeScript编译选项设置
- 第9章 TypeScript错误处理
- 第10章 开发与测试工具
- 第11章 提示与建议
- 第12章 TypeScript代码风格指南与代码约定
- 第13章 TypeScript编译原理
本文由博客一文多发平台 OpenWrite 发布!
- TypeScript(JavaScript的超集)
- 分享一下我在阿里作为面试官,面试了几个java程序员后的感受
- [译] TypeScript入门指南(JavaScript的超集)
- TypeScript ——JavaScript 的超集
- javascript:if中可以使用那些作为判断条件
- TypeScript入门指南(JavaScript的超集)
- TypeScript-JavaScript类型的超集,它可以编译成纯JavaScript。
- {JavaScript学习图谱}作为HTML5的开发的脚本有必要知道一下!
- JavaScript的那些坑之事件代理
- 详解一下 javascript 中的比较
- **入门级的javascript测试题记录一下**
- 过了一年,再来回顾一下去年到现在,这一年多,作为初级前端小白的坎坷成长历程
- JavaScript中UUID作为方法参数中转译方法
- 了解一下JavaScript的未来——ECMAScript5
- [转]使用JAVASCRIPT作为ASP的服务器端语言(一)
- 汉字的经典对白--感受一下汉字的魅力!
- 悟透javascript-------(l连载1)~~~~~感兴趣的来顶一下~~~
- 说实话,写了这么多程序了,还从来没有用JUnit作为单元测试工具测试过,今天就来学习一下
- 悟透javascript-------(连载4)~~~~~感兴趣的来顶一下~~~
- 在visual studio code和visual studio中编写TypeScript文件自动生成JavaScript文件