乐趣区

关于typescript:零基础-TypeScript上手难看完教你搭建ts环境

jiezi

TypeScript 根底 -node 中搭建 TS 环境

为啥在 node 中 🤔

node 环境绝对简略，可让咱们把更多的精力放在 ts 自身上

装置 TypeScript

  • 全局命令

      cnpm i -g typescript

  • 以后我的项目装置命令

      cnpm i typescript

应用 ts

  1. 创立文件
index.ts

  
    let say:string = "hello"
  1. 编译

能够将 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"
   }
退出移动版