TypeScript根底-node中搭建TS环境
为啥在node中
node环境绝对简略，可让咱们把更多的精力放在ts自身上
装置TypeScript
全局命令
cnpm i -g typescript以后我的项目装置命令
cnpm i typescript
应用ts
- 创立文件
index.ts let say:string = "hello"- 编译
能够将ts代码编译成js代码, 这个过程中会把类型查看等和ts无关的内容都会剔除, 只保留原有的js
应用命令
tsc index.ts生成
index.js, 内容如下var say = "hello"- 这时会发现一些小问题
这时提醒了正告, 咱们来剖析下起因:
TS会做出几种假如 1. 假如以后执行的环境是dom, 什么document，window对象啦, 所以无奈辨认say这个变量 2. 如果代码中没有应用模块化(import, export)，便认为该代码是全局执行 3. 编译的指标代码是默认ES3 全局执行： index.js中有var申明的全局变量say, ts中辨认到了，所以不容许反复定义 指标代码：应用tsc命令去编译成js的内容, 应用的哪一个ES版本, 这个是能够配置的 如何去解决TS的假如呢:
1.应用tsc命令时加上选项参数(tsc --xxx, 具体能够查阅官网), 这种比拟麻烦不举荐 2.应用ts配置文件，来更改编译选项, 举荐TS配置文件
如何创立
- 手动创立tsconfig.json 文件
- 命令主动创立
tsc --init配置项
讲下比拟重要的几项
{ //上方ts的假如其实就是编译选项的默认值，咱们能够去更改 "compilerOptions": { // 编译选项 // 编译指标js代码的版本规范(ts中的版本变成target设置的) "target": "", // 能够配置ES3-ES2022... , 默认为ES3, 下面的假如能够设置ES2015以上就能解决 // 编译指标js代码的版模块化规范 "module": "", // 能够配置CommonJS... // 配置ts中处于的环境 "lib": ["ES2016"] // 能够配置dom..., 如果只配置了ES, document,console那些都全局变量无奈应用，并以报错的模式提醒 } }应用了配置文件后, 应用tsc进行编译，不能跟上文件名, 如果跟上会疏忽配置文件
编译指定目录&文件
编译所有ts文件, 生成js与ts文件同级
tsc- 编译
指定文件或文件夹
{ "compilerOptions": {}, // 指定要编译的文件目录内,或文件, 可多个 "include": ["./src", "index.ts"], // 指定编译文件, 可多个 "files": [""] }- 编译
到指定文件夹
{ "compilerOptions": { // 要编译到的文件夹, 并在dist中放弃原始ts文件摆放的地位和下级目录 "outDir": "./dist" // 将编译至dist文件夹下 } }类型库
@types是ts官网的一个类型库, 蕴含了很多对js代码的类型形容其实作用就是为纯js的库, 加上类型定义
JQuery: 用js写的，没有类型查看
npm装置types/jquery, 为jquery类库增加类型定义
@types/node, 装置lib中缺失的node环境
解决输命令痛点
能够应用第三方库简化流程, 防止频繁输出命令运行
ts-node: 将ts代码在内存中实现编译, 同时实现运行
- 装置
cnpm i -g ts-node- 应用
// 这个过程像是先执行tsc xxx.ts,再node xxx.js ts-node xxx.ts这样益处就是不会生成新的文件或目录, 并且能晋升开发效率
然而如果有热更新，本地开发环境主动去运行，那岂不是更爽啦?
nodemon： 能够用于检测文件的变动！,太强了！
- 装置
cnpm i -g nodemon- 如何应用, 监听所有文件！
// 监听文件发生变化, 去执行ts-node的命令 nodemon --exec ts-node xxx.ts 或放在package.json中 "script": { "dev": "nodemon --exec ts-node xxx.ts" } 执行 npm run dev- 如何应用, 监听指定文件！
"script": { // 监听.ts文件的变动, 才执行ts-node "dev": "nodemon -e ts --exec ts-node xxx.ts" // 监听src目录内.ts文件的变动, 才执行ts-node "dev": "nodemon --watch src -e ts --exec ts-node xxx.ts" }