您的位置:首页 > Web前端 > JavaScript

作为JavaScript的“超集”,感受一下TypeScript 的那些黑魔法

2019-11-26 18:05 1606 查看

// 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。

█ 与官方文档相比,本书主要有以下几个特点

  1. 知识点全面。本书不仅涵盖了官方文档的大部分知识点,对于官方文档中没有却经常遇到的知识点,也做了细致的讲解。
  2. 示例丰富,简单易懂。书中的例子,大都来自作者对日常工作的总结,我们甚至可以直接将它们用于自己的开发工作。
  3. 深入编译原理。在与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