TS开发环境准备

Posted 2023-02-13 跨链技术践行者

本文目录：

• 1.TS介绍
• 2.TS的编译
• 3.开发环境加入代码检查工具eslint和prettier
• 4.开发环境配置文件

1.TS介绍

TypeScript 是一门为开发大型 javascript 应用而设计的语言。TypeScript 在 JavaScript 的基础上增加了类、模块、接口、泛型和静态类型（可选）等常见的概念。它是 JavaScript 的超集：所有 JavaScript 代码都是有效的 TypeScript 代码，因此任何 JavaScript 项目都可以无缝引入 TypeScript，TypeScript 编译器最终会把 TypeScript 代码编译成 JavaScript 代码。
TypeScript本身并不能直接运行在浏览器上,需要编译成JavaScript进行运行(可以认为TypeScritp只存在于开发阶段,生产阶段依然使用的是我们熟悉的JavaScript。

2.TS的编译

手动编译：
使用命令 npm install -g typescript; 以上命令会在全局环境下安装 tsc 命令，安装完成之后，我们就可以在任何地方执行 tsc 命令了； 在命令行里面编译一个Typescript文件 tsc hello.ts，就会对应着生产一个js文件
npm install typescript -g

• 在命令行输入 tsc -v 能够打印版本号就证明安装成功
• 编写一个hello.ts文件， 使用 tsc hello.ts 就会生成一个js文件

工程化编译：

1. 新建一个文件夹 code， 并新建连个子文件夹ts 和 js
2. npm init -y 会生成一个package.json文件夹
3. tsc --init 会在code目录下生成一个tsconfig.json的配置文件

// 将tsconfig的配置文件修改为这个样子

  "compilerOptions": 
    "target": "es5",
    "module": "commonjs",
    "outDir": "./js",
    "rootDir": "./ts",
  

1. 然后点击vscode上面的 终端--> 运行任务 --> tsc:watch 实时监听这个ts文件； 最后就会发现在js文件夹里面生成对应的js文件； 在浏览器里面使用和在nodejs环境中使用都是可以的

默认的编译错误，也会生成js文件，这不是我们想要的，
解决办法：在tsconfig.json文件中新添加一个属性noEmitOnError, 设置为true，默认为false， 报错时就不生成js文件
我们需要借助俩两个vscode中的插件 ESLint，Prettier-Code formatter，首先在插件中搜索并点击安装

3.开发环境加入代码检查工具eslint和prettier

1.npm install eslint -g 在全局安装一个命令行工具， eslint -v 打印出版本号证明安装成功

1. 然后在当前项目的文件夹里面 npm init -y 初始化一个package.json的配置文件

2. 然后使用eslint --init 在对话窗口里面 依次选择; 结束后会有一个.eslintrc.js配置文件生成
   手动修改eslint配置的方法：

   

    

   eslint提示.png

   

配置内容修改.png

4.. 再安装本地的一个typescript库，npm install typescript --save-dev
我们接下来要实现在vscode里面保存就自动使用eslint检查我们的代码格式并格式化
5.. 这需要修改一下vscode的配置环境文件settings.json，我们一保存，vscode就会给我们提示是否符合当前规范； 如果想编辑器自动检查并帮我们修改，就修改配置文件autoFix属性为true

设置.png

6.在当前目录下面新建一个 .prettierrc.js的配置文件，在这里书写相应的规则即可
然后使用ctrl + s保存就会提示我们代码风格的问题，并且自动给我们修改过来

7.eslint和prettier的区别
1. eslint侧重于代码的风格结构的检查和格式化，如所有函数必须命名，回调函数必须使用箭头函数等等
2. prettier侧重于代码样式相关的格式化，如空格，分号，缩进等

4.开发环境配置文件

1..eslintrc.js文件
工作里面主要配置里面的rules规则
2..prettierrc.js文件
在项目的根目录下创建一个这个文件，里面写上我们需要的对应的eslint检查的规则，自动格式化代码
3..tsconfig.js文件
主要是给编译器tsc使用的一些自定义配置，让编译打包出来的文件符合我们的需求
4..package.json文件
每个前端工程项目都会有的文件，主要是里面的项目依赖和开发依赖的第三方包，让我们随时可以跑项目
5..settings.json文件
想要保存代码的时候就自动按照eslint的风格检查代码和格式化代码，就需要手动修改这个文件里的配置
eslint.validate 表示要使用eslint检查文件
eslint.autoFixOnSave 表示检查完成之后是否自动格式化代码

注：上面的步骤讲解主要是为了加深对eslint的理解，实际项目开发中，通常都会使用脚手架工具，会自动集成这些功能。