系统学习 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天前
|
存储 人工智能 开发框架
Eliza:TypeScript 版开源 AI Agent 开发框架,快速搭建智能、个性的 Agents 系统
Eliza 是一个开源的多代理模拟框架,支持多平台连接、多模型集成,能够快速构建智能、高效的AI系统。
28 8
Eliza:TypeScript 版开源 AI Agent 开发框架,快速搭建智能、个性的 Agents 系统
|
3月前
|
JavaScript 前端开发 开发者
深入理解TypeScript:类型系统与实用技巧
【10月更文挑战第8天】深入理解TypeScript:类型系统与实用技巧
|
2月前
|
开发框架 JavaScript 前端开发
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势。通过明确的类型定义,TypeScript 能够在编码阶段发现潜在错误,提高代码质量;支持组件的清晰定义与复用,增强代码的可维护性;与 React、Vue 等框架结合,提供更佳的开发体验;适用于大型项目,优化代码结构和性能。随着 Web 技术的发展,TypeScript 的应用前景广阔,将继续引领 Web 开发的新趋势。
43 2
|
3月前
|
JavaScript 前端开发 开发者
深入理解TypeScript:类型系统与最佳实践
【10月更文挑战第8天】深入理解TypeScript:类型系统与最佳实践
|
2月前
|
JavaScript 前端开发 安全
TypeScript进阶:类型系统与高级类型的应用
【10月更文挑战第25天】TypeScript作为JavaScript的超集,其类型系统是其核心特性之一。本文通过代码示例介绍了TypeScript的基本数据类型、联合类型、交叉类型、泛型和条件类型等高级类型的应用。这些特性不仅提高了代码的可读性和可维护性,还帮助开发者构建更健壮的应用程序。
34 0
|
4月前
|
JavaScript
typeScript基础(1)_原始数据类型学习
本文介绍了TypeScript中的原始数据类型,包括布尔型、数值型、字符串型、`void`、`null`和`undefined`,并展示了如何在TypeScript中声明和使用这些类型。同时,还介绍了如何通过`tsc`命令编译TypeScript文件。
57 4
|
3月前
|
JavaScript 索引
TypeScript(TS)安装指南与基础教程学习全攻略(二)
TypeScript(TS)安装指南与基础教程学习全攻略(二)
63 0
|
3月前
|
JavaScript 前端开发 安全
TypeScript(TS)安装指南与基础教程学习全攻略(一)
TypeScript(TS)安装指南与基础教程学习全攻略(一)
35 0
|
3月前
|
JavaScript 前端开发 开发者
深入理解TypeScript:类型系统与实用技巧
【10月更文挑战第8天】深入理解TypeScript:类型系统与实用技巧
|
3月前
|
JavaScript 前端开发 安全
深入理解TypeScript:增强JavaScript的类型安全性
【10月更文挑战第8天】深入理解TypeScript:增强JavaScript的类型安全性
66 0