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

码字不易，有帮助的同学希望能关注一下我的微信公众号：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);

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

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

const total = getTotal(1, 2);

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

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

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

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

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

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

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

关注公众号后，回复前端面试题，领取大量前端面试题汇总pdf资料