参考资料
- 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作为文件扩展名
- 使用TypeScript编译器
tsc命令将.ts文件转换为.js文件后 - 再使用
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"]
}
编译器选项
-
targetTS编译后生成的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/*"]
}
}
}
