Blogger Information
Blog 91
fans 0
comment 0
visits 77091
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
系统学习 TypeScript(四)——变量声明的初步学习
编程三昧
Original
896 people have browsed it

TypeScript

前言

认识了 TypeScript 中的基础类型,接下来当然是变量声明的相关学习了。

声明多维数组

假如有这么一个声明:

let arr3: number[][][];

想要知道 arr3 的具体类型,其分析步骤如下:

image-20220225151900823

可以看到,类型拆解是从右向左的,对应到具体变量值上就是从外向内一层层拆解的。

这里只是举个例子,稍微有点经验的人一眼就能判断出 arr3 是一个三维数组。但是,授人以鱼不如授人以渔,这个分析方法却适用于绝大多数复杂数据类型分析。

属性重命名

在有了 ES6 的解构赋值之后,我们可以这么声明变量:

let personInfo1 = {    name: "编程三昧",    age:22}let {name: nameP, age: ageP} = personalInfo1;

以上代码声明了 nameP 和 ageP 两个变量。需要注意的是:变量声明中,冒号后面跟的不是数据类型,而是新声明来替代原对象属性值的变量。

如果在 TypeScript 中,要指定 nameP 和 ageP 的数据类型,需要这么写:

let { name: nameP, age: ageP }: { name: string; age: number } = personInfo1;

其实这个类型指定可以放在对象声明中,指定对象每一项属性值的类型:

let personInfo1: { name: string; age: number } = {    name: "编程三昧",    age: 22};personInfo1.name = 12; // Error 不能将类型“number”分配给类型“string”// let {name: nameP, age: ageP} = personInfo1;let { name: nameP, age: ageP } = personInfo1;nameP = 12; // Error 不能将类型“number”分配给类型“string”

let 和 const 的暂时性死区

以下代码在 TypeScript 中不会报错,但是在实际运行中会报错。

function foo(): number {    return a1;}foo();let a1: number = 12;

实际运行报错:

image-20220225144916570

我自己的理解是:静态编译时只负责检测数据类型是否正确,而动态运行时才会检测语法逻辑错误,恰好暂时性死区是在运行时才产生的。

总结

以上就是我在学习 TypeScript 变量声明时所记录的注意事项和总结。

~

~ 本文完,感谢阅读!

~

学习有趣的知识,结识有趣的朋友,塑造有趣的灵魂!

大家好,我是〖编程三昧〗的作者 隐逸王,我的公众号是『编程三昧』,欢迎关注,希望大家多多指教!

Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post