typescript学习回顾(一)

前提概要

ts是什么？

ts全称是typescript，它是js的超集，所谓超集就是在js基础上给我们扩展了很多的功能。它主要是用来约束js的，它是一个可选的静态的类型系统，它主要是为了解决我们以往使用js开发中会存在的各种问题，以及用于我们大型的项目。

js开发的问题：

• js语言本身的特性，决定了js无法适应大型项目，但是随着大前端的一个趋势，前端可以做的事情特别多，并不是像以前一样，页面都是直接从服务端直接返回，前端无用武之地，现在前端可以做的事情特别多，如果继续使用js进行开发的话会出现各种问题。
• js是弱类型的语言，变量可以随时变换类型，在大型项目协助的场景，项目可能由多个人协助完成，如果使用js的情况，在没有沟通和文档的情况下，可能一个变量被开发者随意改来改去，最后可能都忘记了这个变量的原本的存储的类型。
• js是解释性语言，每次运行时才会发现问题，在开发中其实很容易出现代码打错的情况，这种情况人为并不能很好的避免，js对于错误的变量也不会自动提示错误，它会认为是未定义undefined

上面的问题可以看出在大型项目开发中，js还是会存在或多或少的问题，它在设计之初就不是个强类型严谨的语言，语法也是比较松散的。

为什么要学习ts？

学习ts主要就是为了解决以往js所带来的一些问题，前提可能ts会写的比较繁琐，但是会为后面的项目维护和继续运维打好一个很好的基础，会减少我们开发中很容易犯的错误，ts有很好的智能提示，它的发生是在编译之前，编译之前就能知道哪里存在问题。

ts最终还是会转换成js代码的，最终在浏览器上执行的还是js，但是这个js是完全没有问题的，因为它经过了ts这一层，就不会出现一些其他的问题。

ts的特点

• 超集

js能写的，ts随便写，但是ts还提供了很多丰富的工具

• 类型系统

ts会对代码中所有标识符进行类型检测，包括（变量，函数，参数，返回值）

• 可选的

ts是一个可选的类型系统，我们可以开启ts，但是不进行太多严格的配置，一边学习一边使用的途中，再慢慢去完善相应的配置信息

• 静态的

无论是浏览器还是nodejs环境都无法直接识别ts代码，它最终都会被编译成js来执行，所以它只发生在运行之前，不会发生在编译时。

• 面向对象

ts增强了面向对象的开发，用ts可以编写完善的面向对象代码

官网

官方网站：https://www.typescriptlang.org/

中文网站：[https://www.tslang.cn/docs/home.html](

在node中搭建ts开发环境

首先要安装几个依赖

全局安装typescript，这里主要是为了方便使用它的tsc编译的命令

npm i typescript -g
npm i @types/node

解释：

@types/node
@types是一个ts官方的类型库，其中包含了很多对js代码的类型描述。
> Jquery: 用js写的，没有类型检查
> 安装@types/jquery，为jquery库添加类型定义

配置文件

{
  "compilerOptions": { //编译选项
    "target": "ES2016", //配置编译目标代码的版本标准
    "module": "CommonJS", //配置编译目标使用的模块化标准
    "lib": ["ES2016"],
    "outDir": "./dist"
  },
  "include": ["./src"]
}

这里目前我们只配置了两个属性

• compilerOptions：配置ts编译的选项

  • target：配置编译目标代码的版本标准
  • module：配置编译目标使用的模块化标准
  • lib：ts默认使用的是哪些库（环境），可以配置多个
  • outDir：配置

• include：配置编译包含的文件路径

目录结构

• dist/

• node_modules

• src

  • index.ts

• package.json

• tsconfig.json

我们在index.ts里面随便写点内容

let a:string = "asdf"; 

console.log("asdasdasf11")

:string在变量后面，表示这个a变量只能是string的类型，不能任意的进行赋值，否则ts会进行报错

编译

我们通过tsc命令，就可以自动生成编译好的js文件，它会在dist/目录下，这是我们上面配置的outDir属性所生效的。

第三方库简化流程

但是我们在使用ts开发的时候不希望频繁的去进行编译，可以使用ts-node库，它可以帮助我们去编译ts代码并且在控制台运行出结果

npm i -g ts-node

使用：

ts-node ./src/index.ts

但是这样每次使用太麻烦，我们把它配置到package.json，而且还存在一个问题，它不会进行热更新，我们再去安装一个可以实时热更新的插件nodemon

全局安装nodemon，这个主要是开发环境的时候使用，当文件变化它会自动热更新

npm i -g nodemon

package.json

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

我们这样配置完，后续就可以直接通过npm run dev来进行编译，这样ts代码在开发过程中就可以比较流畅了