4 Typescript的类型注解和类型推断

TypeScript 中的两个基本概念:类型注解类型推断,这两个概念在我们编写 TypeScript 代码时会一直使用(重点),但很多教程都没有讲解,不过在官方文档中有比较好的解释。你现在可能还不能完全理解我说的这两个概念,但是你看完文章后就会有很直观的了解啦

4.1 type annotation 类型注解

我们直接点,直接看代码
这段代码就是类型注解,意思是显示的告诉代码,我们的count变量就是一个数字类型,这就叫做类型注解

4.2 type inferrence 类型推断

当你明白了类型注解的概念之后,再学类型推断就更简单了,先来看一段代码。还是在Demo4.ts文件中写入下面的代码。
这时候我并没有显示的告诉你变量countInference是一个数字类型,但是如果你把鼠标放到变量上时,你会发现 TypeScript 自动把变量注释为了number(数字)类型,也就是说它是有某种推断能力的,通过你的代码 TS 会自动的去尝试分析变量的类型

4.2.1 工作使用问题(潜规则)

  • 如果 TS 能够自动分析变量类型, 我们就什么也不需要做了
  • 如果 TS 无法分析变量类型的话, 我们就需要使用类型注解

4.2.2 不需要注解例子

我们来看两个例子,先是一个不需要注解的

4.2.3 需要写的例子

这种形式,就需要用到类型注释了,因为这里的one和two会显示为any类型。这时候如果你传字符串,你的逻辑就是错误的,所以你必须加一个类型注解
为什么total这个变量不需要加类型注解,因为当one和two两个变量加上注解后,TypeScript 就可以自动通过类型推断,分析出变量的类型。

4.2.4 推断对象中属性的类型

当然 TypeScript 也可以推断出对象中属性的类型,比如现在写一个小姐姐的对象,然后里边有两个属性。
写完后你把鼠标放在XiaoJieJie对象上面,就会提示出他里边的属性,这表明 TypeScript 也分析出了对象的属性的类型。
在写 TypeScript 代码的一个重要宗旨就是每个变量,每个对象的属性类型都应该是固定的,如果你推断就让它推断,推断不出来的时候你要进行注释。

Demo4.ts

5 TypeScript 函数参数和返回类型定义

5.1 简单类型定义

上次我们写了一个getTotal的函数,并且对传入的参数作了定义,我们再复习一遍。
新建一个文件demo5.ts,然后写入代码
代码其实有一个小坑,就是我们并没有定义getTotal的返回值类型,虽然TypeScript可以自己推断出返回值是number类型。 但是如果这时候我们的代码写错了,比如写成了下面这个样子。
这时候total的值就不是number类型了,但是不会报错。有的小伙伴这时候可能会说,可以直接给total一个类型注解,比如写成这个样子。
这样写虽然可以让编辑器报错,但是这还不是很高明的算法,因为你没有找到错误的根本,这时错误的根本是getTotal()函数的错误,所以合适的做法是给函数的返回值加上类型注解,代码如下:

5.2 函数无返回值时定义方法

有时候函数是没有返回值的,比如现在定义一个sayHello的函数,这个函数只是简单的terminal打印,并没有返回值。
这就是没有返回值的函数,我们就可以给他一个类型注解void,代表没有任何返回值。
如果这样定义后,你再加入任何返回值,程序都会报错。

5.3 never 返回值类型

如果一个函数是永远也执行不完的,就可以定义返回值为never,那什么样的函数是永远也执行不完的那?我们先来写一个这样的函数(比如执行执行的时候,抛出了异常,这时候就无法执行完了)。
还有一种是一直循环,也是我们常说的死循环,这样也运行不完,比如下面的代码:

5.4 函数参数为对象(解构)时

这个坑有很多小伙伴掉下去过,就是当一个函数的参数是对象时,我们如何定义参数对象的属性类型。我先写个一般javaScript的写法。
在浏览器中你会看到直接报错了,意思是total有可能会是任何类型,那我们要如何给这样的参数加类型注解那?最初你可能会这样写。
你在编辑器中会看到这种写法是完全错误的。那正确的写法应该是这样的。
如果参数是对象,并且里边只有一个属性时,我们更容易写错。 错误代码如下:
看着好像没什么问题,但实际这是有问题的,正确的代码应该时这样的。
这样写才是正确的写法

Demo5.ts

6 TypeScript 中数组类型的定义

TypeScript 中的数组类型,一般的数组类型定义我们已经接触过了,只是没有单独拿出来讲,所以先来复习一下。

6.1 一般数组类型的定义

我们我们先定义一个最最最简单的数组
这时候你把鼠标放在numberArr上面可以看出,这个数组的类型就是 number 类型。这是 TypeScript 通过类型推断自己推断出来的。 如果你要显示的注解,也非常简单,可以写成下面的形式。
同样道理,如果你的数组各项是字符串,你就可以写成这样
也就是说你可以定义任意类型的数组,比如是undefined
这时候问题来了,如果数组中有多种类型,比如既有数字类型,又有字符串的时候。那我们要如何定义那。 很简单,只要加个(),然后在里边加上|就可以了,具体看代码。
数组简单类型的定义就是这样了,并不难。

6.2 数组中对象类型的定义

在实际项目当中肯定会有对象出现,那这个时候定义的话就麻烦一点点了
这样子的形式看起来比较复杂,当然这段程序是可以的,但是不好读嘛

6.2.1 Type Alias 类型别名

TS 为我们弄了一个类型别名,使用type+名字,具体看代码
这样子就好读多了

6.2.2 Class定义

当然,使用class来定义也是可以的,例如这样子
我们可以看到,是可以的~

Demo6.ts

亲亲留个评论再走呗

正在加载评论区...