系统学习 TypeScript(四)——变量声明的初步学习

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

7.png


前言


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


声明多维数组


假如有这么一个声明:


let arr3: number[][][];


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


1.png


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

这里只是举个例子,稍微有点经验的人一眼就能判断出 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;


实际运行报错:


0.png


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


总结


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


~ 本文完,感谢阅读!


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




相关文章
|
2月前
|
JavaScript 前端开发 开发工具
TypeScript的介绍,let age:number = xxx,可以直接看出数据类型,Type由微软开发,可以在任何浏览器和系统中运行,比较适合大型项目,TypeScript的安装
TypeScript的介绍,let age:number = xxx,可以直接看出数据类型,Type由微软开发,可以在任何浏览器和系统中运行,比较适合大型项目,TypeScript的安装
|
29天前
|
JavaScript 前端开发 安全
TypeScript:解锁JavaScript的超级英雄模式!类型系统如何化身守护神,拯救你的代码免于崩溃与混乱,戏剧性变革开发体验!
【8月更文挑战第22天】TypeScript作为JavaScript的超集,引入了强大的类型系统,提升了编程的安全性和效率。本文通过案例展示TypeScript如何增强JavaScript:1) 显式类型声明确保函数参数与返回值的准确性;2) 接口和类加强类型检查,保证对象结构符合预期;3) 泛型编程提高代码复用性和灵活性。这些特性共同推动了前端开发的标准化和规模化。
48 0
|
2月前
|
存储 JavaScript 开发者
【Vue3+TypeScript】CRM系统项目搭建之 — 关于 VUE3 语法新变化(四)
【Vue3+TypeScript】CRM系统项目搭建之 — 关于 VUE3 语法新变化(四)
34 0
【Vue3+TypeScript】CRM系统项目搭建之 — 关于 VUE3 语法新变化(四)
|
2月前
|
JavaScript API 网络架构
【Vue3+TypeScript】CRM系统项目搭建之 — 关于 VUE3 语法新变化(三)
【Vue3+TypeScript】CRM系统项目搭建之 — 关于 VUE3 语法新变化(三)
31 0
【Vue3+TypeScript】CRM系统项目搭建之 — 关于 VUE3 语法新变化(三)
|
2月前
|
JavaScript API
【Vue3+TypeScript】CRM系统项目搭建之 — 关于 VUE3 语法新变化(二)
【Vue3+TypeScript】CRM系统项目搭建之 — 关于 VUE3 语法新变化(二)
23 0
【Vue3+TypeScript】CRM系统项目搭建之 — 关于 VUE3 语法新变化(二)
|
2月前
|
JavaScript 前端开发
【Vue3+TypeScript】CRM系统项目搭建之 — 关于如何设计出优质的 Vue 业务组件
【Vue3+TypeScript】CRM系统项目搭建之 — 关于如何设计出优质的 Vue 业务组件
30 0
【Vue3+TypeScript】CRM系统项目搭建之 — 关于如何设计出优质的 Vue 业务组件
|
2月前
|
JavaScript 前端开发 安全
如何学习typescript?
【7月更文挑战第9天】1. 了解其为JavaScript超集,增加类型系统和ES6特性,提升代码安全性和效率。 2. 安装 TypeScript 全局 (`npm install -g typescript`),用`tsc -v`验证,或尝试在线的TypeScript Playground。 3. 学习类型注解、基础类型(如number、string、boolean等)、any与unknown,接口和类。 4. 探索高级特性,如泛型、模块&命名空间、装饰器。 5. 实践中巩固知识,如做小项目(如用React或Vue),阅读官方文档,参与社区讨论。持续编码和实践是关键。
21 0
|
2月前
|
JavaScript API UED
【Vue3+TypeScript】CRM系统项目搭建之 — 关于 VUE3 语法新变化(五)
【Vue3+TypeScript】CRM系统项目搭建之 — 关于 VUE3 语法新变化(五)
34 0
|
2月前
|
JavaScript 前端开发 API
【Vue3+TypeScript】CRM系统项目搭建之 — 关于 VUE3 语法新变化(一)
【Vue3+TypeScript】CRM系统项目搭建之 — 关于 VUE3 语法新变化(一)
38 0
|
2月前
【Vue3+TypeScript】CRM系统项目搭建之 — 关于 Element Plus 样式覆盖
【Vue3+TypeScript】CRM系统项目搭建之 — 关于 Element Plus 样式覆盖
17 0