关于typescript（TS）入门的那些事

简介

typescript（简称TS）作为一门新的热门语言，不管是vue还是react都对它进行了大量的支持，特别是vue3版本还使用了typescript重新写了它的架构，可以说它是一门非常好的一个东西。

typescript其实本质上来说，它就是JS的一个超集，就是对JS一些不太完美的地方，对它进行了补充，来使得在编程的过程中，可以更加好的编程体验。

主要特点

typescript的主要特点有下面的几个：
1、它是一个静态的类型语言，也就是在它定义下来的时候，是不可以修改成其他类型的。

在TS里面，如果你对一个已经声明了类型的变量再次对它赋值一个不同类型的值，那是不可以的，
例如这个例子一样，当a是数字类型的时候，如果在对它赋值字符串类型，就不行。

2、当它确定了类型的时候，那么这个类型相关的方法API也会关联到提示里面去。

就好像这样，当它为数组类型的时候，那么数组相关API都会出现在提示框里面。

环境安装

TS在运行的过程中不是跟JS一样可以直接在浏览器里面跑的，它还需要一些准备的环境工作。

当你安装了node的时候，可以运行下面一个命令

npm i typescript -g

同时如果需要将TS文件在终端里跑，也需要一些模块的辅助，会相对来说比较方便，所以可以在运行下面这个命令

npm i node-ts

有了这两个包，就可以愉快的学习我们这门全新的TS语言了！！

入门一：静态类型

在TS里面如果想要把一个变量声明成为一个类型的话，可以这样做

这样就把一个变量给定义为一个字符串了，也就是在赋值的时候，只能给它赋值成为字符串，如果是其他类型的话，就会给你报错。

在TS里面的静态类型一共有以下几个类型：1、number，2、sybool，3、string，4、null，5、undefinded，6、boolean，7、void（空）

入门二：对象类型

在TS里面还有一个比较常见的就是对象类型，例如下面这种情况

这里有一个必须要注意到点就是，在对对象进行这种形式的定义的时候，里面有几个属性，那么对象实际属性必须一一对应，不能多也不能少。

那么说到对象类型的时候，有一个跟对象会一起出现的东西，那就是解构，在解构的时候，如果你想对解构的属性进行注解的时候，就必须这样做

同样的也是，所有的属性都必须一一对应。

入门三：类型注解和类型推断

类型注解

类型注解，其实我上面写到那些对变量进行定义类型的方式，用官方的说法来说，全部叫做——类型注解，意思就是我们人为的对这个变量进行类型的定义。

意思就是在给对变量赋值之前，先对它的类型进行注解，这样如果赋值的类型跟注解的类型不同的时候，编辑器就会报错。

这里需要补充一点就是，如果想要对一个变量注解的类型不止一种，可以使用 | 来完成注解

前面的类型注解已经基本交代清楚了，这里就不再多说，这里主要想要说的内容是——类型推断

类型推断

类型推断就是字面上的意思，是由编辑器对你的变量进行推断它的类型

就好像上图，你不需要对它进行注解，编辑器会根据你的赋值推断出a是一个数字类型。

在比如下面这个例子，TS会通过你的使用的方法，推断出类型——当两个数字类型的变量想加的时候，返回的一定会是一个数字类型的变量，这就是类型推断。

入门四：数组和元组

在对数组进行注解的时候，我们会使用下面这种形式

但是我们知道，数组里面其实很多时候是会出现多种类型的变量混合的情况出现，如果采用了上面这种方法的话，就必须全部是数字了，那么根据上面说的，就可以采用 | 这个符号来完成应对，也就是

那如果咱们想要对这个数组进行一个精准的注解，也就是注解第一项必须是一个数字，第二项必须是一个字符串，这个在数组里就无法进行了，而这就会需要用到TS里的另一个概念——元组

这样写的意思就死这个数组里面对应的第一项必须是一个字符串，第二项必须是一个数字，而且也规定了，不能再多一项，或者是少一项，否则都会报错。

同时还可以数组里套元组的方法，也是可以的

入门五：interface和类型别名

这里，我先介绍一下什么是类型别名，以及它是用来干什么的

类型别名

例如当一个对象类型，定义了很多种属性的时候

这里的type就是属于类型别名，它后面可以是任何类型，而这也是它跟interface的主要的区别，因为interface必须是一个函数或者是对象，功能上，两个是非常相像的。

interface接口

它在使用的场景跟类型别名是非常相像的，都是用来封装注解的作用。

但是也有一些区别，那就是它必须是一个函数或者是一个对象，在使用方法上也是一样的，唯一的区别就是在一个类里面运用这个接口的时候，必须要使用 implements 来进行配合。

还有一个就是interface也是可以被继承的，而继承的方式也是通过extends来实现

另外还有一些小的知识点，如果有一个属性你不知道它会不会出现，这时候可以使用？的方法来实现，
另外还有更改该属性为可以读，但是不可写，则可以通过readonly来实现.
例如

最后

typescript的整体的入门大概就差不多是这么多东西了，剩下的很多像类的一些概念，大部分跟JS里的ES6相关知识是相同的，例如class，这方面可以去看我的另一篇博客 聊一聊ES6中的类的声明

这篇文章更多的是在学习TS的过程中的一些笔记和一些理解，因为博主我也是才刚刚入门TS，后续我继续学习还会更新相关的进阶内容。

如果你觉得我的博客对你有所帮助的话，点个赞吧！！！
如果我说的哪里有错误，也随时欢迎评论留言，大家一起进步呀！！