TypeScript学习笔记之初入TypeScript

原文地址：https://banggan.github.io/2019/01/16/TypeScript学习之初入TypeScript/

what?

TypeScript 是 JavaScript 的类型的超集，它可以编译成纯 JavaScript；主要提供类型系统和对ES6的支持；免费开源。

---

官网：http://www.typescriptlang.org/

why？

优势

• 增加代码的可读性和可维护性

类型系统实际上是最好的文档，大部分的函数看看类型的定义就可以知道如何使用了；可以在编译阶段就发现大部分错误，这总比在运行时候出错好；增强了编辑器和 IDE 的功能，包括代码补全、接口提示、跳转到定义、重构等。

• 非常包容

TypeScript 是JavaScript的超集，.js文件可以直接重命名为 .ts 即可；即使不显式的定义类型，也能够自动做出类型推论；
可以定义从简单到复杂的几乎一切类型；即使TypeScript 编译报错，也可以生成 JavaScript 文件；兼容第三方库，即使第三方库不是用 TypeScript 写的，也可以编写单独的类型文件供 TypeScript 读取

• 拥有活跃的社区

优势

• 有一定的学习成本，需要理解接口（Interfaces）、泛型（Generics）、类（Classes）、枚举类型（Enums）等
• 短期可能会增加一些开发成本，毕竟要多写一些类型的定义，不过对于一个需要长期维护的项目，TypeScript 能够减少其维护成本
• 集成到构建流程需要一些工作量

安装

TypeScript 的命令行工具安装方法如下：

npm install -g typescript

以上命令会在全局环境下安装 tsc 命令，安装完成之后，我们就可以在任何地方执行 tsc 命令了。

编译一个 TypeScript 文件很简单：

tsc hello.ts

我们约定使用 TypeScript 编写的文件以 .ts 为后缀，用 TypeScript 编写 React 时，以 .tsx 为后缀。

编辑器

TypeScript 最大的优势便是增强了编辑器和 IDE 的功能，包括代码补全、接口提示、跳转到定义、重构等。

主流的编辑器都支持 TypeScript，这里我推荐使用
Sublime Text

其他编辑器或 IDE 对 TypeScript 的支持：

• Visual Studio Code
• Atom
• WebStorm
• Vim
• Emacs
• Eclipse
• Visual Studio 2015
• Visual Studio 2013

---

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 只会进行静态检查，如果发现有错误，编译的时候就会报错。

let 是 ES6 中的关键字，和 var 类似，用于定义一个局部变量，可以参阅 let 和 const 命令。

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

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

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

编辑器中会提示错误，编译的时候也会出错：

index.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 即可。关于 tsconfig.json，请参阅官方手册（中文版）。

---