typescript node.js

参考资料

• https://www.typescriptlang.org/
• TSC命令手册 http://www.typescriptlang.org/docs/handbook/compiler-options.html
• https://docs.cocos.com/creator/manual/zh/scripting/typescript.html

TypeScript简称TS，是微软（MS）开发的自由和开源的编程语言，是JavaScript（JS）的严格超集，添加了可选的静态类型和基于类的面向对象编程。TS的设计目标是开发大型应用，然后转译为JS运行。由于TS是JS的超集，任何现有的JS程序都是合法的TS程序。

TS作为JS的超集，TS文件经过tsc编译后形成JS文件，TS支持ES6标准。TS通过类型注解提供编译时的静态类型检查。

目标

• 使用TypeScript开发Node.js应用程序

Node.js

Node.js本身只是一个可以运行JavaScript代码的运行环境，基本上可认为Node.js是由V8 +libuv组成，V8用于解释JavaScript代码，libuv处理异步模型。

环境检查

$ node -v
v14.16.0

$ npm -v
6.14.11

创建项目目录并进入

$ mkdir ts && cd ts

使用Node.js包管理器NPM初始化项目骨架，生成项目依赖包配置文件package.json。

$ npm init -y

package.json

配置编译和运行脚本

• 使用npm run start编译src目录下的*.ts源码生成到dist目录下的*.js文件后运行*.js文件

$ vim package.json

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "build/index.js",
  "scripts":{
    "test": "echo \"Error: no test specified\" && exit 1",
    "start":"tsc && node build/index.js"
  },
  "dependencies": {
    "typescript": "^4.2.4"
  },
  "devDependencies": {},
  "keywords": [],
  "author": "",
  "license": "ISC"
}

• package.json的scripts属性用于配置指令集合，配置后可使用npm run *运行在scripts节点下配置的指令。

"start":"tsc && node build/index.js"

@types/node

由于开发环境的Node.js，为适应合适的类型校验和代码提示，需引入Node.js的类型文件。

安装@types/node包让TypeScript支持Node.js内置模块

$ npm i -S @types/node

TypeScript

利用npm全局安装TypeScript编译器

$ npm i -g typescript

查看TypeScript编译器版本

$ tsc -v
$ tsc --version
Version 3.5.3

查看帮助文档

$ tsc --help

更新TypeScript版本

$ npm update -g typescript

为当前项目安装TypeScript依赖包

$ npm i -S typescript

TypeScript文件以.ts作为文件扩展名

1. 使用TypeScript编译器tsc命令将.ts文件转换为.js文件后
2. 再使用node命令运行.js文件

$ vim test.ts
var message:string = "hello world"
console.log(message)
$ tsc test.ts
$ node test.js

tsconfig.json

生成TypeScript编译器配置文件tsconfig.json，当TypeScript编译器在编译*.ts文件时会使用项目根目录下的tsconfig.json，根据tsconfig.json文件中的配置项执行编译。默认若tsconfig.json中没有任何配置，则TypeScript编译器会默认从编译项目目录下找到所有的.ts、.tsx、.d.ts文件。

$ tsc --init

配置TypeScript编译器选项

$ vim tsconfig.json
"outDir":"./build",
"rootDir":"./src",

创建源代码目录和编译输出目录

$ mkdir src && mkdir build\

创建测试代码

$ cd src
$ vim index.ts
const message:string = "hello world";
console.log(message);

使用TypeScript编译器编译*.ts源码，编译后会在outDir目录下生成*.js文件。

$ tsc index.ts

使用node命令运行*.js文件获取最终结果

$ cd .. && cd build
$ node index.js

创建TypeScript配置文件进行项目初始化

• 执行tsc --init命令后将自动在当前目录下生成tsconfig.json配置文件
• tsconfig.json文件所处路径是当前TS项目的根路径。

$ tsc --init

配置使用

• 不带任何输入文件的情况下调用tsc命令，编译器会从当前目录 开始查找tsconfig.json文件，并逐级向上搜索父目录。
• 不带任何输入文件的情况下调用tsc命令，且使用命令行参数--project或-p指定一个包含tsconfig.json文件的目录。

配置选项

• tsconfig.json配置文件主要包含两块内容：指定待编译的文件、定义编译选项。

$ vim tsconfig.json

{
  "compilerOptions": {
    "target": "esnext", 
    "module": "esnext",
    "lib": ["es2016", "dom"],
    "outDir": "./build",
    "rootDir": "./src", 
    "strict": true, 
    "moduleResolution": "node",
    "esModuleInterop": true,"skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "exclude":["node_modules"]
}

编译器选项

• target TS编译后生成的JS文件所需遵循的ES标准，候选项为ES3、ES5、ES2015、ES2016...
• module 遵循的JS模块规范，候选项为commonjs、AMD、ES2015...
• outDir 编译输出的JS文件存放的文件夹
• esModuleInterop 是否允许从没有设置默认导出的模板中默认导入，此配置并不影响代码的显示，仅仅时为了类型检查。
• lib项目中使用的语法类库，比如使用console需dom类库，使用Symbol需添加es2015类库等。

其他选项

• include 编译时需要包含的文件夹
• exclude 编译时需要剔除的文件夹

ts-node

针对TypeScript还需要ts-node包的支持。

$ npm i -D ts-node

• ts-node包用于在Node.js环境下直接运行TypeScript文件获取结果

$ ts-node src/index.ts

nodemon

没有热更新修改完代码后是不会立即自动重启生效的，实现热更新可采用nodemon包实现。

$ npm i -D nodemon

• nodemon包专门针对在开发期间自动重启Node.js应用程序

热更新命令

$ nodemon -e ts --exec ts-node src/index.ts

• -e ts表示监听TypeScript文件
• --exec ts-node表示需要使用ts-node来编译代码

$ nodemon -w src/ -e ts-node ./src/index.ts

热更新命令表示使用nodemon监控src/下所有的TypeScript文件的改动，当发生改动时直接使用ts-node重新生成index.ts。

配置自定义脚本命令

$ vim package.json

"scripts": {
  "start": "nodemon -e ts --exec ts-node src/index.ts"
},

执行热更新

$ npm run start

TypeScript Tips

如何在TypeScript中import导入JSON文件呢？

解决的方式在项目根目录下的tsconfig.json即TypeScript编译器配置文件中，设置compilerOptions编译编译器选项下的resolveJsonModule属性为true即可。

$ vim tsconfig.json

{
  "compilerOptions": {
    "resolveJsonModule": true,
  }
}

然后在需要导入JSON文件的位置添加ES6模块规范的导入写法

import * as pkg from "package.json"

运行脚本出现错误信息：无法在模块外使用import语句，因为模块加载实现的ES6的语法。

Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
SyntaxError: Cannot use import statement outside a module

如何为TypeScript设置路径别名（路径映射）呢？

Vue项目中可利用@来指代src目录，通过配置TypeScript的tsconfig.json中compilerOptions下的paths属性，可告知TypeScript编译器，在解析路径是将同意将src解析为baseUrl下的src目录。

$ vim tsconfig.json

{
  "compilerOptions": {
    "paths":{
      "@/*":["src/*"],
      "*":["./node_modules/*", "./typings/*"]
    }
  }
}