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

TypeScript基础-node中搭建TS环境

为啥在node中 🤔

node环境相对简单，可让我们把更多的精力放在ts本身上

安装TypeScript

• 全局命令

    cnpm i -g typescript

• 当前项目安装命令

    cnpm i typescript

使用ts

1. 创建文件

index.ts

  
    let say:string = "hello"

2. 编译

可以将ts代码编译成js代码, 这个过程中会把类型检查等和ts有关的内容都会剔除, 只保留原有的js

• 使用命令

    tsc index.ts

• 生成index.js, 内容如下

    var say = "hello"

3. 这时会发现一些小问题

这时提示了警告, 我们来分析下原因:

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配置文件

如何创建🤔

1. 手动创建tsconfig.json 文件
2. 命令自动创建

 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"
   }