TypeScript中的类型注解和类型推断

news/2024/5/20 3:58:49 标签: 前端, ts, js

码字不易,有帮助的同学希望能关注一下我的微信公众号:Code程序人生,感谢!代码自用自取。

在这里插入图片描述

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

type annotation类型注解

这个概念我们在前三节课中一直使用,只是我没明确这个概念和关系,所以你会觉的很陌生。这就好比,你身边有一个特别漂亮的姑娘,她一直很喜欢你,你也很喜欢她,但窗户纸一直没捅破,直到有一天你们喝多后,去了如家酒店(谈了谈心),你们的关系就明确了。

学程序并没有这么复杂,我们直接点,新建一个文件demo4.ts ,然后看代码:

let count: number;
count = 123;

这段代码就是类型注解,意思是显示的告诉代码,我们的count变量就是一个数字类型,这就叫做类型注解。是不是一下就明白了,其实程序这东西就这么简单,真正复杂的是人。

type inferrence类型推断

当你明白了类型注解的概念之后,再学类型推断就更简单了,先来看一段代码。还是在Demo4.ts文件中写入下面的代码。

let countInference = 123;

这时候我并没有显示的告诉你变量countInference是一个数字类型,但是如果你把鼠标放到变量上时,你会发现 TypeScript 自动把变量注释为了number(数字)类型,也就是说它是有某种推断能力的,通过你的代码 TS 会自动的去尝试分析变量的类型。这个就彷佛是人的情商比较高,还没等女生表白那,你就已经看出她的心思。

工作使用问题(潜规则)

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

先来看一个不用写类型注解的例子:

const one = 1;
const two = 2;
const three = one + two;

再来看一个用写类型注解的例子:

function getTotal(one, two) {
  return one + two;
}

const total = getTotal(1, 2);

这种形式,就需要用到类型注释了,因为这里的onetwo会显示为any类型。这时候如果你传字符串,你的业务逻辑就是错误的,所以你必须加一个类型注解,把上面的代码写成下面的样子。

function getTotal(one: number, two: number) {
  return one + two;
}

const total = getTotal(1, 2);

这里有的一个问题是,为什么total这个变量不需要加类型注解,因为当onetwo两个变量加上注解后,TypeScript 就可以自动通过类型推断,分析出变量的类型。

当然 TypeScript 也可以推断出对象中属性的类型,比如现在写一个小姐姐的对象,然后里边有两个属性。

const XiaoJieJie = {
  name: "刘英",
  age: 18,
};

写完后你把鼠标放在XiaoJieJie对象上面,就会提示出他里边的属性,这表明 TypeScript 也分析出了对象的属性的类型。

在写 TypeScript 代码的一个重要宗旨就是每个变量,每个对象的属性类型都应该是固定的,如果你推断就让它推断,推断不出来的时候你要进行注释。


有微信小程序课设、毕设需求联系个人QQ:505417246

关注下面微信公众号,可以领取微信小程序、Vue、TypeScript、前端、uni-app、全栈、Nodejs、Python等实战学习资料
最新最全的前端知识总结和项目源码都会第一时间发布到微信公众号,请大家多多关注,谢谢

关注公众号后,回复前端面试题,领取大量前端面试题汇总pdf资料在这里插入图片描述


http://www.niftyadmin.cn/n/1576447.html

相关文章

中考经验

快六月了。 也就是说快要中考和高考了。 明天sugar的小学妹就要回母校准备中考了,作为一个称职的好学姐,sugar打算给学妹传授点中考经验。 去年的这个时候sugar也是在苦逼奋斗中考的,呜呜呜~~~~ 我认为中考这个东西完全是靠心态,据…

微信小程序如何实现将数据导出生成excel

码字不易,有帮助的同学希望能关注一下我的微信公众号:Code程序人生,感谢!代码自用自取。 这个需求也是我在接私活的时候遇到的,需求就是,要实现将指定数据库表的数据全部导出生成excel和按需导出&#xff0…

用位运算实现两个整数的加减乘除(根据网上内容整理)

一、整数加法用位运算实现加法也就是计算机用二进制进行运算,32位的CPU只能表示32位内的数,这里先用1位数的加法来进行,在不考虑进位的基础上,如下1 1 01 0 10 1 10 0 0很明显这几个表达式可以用位运算的“^”(按位异或)来…

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

码字不易,有帮助的同学希望能关注一下我的微信公众号:Code程序人生,感谢!代码自用自取。 这节主要学习一下函数的参数类型定义和返回值的定义,学完这节内容后,你会对函数的参数和返回值类型定义都有通透的了…

IIS中HTTP压缩概述

一. HTTP压缩概述 HTTP压缩是在Web服务器和浏览器间传输压缩文本内容的方法。HTTP压缩采用通用的压缩算法如gzip等压缩HTML、JavaScript或CSS文件。压缩的最大好处就是降低了网络传输的数据量,从而提高客户端浏览器的访问速度。当然,同时也会增加一点点服…

TypeScript中数组类型的定义

码字不易,有帮助的同学希望能关注一下我的微信公众号:Code程序人生,感谢!代码自用自取。 这期学习一下 TypeScript 中的数组类型,一般的数组类型定义我们已经接触过了,只是没有单独拿出来讲,所以…

day6 os模块

OS模块 提供对操作系统进行调用的接口 (1)os.getcwd() 获取当前工作目录,即当前python脚本工作的目录路径 >>> os.getcwd() 获取Python当前脚本工作的目录路径  /home/zhuzhu (2)os.chdir("dirn…

TypeScript中元组的使用和类型约束

码字不易,有帮助的同学希望能关注一下我的微信公众号:Code程序人生,感谢!代码自用自取。 TypeScript 中提供了元组的概念,这个概念是JavaScript中没有的。但是不要慌张,其实元组在开发中并不常用&#xff0…