TypeScript语言简介

TypeScript是微软开发的开源的编程语言，目标是开发大型应用，并转译成JavaScript语言。

TypeScript是JavaScript语言的严格超集，添加了可选的静态类型和基于类的面向对象编程，支持泛型、类型推断、接口、枚举、模块等等。类、模块、箭头函数都是ES6的标准，TypeScript均支持。TypeScript支持编译时类型检查，因此代码类型更安全，而不会像JavaScript代码那么松散，注意，TypeScript的类型是可选的。

由于TypeScript可以转译成标准的JavaScript，因此可以运行在任何的平台的任何浏览器和Node.js上，JavaScript代码也是合格的TypeScript程序代码（在一定程度上吧😁），一个TypeScript程序也可以调用已有的JavaScript程序代码。

TypeScript的编译器是tsc，本身也是使用TypeScript写成。使用tsc将TypeScript编译成标准的JavaScript代码。

几个可用的资源：

• TypeScript主页：http://www.typescriptlang.org/
• TypeScript官方文档：https://www.typescriptlang.org/docs/index.html
• TypeScript项目主页：https://github.com/Microsoft/TypeScript
• TypeScript中文站：https://www.tslang.cn/index.html
• TypeScript官方语言规范：
  • 网页版：https://github.com/Microsoft/TypeScript/blob/master/doc/spec.md
  • docx版：https://github.com/Microsoft/TypeScript/blob/master/doc/TypeScript%20Language%20Specification.docx?raw=true
  • pdf版：https://github.com/Microsoft/TypeScript/blob/master/doc/TypeScript%20Language%20Specification.pdf?raw=true
• Visual Studio Code官方的编写TypeScript图文教程：https://code.visualstudio.com/docs/languages/typescript#_javascript-source-map-support

其中，TypeScript中文站是TypeScript官方网址的中文翻译镜像，翻译得十分齐全，更新也很及时，遇到问题优先从这里寻找答案。

在VS Code环境下编写TypeScript

参考：https://code.visualstudio.com/docs/languages/typescript#_transpiling-typescript-into-javascript

安装TypeScript编译器

VS Code自带了TypeScript语言支持，但是没有自带编译器（把.ts转译成.js），我们可以把TypeScript编译器全局安装或者安装在工程目录下。

安装TypeScript最简单的方式是使用npm，我们选择安装在工程目录下。具体命令如下：

Tim@TIM-MAC ~ $ cd ~/project/vscode
Tim@TIM-MAC ~/project/vscode $ mkdir typescript-learning
Tim@TIM-MAC ~/project/vscode $ cd typescript-learning
Tim@TIM-MAC ~/project/vscode/typescript-learning $ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (typescript-learning)
version: (1.0.0)
description: Let's start to learn TypeScript! ;)
entry point: (index.js)
test command:
git repository:
keywords:
author: Tim Huang
license: (ISC)
About to write to /Users/Tim/project/vscode/typescript-learning/package.json:

{
  "name": "typescript-learning",
  "version": "1.0.0",
  "description": "Let's start to learn TypeScript! ;)",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Tim Huang",
  "license": "ISC"
}


Is this ok? (yes)
Tim@TIM-MAC ~/project/vscode/typescript-learning $ l
total 8
drwxr-xr-x  3 Tim  staff   102B 10  7 22:07 .
drwxr-xr-x  4 Tim  staff   136B 10  7 22:04 ..
-rw-r--r--  1 Tim  staff   259B 10  7 22:07 package.json
Tim@TIM-MAC ~/project/vscode/typescript-learning $ npm install --save-dev typescript
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN typescript-learning@1.0.0 No repository field.

+ typescript@2.5.3
added 1 package in 1.395s
Tim@TIM-MAC ~/project/vscode/typescript-learning $ l
total 16
drwxr-xr-x  5 Tim  staff   170B 10  7 22:07 .
drwxr-xr-x  4 Tim  staff   136B 10  7 22:04 ..
drwxr-xr-x  4 Tim  staff   136B 10  7 22:07 node_modules
-rw-r--r--  1 Tim  staff   346B 10  7 22:07 package-lock.json
-rw-r--r--  1 Tim  staff   314B 10  7 22:07 package.json
Tim@TIM-MAC ~/project/vscode/typescript-learning $ touch index.ts
Tim@TIM-MAC ~/project/vscode/typescript-learning $ l
total 16
drwxr-xr-x  6 Tim  staff   204B 10  7 22:07 .
drwxr-xr-x  4 Tim  staff   136B 10  7 22:04 ..
-rw-r--r--  1 Tim  staff     0B 10  7 22:07 index.ts
drwxr-xr-x  4 Tim  staff   136B 10  7 22:07 node_modules
-rw-r--r--  1 Tim  staff   346B 10  7 22:07 package-lock.json
-rw-r--r--  1 Tim  staff   314B 10  7 22:07 package.json

上面的命令中，首先使用npm init初始化工程目录，以生成package.json，然后使用npm install --save-dev typescript在当前工程根目录安装最新版的TypeScript，--save-dev参数表示将在package.json的devDependencies键下记录TypeScript这个依赖，并记下版本号。因为安装编译器仅仅在dev环境下就够了，等编译完成后都是js文件，可以直接上传到网站ftp，因此，无需添加到dependencies键下。

配置tsconfig.json

安装好TypeScript编译器后，使用VS Code打开该工程文件夹。

一个tsconfig.json所在的目录表示一个TypeScript工程的根目录。

于是，我们在根目录新建tsconfig.json文件。内容如下：

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "sourceMap": true
    }
}

编译TypeScript

编辑index.ts如下：

class Startup {
    public static main(): number {
        console.log('Hello World');
        return 0;
    }
}

Startup.main();

注意，我们要使用工程自己安装的TypeScript！打开index.ts，点击VS Code右下角的TypeScript右边的版本号，选择工程自带的TypeScript！此时，会在工程根目录的.vscode目录下创建settings.json，内容如下：

{
    "typescript.tsdk": "node_modules/typescript/lib"
}

然后点击任务 -> 运行生成任务（快捷键Shift+Command+B），选择index.ts，编辑index.ts，生成index.js和index.js.map两个文件。

为了避免每次都需要选择ts文件，可以配置默认生成任务，选择任务 -> 配置默认生成任务，选择tsc ...。默认即可，前提是之前配置了tsconfig.json。这样以后每次只需点击快捷键Shift+Command+B就能自动编译所有的*.ts。

运行TypeScript

点击调试 -> 启动调试，选择node...，保持默认生成的launch.json不变，可以看到程序的起点是index.js，使用node index.js执行。相当于使用node执行了TypeScript。这也就意味着我们是在node环境下运行js，比如此时的全局对象就是global而不是window了。

隐藏自动生成的.js

避免看到这些自动生成的.js，也避免搜索时看到这些文件。

修改VS Code设置中的files.exclude键，先从默认设置拷贝到自定义设置。最终内容如下：

"files.exclude": {
        "**/*.js": { "when": "$(basename).ts"},
        "**/.git": true,
        "**/.svn": true,
        "**/.hg": true,
        "**/CVS": true,
        "**/.DS_Store": true
    }