用大白话让你理解TypeScript的要点.(一)

简介: 用大白话让你理解TypeScript的要点.(一)

一.名字的解释


  1. 首先学习一个东西的时候,得搞明白它的id是什么意思。Type 就是类型的意思,我要约束你变量的声明的时候的类型,不让你那么随意定义变量了。
  2. Ts相当于一个新的语言,js它相当于一个子集,你不能再用js的思维去思考一个变量的定值。
  3. 首先我们要知道,js ,java是一门高级程序语言,这个高级并不是传统意义上更上档次的理解。这个高级的意思在这里更像是更加简单上手的意思,而C,C++被称为低级语言,这里的低级更像是接近计算机硬件底层的意思。
  4. 用我学C三年朋友的开玩笑话来讲:“你们这些什么java啊,js啊,最终还不都得转换成C?然后再进行计算机硬件的交互?哪像我们,我们就直接跟硬件打交道的。知道为什么外挂用c开发吗?别说什么网页了,我直接能操作你电脑把你浏览器给你删了。”其实这句他无心的玩笑话,让我对计算机的原理有了一个更深刻的理解。我们都知道其实电脑上编写的代码最终都是需要转换成010101这样二进制数据进行操作的,为什么C快?因为C直接就可以转换成0101进制而高级语言还需要中间的一个编译步骤,然后再转换成01010(你暂时可以这样理解)。就像开车从起点A---->到终点B(这里指计算机硬件,走过的路就是编译的过程),C语言一路畅通无阻,直接到达。而java高级语言需要经过一个中间站点X,来进行一次简单的编译,最后到达终点B。A------X------B。

二.Ts的关键字


1.当你有简单了解过Java的时候,你会发现Ts和java简直一摸一样。

2.这里Ts最关键的核心就是 :,对没错,就是冒号,万物冒号。

3.在正常编写代码的时候,你可以按照先写js的格式去书写你的变量,我知道刚开始就有人想完全拥抱Ts的思想,但是往往的情况就是熟练JS的格式,你刚开始去写Ts会非常难受,经常忘记冒号。其实在业务中我也是先写js的格式,当组件内部变量都确定好了,再回过头去补充type或者interface。如下:

image.png

等我这个页面差不多了,回过头来补充即可。

image.png

4.数组格式的约束:

其实思想上一定要灵活去转变,不要学习了Ts就想着刚开始就直接给它冒号约束类型,这是不可能的,因为后端返回给你的数据你只有收到了才能确定。所以你就先按照js写行不?求求你了

数组场景一


假设这是后端给我的数据,ok,我确定了里面只有数字类型,那么我再去约束就行了。

image.png

image.png

这里你还没告诉Ts解析器这个变量是什么类型的,不然他会默认为是基本类型,所以我们需要告诉他是数组,也非常简单,加个【】即可。

image.png

理清整段代码的意思:我定义了一个数组Arr,我确定它是一个数组,我加上了[],里面只放数字,我在[]前加了number

数组场景二


对象类型的数组,也是后端数据最常见的。老规矩,还是按照js代码写,因为你不知道里面到底有什么属性,属性值的类型。

image.png

ok假设我已经确定了,我们还按照上面的思路来写。首先是对象数组,这是确定的。

image.png

No,不可以这样。到这里其实思路有些不同,我们需要先去考虑数组里面对象的类型,然后再反过来添加到数组的约束条件里。因为你先是根据数组里的数据类型,再去判断数组的类型。所以我们需要先给对象添加类型约束。

image.png

对象格式确定好了,直接告诉NotSureArr,你这个数组就存放这个对象格式的数据就完事了。

image.png

如果数据里还有age,sex之类的这么办呢?还是那个思路,不要先去想着改type里的东西,先把你的数据写好,它报错就让它报错。

image.png

然后再去书写type,一定记住,先有数据!再有数据类型!

image.png

数组场景三


我不确定有些数据到底有没有什么属性。方这个对象数据,它压根就没有sex属性,我也不想给它加sex属性,但是第一个对象有sex属性,这可咋办?如下:

image.png

很简单的只需在不确定的属性上添加 ? 即可。sex?: string

image.png

数组场景四


我只确定有哪些属性,不确定属性具体类型。

image.png

这种场景不常见,因为你这样写,你还不如直接不约束条件,直接写JS格式的就完事了。何必折腾写Ts呢?


相关文章
|
JavaScript 索引
用大白话让你理解TypeScript的要点.(三)
用大白话让你理解TypeScript的要点.(三)
用大白话让你理解TypeScript的要点.(三)
|
JavaScript
用大白话让你理解TypeScript的要点.(二)
用大白话让你理解TypeScript的要点.(二)
用大白话让你理解TypeScript的要点.(二)
|
2月前
|
JavaScript
typeScript进阶(9)_type类型别名
本文介绍了TypeScript中类型别名的概念和用法。类型别名使用`type`关键字定义,可以为现有类型起一个新的名字,使代码更加清晰易懂。文章通过具体示例展示了如何定义类型别名以及如何在函数中使用类型别名。
40 1
typeScript进阶(9)_type类型别名
|
1月前
|
JavaScript 前端开发 安全
深入理解TypeScript:增强JavaScript的类型安全性
【10月更文挑战第8天】深入理解TypeScript:增强JavaScript的类型安全性
45 0
|
1月前
|
JavaScript 前端开发 开发者
深入理解TypeScript:类型系统与实用技巧
【10月更文挑战第8天】深入理解TypeScript:类型系统与实用技巧
|
2月前
|
存储 JavaScript
typeScript进阶(11)_元组类型
本文介绍了TypeScript中的元组(Tuple)类型,它是一种特殊的数组类型,可以存储不同类型的元素。文章通过示例展示了如何声明元组类型以及如何给元组赋值。元组类型在定义时需要指定数组中每一项的类型,且在赋值时必须满足这些类型约束。此外,还探讨了如何给元组类型添加额外的元素,这些元素必须符合元组类型中定义的类型联合。
47 0
|
2月前
|
JavaScript
typeScript进阶(10)_字符串字面量类型
本文介绍了TypeScript中的字符串字面量类型,这种类型用来限制变量只能是某些特定的字符串字面量。通过使用`type`关键字声明,可以确保变量的值限定在预定义的字符串字面量集合中。文章通过示例代码展示了如何声明和使用字符串字面量类型,并说明了它在函数默认参数中的应用。
37 0
|
7天前
|
JavaScript 安全 前端开发
TypeScript类型声明:基础与进阶
通过本文的介绍,我们详细探讨了TypeScript的基础与进阶类型声明。从基本数据类型到复杂的泛型和高级类型,TypeScript提供了丰富的工具来确保代码的类型安全和可维护性。掌握这些类型声明能够帮助开发者编写更加健壮和高效的代码,提高开发效率和代码质量。希望本文能为您在使用TypeScript时提供实用的参考和指导。
17 2
|
20天前
|
JavaScript 开发者
在 Babel 插件中使用 TypeScript 类型
【10月更文挑战第23天】可以在 Babel 插件中更有效地使用 TypeScript 类型,提高插件的开发效率和质量,减少潜在的类型错误。同时,也有助于提升代码的可理解性和可维护性,使插件的功能更易于扩展和升级。
|
1月前
|
JavaScript 前端开发
TypeScript【类型别名、泛型】超简洁教程!再也不用看臭又长的TypeScript文档了!
【10月更文挑战第11天】TypeScript【类型别名、泛型】超简洁教程!再也不用看臭又长的TypeScript文档了!