04. TypeScript 类型注释和类型推断

目录
文章目录隐藏
  1. type annotation 类型注解
  2. type inferrence 类型推断
  3. 工作使用问题(潜规则)

本文我们一起来学习一下 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 代码的一个重要宗旨就是每个变量,每个对象的属性类型都应该是固定的,如果能推断就让它推断,推断不出来的时候你要进行注释。

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 04. TypeScript 类型注释和类型推断

发表回复