TypeScript 入门应用：类型系统和配置文件

安装及使用

npm install typescript  -g 进行全局安装，也可以使用 npm install typescript -D 作为项目的开发依赖项。

TypeScript 代码默认以 .ts 后缀结尾，我们创建一个 index.ts 文件，写入以下代码：

代码中，我们使用了 ES6 中的箭头函数及模板字符等新的语法特性，然后，在命令行中执行 tsc  index.ts 进行编译后，我们能够得到一个同名的 index.js 文件，内容如下：

                      

此时我们会发现，编译过后的文件，已经被转译为了标准的 ES3 规范的代码。这就是我们说的 TS 编译转换新特性的能力。

类型系统的使用的也非常简单，在需要标准的地方，使用类型名称即可，一旦为某个变量标注了类型之后，如果没有给与对应类型的数据，在编译时就会报错，比如，这样的代码：

报错：

同时，在 VS Code 编辑器中，还会有红色的波浪线，鼠标悬浮后，会出现如下提示信息：

使用命令 tsc --locale zh-CN 可以打印出中文形式的提示信息，方便英文不好的同志们。

 

配置文件

tsc 命令不仅可以编译指定的某个 ts 文件，还可以编译整个项目或整个工程。在使用之前，我们需要一个配置文件来对设置不同的编译选项，使用 tsc --init 生成一个名为 tsconfig.json 的 ts 配置文件，compilerOptions 就是 ts 编译器所对应的一些选项，其中大部分都已经被注释掉了，且每个选项后面都有对应的选项说明。

这里对于一些常用的选项从上往下的顺序做一个简单解释：

 

修改好各项配置之后，我们就可以使用 tsc index.ts 命令进行编译了，但是在配置文件中的选型好像并没有起作用，这是因为配置文件是对整个项目工程起作用的，并不对编译一个具体指定的 ts 文件有效。因此，我们在命令行中可以直接使用 tsc 命令而不需要指定具体的那个文件。

 

原始类型

"strict": false, 配置项是对所有类型开启或关闭严格模式，如果想具体控制，可以在配置文件中具体修改。

联合类型

接着我们使用来看 Symbol 类型：

错误提示如下图：

这是什么原因呢？

 

标准库声明

Symbol 是 ES2015 标准中定义的成员，使用它的前提是必须确保有对应的 ES2015 标准库引用，我们可以修改 tsconfig.json 中 target 或者让 lib 选项包含 ES2015 就可以了。但是，这到底是为什么呢？

其实 Symbol 和其他的 String 或者 Number 一样，只不过 Symbol 是 ES2015 中新的数据类型，当我们在配置文件中定义好 target 选项后，会自动使用指定规范的标准库引用，比如我们写一个 Array ,鼠标右击，选择 '转到定义‘，就能够看到具体的引用文件了。

 

其实通过引用文件的文件名 lib.es5.d.ts 我们就能看到，当前引入的是 es5 的标准库，而 Symbol 是 es2015 中的新特性，如果直接修改 target 显然不够灵活，其实像 promise 也会出现类似的情况。最好的办法还是使用 lib 选项，来引入对应的标准库："lib": ["es2015"], 但是这样就会覆盖默认引入的标准库 DOM ，所以我们就需要再添加对 DOM 的引入"lib":["es2015","DOM"],

 

其实标准库就是内置对象所对应的声明，我们在代码中使用内置对象，就必须要引入对应的标准库，否则找不到对应的类型就会报错了。

 

未完待续...