typeScript知识总结

193 阅读4分钟

我们首先考虑学习及使用typeScript的好处是什么?

  1. 增强代码可读性和维护性

        我们首先通过Interfaces来定义对象的类型,里面包含了名字和年龄。随后定义一个introduce函数,规定需要传递两个参数,一个为招呼用语greet为字符串格式,一个为介绍人person对象遵循刚刚定义的person接口。定义好后我们尝试只传递一个参数试试。


        可以发现报错了,ide提示应该有两个,但是只提供了一个参数。但是唯一的缺点是其实我们传递了person而没有传递greet,但是其会因为根据参数的位置而提示person参数未提供。

        那么我们再尝试下参数正确,对象属性不正确会不会报错呢。当我们去掉age属性时,将函数参数传递正确时仍会如下图提示传递的person不遵循预期的person接口,缺少age属性。


      2.超强的提示能力

我们看下图,我们定义了greet可选参数为hi和hello两种选择,那么ide就会非常智能的直接将两种选择提供出来。

        包括当我们在编写一些dom操作代码时,所进行的提示其实都是ts所带来的福利,如下图,其实是vsCode内置了其声明文件



看完了好处我们总结一下typeScript基本用法

1.原始类型

原始类型分为以下几种,其中最新标准的bigInt如需支持需配置,所以暂不列出。其中需要注意的是undefined和null是所有类型的子类型 因此他俩可以赋值给任意其他类型。而使用构造函数new出来的当然不能赋值给对应变量 因为其new出来的返回为一个对象而非原始值。

2.任意值

任意值可以通过any声明,也可以在声明时不赋予值及类型从而达到任意值类型的效果。任意值类型随意进行转换和操作而不报错。这里十分不建议使用any。

其中需要注意的是 上文中强调任意值可以通过声明时不赋予值及类型实现,而如果声明时赋予了值那么其会默认进行类型选定,也就是类型推论。类似如下,可以看到我们没有对于num进行任何类型的声明,但是在初始化时赋予了123的number类型,那么其就会默认为number类型。


3.联合类型

联合类型就是指为变量赋予多选类型,类似下图,赋予超出所选类型时将报错。

需要注意的是,当参数中存在联合类型时,那么只能访问联合类型的公用属性,当出现下列情形时将发生报错。


4.接口

当我们需要对对象进行约束时,我们需使用interface去定义一个接口,如下图。其中多出或少了定义的属性都会进行报错提示。其中可选属性则可以在其后面+?,只读属性在其前面加readonly标识。


当我们希望接口中存在任意属性时,可通过以下格式。需要注意的是任意属性的类型需包含已确定属性的类型。


5.数组

可通过类似一下方式进行数组的声明。可以看到指定为number类型时,如果存在string类型则将发生报错。

也可以通过interface来约束,因为对于数组来说对比对象的话其key就是index也就是number类型,所以可以这样写。可以看到当植入字符串时出错,代表约束成功~

而类数组也就是像函数参数这种可以通过TypeScript中内置的IArguments进行定义

function fn(){
    let arg: IArguments: arguments;
}

6.函数

对于函数来说主要是约束参数及返回值。如下图所示,规定存在两个参数,参数1为number类型,参数2为string类型,返回值为空。当设定返回值为空

当需要可选参数时,同上面一样+?即可,需要注意的是可选参数需要放在必选参数的后面,因为如果放前面的话,一旦传参系统将无法判断传的是可选参数还是必选参数。


其中有一个类似java语法的重载写法类似下面这种,需要注意的是最下面的实现函数中需要包含上述定义的类型。


以下实验说明typescript高度智能,如上文所说当参数中存在联合类型时,那么只能访问联合类型的公用属性,但是当我们使用if else排除其中一种类型后,再使用另一种类型独有的方法时将不会报错。