TypeScript开发环境搭建

开发工具: VSCode 、Node.js

一.安装程序包

1.创建项目文件夹,在VSCode中使用快捷键Ctrl+~打开终端

2.创建package.json

npm init -y

 3.安装TypeScript

在终端里执行以下命令安装TypeScript

npm install typescript --save-dev

 --save-dev是安装到项目本地且使用开发时依赖。在package.json的devDependencies键下，会看到已安装的开发时依赖的程序包。比如用于压缩js的gulp-uglify。因为在程序发布后用不到它，而只是在开发才用到它

如果出现Error: EPERM: operation not permitted错误，以管理员身份运行VS Code，或者以管理员身份打开命令行，并切换到项目根目录下

安装完后会多出node_modules文件夹，并且package.json的devDependencies键下会出现"typescript"键:"^版本"

4.本地安装node.d.ts。这是对Node.js的内置核心模块的TypeScript类型定义。理解为头文件好了。有了它可以让Intellisence提供代码补全功能。在终端里执行以下命令来安装

 如果出现Error: EPERM: operation not permitted错误，请以管理员身份运行VS Code，或者以管理员身份打开命令行，并切换到项目根目录下

5.创建tsconfig.json。如果已经全局安装TypeScript，那么在终端中执行tsc --init命令后会在当前目录下自动地创建tsconfig.json。但前面是用本地安装（--save）的方式安装的，所以不能以tsc --init的方式来运行tsc,这里要用npx,npx是npm5.2之后发布的一个命令。它用来执行npm依赖包的二进制文件,运行以下命令来创建tsconfig.json

npx tsc --init --rootDir src --outDir lib --esModuleInterop --resolveJsonModule --lib es6,dom --module commonjs

解释：

• --init：初始化一个TypeScript项目并创建一个tsconfig.json文件。
• --rootDir：所有非声明文件的最长公共路径。（我理解是）TypeScript项目代码的输入文件路径。
• --outDir：转译后的文件.js(包括.d.ts，.js.map等)。源码文件的目录结构也将被保留。（我理解是）想把编译后的代码放到哪里这里就写哪里。
• --esModuleInterop：为了兼容不同模块的导入方式，需要设置该选项。(CommonJS/AMD/UMD)
• --resolveJsonModule：为了让TypeScript支持解析JSON文件。
• --lib es6,dom：编译过程中需要引入的库文件。
• --module commonjs：指定生成哪个模块系统代码： "None"， "CommonJS"， "AMD"， "System"， "UMD"， "ES6"或 "ES2015"

打开tsconfig.json，添加include和exclude键 ,include指定的文件会被包含到工程中,exclude指定的文件会被排除在工程外

此时已经可以编译TypeScript代码了。步骤如下：

1. 在src文件夹下建立index.ts，输入语句console.log("Hello World!");
2. 在package.json的script小节添加脚本如下："build": "tsc"
3. 在终端中运行命令npm run build。该命令会运行script小节的build脚本。该脚本会运行tsc，tsc又会根据tsconfig.json的配置去转译ts文件，然后在lib（tsconfig里配置的outDir）文件夹里输出index.js文件。
4. 运行node lib/index.js会在命令行中输出Hello World!

二.可选程序包

使用上面的方式来编译TypeScript代码有一个不方便的点就是每次修改源代码后都要重新手动输入命令来运行。使用下面的方法可以让node监听代码修改，自动编译，并运行程序

1.使用ts-node来实时编译和运行。在终端中运行以下命令：

npm install --save-dev ts-node

2.使用nodemon来监听代码修改。只要文件改变，它就会调用ts-node。在终端中运行以下命令：

npm install --save-dev nodemon 

3.添加npm脚本。打开package.json，在script小节添加以下脚本：

"scripts": {
    "start": "npm run build:live",
    "build": "tsc -p .",
    "build:live": "nodemon --watch src/**/*.ts --exec ts-node src/index.ts"
},

"tsc -p"的含义：编译指定目录下的项目。这个目录应该包含一个tsconfig.json文件来管理编译。如果没有指定"-p"参数，tsc会从当前目录往上级查找，直到找到tsconfig.json文件。"."是根目录。

补充：如果想一次运行多个npm脚本，则可以使用&将多个npm脚本组合在一起。例如把上面的scripts改为这样：

"scripts": {
    "start": "npm run build:live",
    "build": "tsc -p .",
    "build:live": "nodemon --watch src/**/*.ts --exec ts-node src/index.ts",
    "all": "start & build"
},

若在终端中输入npm run all，则会运行all这个脚本。

三.创建应用

修改index.ts为如下:

import * as fs from "fs";

const path = "./message.txt";
const data = "Hello World!";
const encoding = "utf8";

console.log(data);

fs.writeFile(path, data, encoding, error => {
    if (error) {
        console.log(error);
    }
});

然后在终端中输入命令"npm run start"并运行。则会在终端中输出Hello World!并且在ts项目根目录下创建文件message.txt，其内容为Hello World!