什么是 TypeScript

• Typed JavaScript At Any Scale.

• 添加了类型系统的JavaScript，适用于任何规模的项目。

强调了 TypeScript 的两个最重要的特性——类型系统、适用于任何项目。

TypeScript 的特性

类型系统

从 TypeScript 的名字就可以看出来，类型是其最核心的特性。

同时 TypeScript 也是 JavaScript 的超集，我们知道 JavaScript 是一门非常灵活的编程语言：

• JavaScript 没有类型约束，一个变量可能初始化时是字符串，过一会又被赋值为数字
• 由于隐式类型转换的存在，有的变量的类型很难在运行前就确定基于原型的面向对象编程，使得原型上的属性或方法可以在运行时被修改
• 函数是 JavaScript 中的一等公民，可以赋值给变量，也可以当做参数或返回值

JavaScript 这种灵活性是一把双刃剑，使得 JavaScript 代码质量参差不齐，维护成本高，运行时错误多。

而 TypeScript 的类型系统，在很大程度上弥补了 JavaScript 的缺点。

TypeScript 是静态类型

类型系统按照 类型检查的时机 来分类，可以分为静态类型和动态类型。

动态类型是指在运行时才会进行类型检查，这种语言的类型错误往往会导致运行时错误。

JavaScript 是一门解释性语言，没有编译阶段，所以它是动态类型，以下代码在运行时会报错：

let foo = 1;
foo.split('');
// Uncaught TypeError: foo.split is not a function
// 运行时会报错（foo.split 不是一个函数），造成线上 bug

静态类型是指在编译阶段就能确定每个变量的类型，这种语言的类型错误往往会导致语法错误。

TypeScript 在运行前需要先编译为 JavaScript，而在编译阶段就会进行类型检查，所以 TypeScript 是静态类型，这段 TypeScript 代码在编译阶段就会报错：

let foo = 1;
foo.split('');
// Property 'split' does not exist on type 'number'.
// 编译时会报错（数字没有 split 方法），无法通过编译

这段 TypeScript 代码和 JavaScript 代码并没有太大的区别，因为大部分的 JavaScript 代码都只需要经过少量的修改（或者完全不用修改）就能变成 TypeScript 代码，这得益于 TypeScript 强大的类型推论，即使不去手动声明变量 foo 的类型，也能在变量初始化时自动推论出它是一个 number 类型。

所以完整的 TypeScript 代码是这样的：

let foo: number = 1;
foo.split('');
// Property 'split' does not exist on type 'number'.
// 编译时会报错（数字没有 split 方法），无法通过编译

TypeScript 是弱类型

类型系统按照 是否允许隐式类型转换 来分类，可以分为强类型和弱类型。

以下代码在 JavaScript 和 TypeScript 中都是可以正常运行的，运行时数字1会被隐式类型转换为字符串’1’，加号’+'被识别为字符串拼接，所以打印出结果是字符串 ‘11’。

console.log(1 + '1');

作为对比，Python是强类型语言，以下代码在运行时会报错：

print(1 + '1')
# TypeError: unsupported operand type(s) for +: 'int' and 'str'

如要修复该错误，需要进行强制类型转换：

print(str(1) + '1')
# 打印出字符串'11'

强/弱是相对的，Python 在处理整型和浮点型相加时，会将整型隐式转换为浮点型，但是这并不影响 Python 是强类型语言的结论，因为大部分情况下 Python 并不会进行隐式类型转换。相比而言，JavaScript 和 TypeScript 中不管加号两侧是什么类型，都可以通过隐式类型转换计算出一个结果——而不是报错——所以 JavaScript 和 TypeScript 都是弱类型。

这样的类型系统体现了 TypeScript 的核心设计理念：在完整保留 JavaScript 运行时行为的基础上，通过引入静态类型系统来提高代码的可维护性，减少可能出现的bug。

总结: 什么是 TypeScript

• TypeScript 是添加了类型系统的 JavaScript，适用于任何规模的项目。
• TypeScript 是一门静态类型、弱类型的语言。
• TypeScript 是完全兼容 JavaScript 的，它不会修改 JavaScript 运行时的特性。
• TypeScript 可以编译为 JavaScript，然后运行在浏览器、Node.js 等任何能运行 JavaScript 的环境中。
• TypeScript 拥有很多编译选项，类型检查的严格程度由你决定。
• TypeScript 可以和 JavaScript 共存，这意味着 JavaScript 项目能够渐进式的迁移到 TypeScript。
• TypeScript 增强了编辑器（IDE）的功能，提供了代码补全、接口提示、跳转到定义、代码重构等能力。
• TypeScript 拥有活跃的社区，大多数常用的第三方库都提供了类型声明。
• TypeScript 与标准同步发展，符合最新的 ECMAScript 标准。

Hello TypeScript

我们从一个简单的例子开始：

在 hello.ts 文件中有以下代码：

function sayHello(person: string) {
   return 'Hello ' + person;
}

let user = 'Tom';
console.log(sayHello(user));

然后执行：

tsc hello.ts

这个时候会生成一个编译好的 hello.js 文件：

function sayHello(person) {
    return 'Hello ' + person;
}
var user = 'Tom';
console.log(sayHello(user));

在TypeScript代码中，我们用 : 指定person参数类型为string，但是编译成 js 之后，并没有什么检查的代码被插入进来。

这是因为 TypeScript 只会在编译时对类型进行静态检查，如果发现有错误，编译的时候就会报错。而在运行时，与普通的 JavaScript 文件一样，不会对类型进行检查。

如果我们需要保证运行时的参数类型，还是得手动对类型进行判断：

function sayHello(person: string) {
    if (typeof person == 'string') {
        return 'Hello ' + person;
    } else {
        throw new Error('Person is not a string');
    }
}
let user = 'Tom';
console.log(sayHello(user));

接下来尝试把这段代码编译一下：

function sayHello(person: string) {
    return 'Hello ' + person;
}

let user = [0, 1, 2];
console.log(user);

编译其中会提示错误，编译的时候也会报错：

hello.ts:6:22 - error TS2345: Argument of type 'number[]' is not assignable to parameter of type 'string'.

但是还是生成了js文件：

function sayHello(person) {
    return 'Hello ' + person;
}
var user = [0, 1, 2];
console.log(sayHello(user));

这是因为 TypeScript 编译的时候即使报错了，还是会生成编译结果，我们仍然可以使用这个编译后的文件。

如果要在编译报错的时候终止js文件的生成，可以在 tsconfig.json 中配置 noEmitOnError 即可