TS开发环境准备

本文目录:

  • 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, 并新建连个子文件夹tsjs
  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的理解,实际项目开发中,通常都会使用脚手架工具,会自动集成这些功能。

你可能感兴趣的:(TS开发环境准备)