typescript-搭建开发环境

搭建开发环境

#node中搭建TS开发环境

》安装typescript

1.安装typescript包

npm i - g typescript
或cnpm i - g typescript

2.新建ts文件  如index.ts

3.编译： tsc 文件名  eg:  tsc index.ts

 

默认情况下 ，ts会做出以下几种假设：

• 假设当前代码的执行环境是dom 
• 如果代码中没有使用模块化语句（import、export）、便认为改代码是全局执行
• 编译的模板代码是ES3

如何改变以上假设：

• 使用tsc命令行的时候，加上选项参数 
• 使用ts配置文件，改变编译选项（推荐）

》TS配置文件

1、tscongfig.json文件

#1.直接新建文件 tscongfig.json
#2.使用命令生成 tsc --init

2.主要配置

{
  "compilerOptions": {                /*编译选项*/   
    "target": "es2016",               /*编译目标的版本*/                          
    "module": "commonjs",             /*编译目标的版本*/             
    "lib": ["es2016"],                /*表示全局环境*/   
    // "lib": ["es2016", "dom"],        /*表示全局环境*/   
    "outDir": ["./dist"],               /*编译的结果放在哪个路径*/   

  },
  "include": ["./src"] ,                /*要编译哪个文件夹里面的全部ts文件*/   
  // "file": ["./src/index.ts"]         /*指定需要的文件*/   
}

　　

注意：

使用了配置文件后，使用tsc编译时不能带文件名；如果跟上文件名，会忽略配置文件

3.配置node环境

　　安装 @types/node

 

npm i -D @types/node

　　@type是一个ts官方的类型库，其中包含了很多对js代码的类型描述

　　例如： 你想要在ts中使用jquery,那么你需要安装@jquery/node，为jquery添加类型定义

 

4.第三方库简化流程

　　通常情况下使用命令tsc进行编译 然后使用node ./dist/index.js(node+要运行的文件)运行代码；操作比较繁琐，如何简化？

•   ts-node: 将ts代码在内存中完成编译，同时完成运行（没有生产编译结果。内存中编译并运行）

　　#安装
　　npm i -g ts-node
　　#然后运行
　　ts-node src/index.ts(文件名)

•    nodemon: 监测文件的变化，达到自动编译运行src/index.ts

    #安装

　　npm i -g nodemon

　　#执行
　　nodemon --exec ts-node src/index.ts
　　# 更精确的指定监控文件
　　nodemon --watch src -e ts --exec ts-node src/index.ts
    --watch src 指定监测的文件夹为src   
    -e ts       指定监测的文件扩展名为ts 避免监控其他不需要的文件

• 　　还可以在package.json中属性脚本 简化运行指令

  "scripts": {
    "dev": "nodemon --watch src -e ts --exec ts-node src/index.ts" },

#运行时 只需输入指令
　　npm run dev

 

5. 开发完成后，使用tsc指令编译即可