【TypeScript】初探，行则将至

官方文档

从零开始学习一项新技术时，在你真的产生疑惑之前，官方文档是你离不开的朋友和工具，就像你新买的家电，无论你多么熟悉它，总要翻翻说明书。

JavaScript中那些“熟知”且苦恼的场景

拼写错误

// 意外行为
const obj = { width: 10, height: 15 };

const area = obj.width * obj.heigth; // NaN
1
2
3
4

隐式类型转换

if ("" == 0) {
  // 他们相等！但是为什么呢？？
}
if (1 < x < 3) {
  // x是 *任何* 值都为真！
}
1
2
3
4
5
6

大多数时候，我们都能很快的确认到问题，但十几个、几十个的before和after组合在一起，确实让人很苦恼。

TypeScript: 静态类型检查器

一些语言本身就不允许那些错误的程序运行。在不运行代码的情况下检测其中的错误称为 静态检查 。根据被操作的值的种类来确定是什么错误和什么不是错误，这称为静态 类型 检查。

TypeScript 在执行之前，基于 值的类型 检查程序是否有错误。上一小节提到的意外行为，会被它提前检测出来

const obj = { width: 10, height: 15 };
const area = obj.width * obj.heigth;
// 属性“heigth”在类型“{ width: number; height: number; }”上不存在。你是否指的是“height”?
1
2
3

JavaScript 的类型化超集

TypeScript和JavaScript的关系：TypeScript 是 JavaScript 的超集 ，因此 JS 语法是合法的 TS。语法是指我们编写文本以组成程序的方式。

TypeScript 不会将任何 JavaScript 代码视为错误。但是，TypeScript 是一个类型化的超集，意味着它添加了针对如何使用不同类型的值的规则。

官方文档的例子非常的形象的体现了这点：

console.log(4 / []); // Infinity
1

这句话执行起来不会报错，但是通常情况下它就是无意义的，TypeScript 在遇到这段代码后就会进行提醒，因为在大多数时候，这是编程错误。TypeScript 的类型检查器旨在允许正确的程序通过，同时仍然捕获尽可能多的常见错误。如果你将.js切换到.ts出现了一些莫名其妙的错误，也可能源于此。

运行时行为

TypeScript 保留了 JavaScript 的 运行时行为 。例如，在JavaScript 中被零除的结果是 Infinity，而不是抛出运行时异常。原则上，TypeScript 绝不 改变 JavaScript 代码的运行时行为。

这意味着，如果将代码从 JavaScript 迁移到 TypeScript ，即使 TypeScript 认为代码有类型错误，也可以保证以相同的方式运行。

参考链接：

• 面向编程初学者的 TypeScript
• 为 JavaScript 程序员准备的 TypeScript
• 我是如何从零开始学TypeScript的