关于typescript:零基础-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"

• 这时会发现一些小问题

这时提醒了正告, 咱们来剖析下起因:

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