零基础|零基础, TypeScript上手难（看完教你搭建ts环境！）零基础|TypeScript上手难？看完教

TypeScript基础-node中搭建TS环境为啥在node中
node环境相对简单，可让我们把更多的精力放在ts本身上
安装TypeScript

全局命令

cnpm i -g typescript
当前项目安装命令

cnpm i typescript

使用ts

创建文件

index.tslet 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

这样好处就是不会生成新的文件或目录, 并且能提升开发效率
【零基础|零基础, TypeScript上手难（看完教你搭建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" }