鸿蒙TypeScript入门学习第4天:【TS变量声明】

 1、TypeScript 变量声明

变量是一种使用方便的占位符,用于引用计算机内存地址。

我们可以把变量看做存储数据的容器。

TypeScript 变量的命名规则:

  • 变量名称可以包含数字和字母。
  • 除了下划线 _ 和美元 $ 符号外,不能包含其他特殊字符,包括空格。
  • 变量名不能以数字开头。

变量使用前必须先声明,我们可以使用 var 来声明变量。

我们可以使用以下四种方式来声明变量:

声明变量的类型及初始值:

var [变量名] : [类型] = 值;

例如:

var uname:string = "Runoob";

声明变量的类型,但没有初始值,变量值会设置为 undefined:

var [变量名] : [类型];

例如:

var uname:string;

声明变量并初始值,但不设置类型,该变量可以是任意类型:

var [变量名] = 值;

例如:

var uname = "Runoob";

声明变量没有设置类型和初始值,类型可以是任意类型,默认初始值为 undefined:

var [变量名];

例如:

var uname;

实例

var uname:string = "Runoob";

var score1:number = 50;

var score2:number = 42.50

var sum = score1 + score2

console.log("名字: "+uname)

console.log("第一个科目成绩: "+score1)

console.log("第二个科目成绩: "+score2)

console.log("总成绩: "+sum)

注意: 变量不要使用 name 否则会与 DOM 中的全局 window 对象下的 name 属性出现了重名。

使用 tsc 命令编译以上代码,得到如下 JavaScript 代码:

var uname = "Runoob"; var score1 = 50; var score2 = 42.50; var sum = score1 + score2; console.log("名字: " + uname); console.log("第一个科目成绩: " + score1); console.log("第二个科目成绩: " + score2); console.log("总成绩: " + sum);

执行该 JavaScript 代码输出结果为:

名字: Runoob
第一个科目成绩: 50
第二个科目成绩: 42.5
总成绩: 92.5

TypeScript 遵循强类型,如果将不同的类型赋值给变量会编译错误,如下实例:


var num:number = "hello" // 这个代码会编译错误

2、类型断言(Type Assertion)

类型断言可以用来手动指定一个值的类型,即允许变量从一种类型更改为另一种类型。

语法格式:

<类型>值
或:

值 as 类型

实例

var str = '1' var str2:number = <number> <any> str //str、str2 是 string 类型 console.log(str2)

3、TypeScript 是怎么确定单个断言是否足够

当 S 类型是 T 类型的子集,或者 T 类型是 S 类型的子集时,S 能被成功断言成 T。这是为了在进行类型断言时提供额外的安全性,完全毫无根据的断言是危险的,如果你想这么做,你可以使用 any。

它之所以不被称为类型转换,是因为转换通常意味着某种运行时的支持。但是,类型断言纯粹是一个编译时语法,同时,它也是一种为编译器提供关于如何分析代码的方法。

编译后,以上代码会生成如下 JavaScript 代码:

var str = '1'; var str2 = str; //str、str2 是 string 类型 console.log(str2);

执行输出结果为:

1

4、类型推断

当类型没有给出时,TypeScript 编译器利用类型推断来推断类型。

如果由于缺乏声明而不能推断出类型,那么它的类型被视作默认的动态 any 类型。

var num = 2; // 类型推断为 number console.log("num 变量的值为 "+num); num = "12"; // 编译错误 console.log(num);
  • 第一行代码声明了变量 num 并=设置初始值为 2。 注意变量声明没有指定类型。因此,程序使用类型推断来确定变量的数据类型,第一次赋值为 2,num 设置为 number 类型。

  • 第三行代码,当我们再次为变量设置字符串类型的值时,这时编译会错误。因为变量已经设置为了 number 类型。

    error TS2322: Type '"12"' is not assignable to type 'number'.

更多鸿蒙开发内容:qr23.cn/AKFP8k

搜狗高速浏览器截图20240326151547.png

5、变量作用域

变量作用域指定了变量定义的位置。

程序中变量的可用性由变量作用域决定。

TypeScript 有以下几种作用域:

  • 全局作用域 − 全局变量定义在程序结构的外部,它可以在你代码的任何位置使用。
  • 类作用域 − 这个变量也可以称为 字段。类变量声明在一个类里头,但在类的方法外面。 该变量可以通过类的对象来访问。类变量也可以是静态的,静态的变量可以通过类名直接访问。
  • 局部作用域 − 局部变量,局部变量只能在声明它的一个代码块(如:方法)中使用。

以下实例说明了三种作用域的使用:

var global_num = 12 // 全局变量 class Numbers { num_val = 13; // 实例变量 static sval = 10; // 静态变量 storeNum():void { var local_num = 14; // 局部变量 } } console.log("全局变量为: "+global_num) console.log(Numbers.sval) // 静态变量 var obj = new Numbers(); console.log("实例变量: "+obj.num_val)

以上代码使用 tsc 命令编译为 JavaScript 代码为:

var global_num = 12; // 全局变量 var Numbers = /** @class */ (function () { function Numbers() { this.num_val = 13; // 实例变量 } Numbers.prototype.storeNum = function () { var local_num = 14; // 局部变量 }; Numbers.sval = 10; // 静态变量 return Numbers; }()); console.log("全局变量为: " + global_num); console.log(Numbers.sval); // 静态变量 var obj = new Numbers(); console.log("实例变量: " + obj.num_val);复制

执行以上 JavaScript 代码,输出结果为:

全局变量为: 12
10
实例变量: 13

如果我们在方法外部调用局部变量 local_num,会报错:

error TS2322: Could not find symbol 'local_num'.

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/498856.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

使用ai智能写作场景之gpt整理资料,如何ai智能写作整理资料

Ai智能写作助手&#xff1a;Ai智能整理资料小助手 Ai智能整理资料小助手可试用3天&#xff01; 通俗的解释一下怎么用ChatGPT来进行资料整理&#xff1a; 搜寻并获取指定数量的特定领域文章&#xff1a; 想像你在和我说话一样&#xff0c;告诉我你想要多少篇关于某个话题的文…

高效实用的Java输出流:BufferWriter类详解

咦咦咦,各位小可爱,我是你们的好伙伴——bug菌,今天又来给大家普及Java SE相关知识点了,别躲起来啊,听我讲干货还不快点赞,赞多了我就有动力讲得更嗨啦!所以呀,养成先点赞后阅读的好习惯,别被干货淹没了哦~ 🏆本文收录于「滚雪球学Java」专栏,专业攻坚指数级提升,…

ardupilot开发 --- Remote ID 篇

朝花夕拾 什么是 Remote ID &#xff1f;一些概念OpenDroneIDArduRemoteIDopendroneid-core-c 库 什么是 Remote ID &#xff1f; https://drone-remote-id.com/ 一些概念 符合美国航空管理局FAA规定的一些 Remote ID 设备有哪些&#xff1f; https://uasdoc.faa.gov/listDoc…

【APP_TYC】数据采集案例天眼APP查_查壳脱壳反编译_③

是不是生活太艰难 还是活色生香 我们都遍体鳞伤 也慢慢坏了心肠 你得到你想要的吗 换来的是铁石心肠 可曾还有什么人 再让你幻想 &#x1f3b5; 朴树《清白之年》 查壳 工具介绍Frida-dexDump Frida-dexDump简介 Frida-dexDump是基于Frida的一个工具&…

Java中读取html文件转成String,展示在浏览器

这里写目录标题 第一章1.1&#xff09;pom中引入依赖和html文件示例1.2&#xff09;使用hutool工具包读取html文件转为string1.3&#xff09;页面显示 第一章 1.1&#xff09;pom中引入依赖和html文件示例 引入hutool工具包依赖 <dependency><groupId>cn.hutool&…

vue前端工程化

前言 本文介绍的是有关于vue方面的前端工程化实践&#xff0c;主要通过实践操作让开发人员更好的理解整个前端工程化的流程。 本文通过开发准备阶段、开发阶段和开发完成三个阶段开介绍vue前端工程化的整体过程。 准备阶段 准备阶段我将其分为&#xff1a;框架选择、规范制…

html安装及入门

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 一、简单介绍一下前端三大件开发工具 二、安装VSCode三、VSCode相关配置1.汉化2.live server3.使用前 总结 提示&#xff1a;以下是本篇文章正文内容&#xff0c;下…

治愈自己的短句,心灵鸡汤!

一、不是所有的是非都能理清&#xff0c;不是所有的付出都有收获。有些选择是无可奈何&#xff0c;有些失去是注定的。与其无法言说&#xff0c;不如一笑而过&#xff1b;与其无法释怀&#xff0c;不如安然自若。 二、没人会真正的感同身受到你的痛楚&#xff0c;也没人会真正…

如何通过使用yolov8实现火灾烟雾检测

在该项目中&#xff0c;对原始YOLO模型进行训练集数据收集、模型结构调整、超参数优化等步骤&#xff0c;使其能够准确高效地从视频或图像中识别出火源或其他火灾相关特征&#xff0c;以实现实时火警监测、预警等功能。 介绍 该代码库包含使用YOLOv8在实时视频中跟踪和检测火灾…

网络七层模型之表示层:理解网络通信的架构(六)

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…

基于Hive的天气情况大数据分析系统(通过hive进行大数据分析将分析的数据通过sqoop导入到mysql,通过Django基于mysql的数据做可视化)

基于Hive的天气情况大数据分析系统&#xff08;通过hive进行大数据分析将分析的数据通过sqoop导入到mysql&#xff0c;通过Django基于mysql的数据做可视化&#xff09; Hive介绍&#xff1a; Hive是建立在Hadoop之上的数据仓库基础架构&#xff0c;它提供了类似于SQL的语言&…

春季热卖单品!空气净化器单周销售额近三十万!

季节轮换&#xff0c;你有没有感受到室内空气质量变差呢&#xff1f; 近日&#xff0c;一款空气净化器在美区TikTok小店上掀起了一股购买热潮&#xff0c;成为了当之无愧的爆款商品&#xff01; 它的单周销量竟然高达7.5k&#xff0c;销售额更是超过了惊人的30万&#xff01;…

Webpack常见插件和模式

目录 目录 目录认识 PluginCleanWebpackPluginHtmlWebpackPlugin自定义模版 DefinePlugin的介绍 ( 持续更新 )Mode 配置 认识 Plugin Loader是用于特定的模块类型进行转换&#xff1b; Plugin可以用于执行更加广泛的任务&#xff0c;比如打包优化、资源管理、环境变量注入等 …

2023年财报大揭秘:下一个倒闭的新势力呼之欲出

3月25日&#xff0c;零跑汽车公布了他们2023年的财报。财报数据显示&#xff0c;零跑亏损了42亿元。恰逢近段时间众多新势力车企皆公布了年报&#xff0c;而亏损也成了大家避不开的话题。那今天就让我们一起盘点一下各个车企的财报吧&#xff01; 2023年财报大揭秘&#xff1a;…

12.路由安装

路由安装 安装vscode https://code.visualstudio.com/ 使用vscode打开后台系统项目 在终端运行npm run dev即可运行项目 src/assets中存放静态资源 src/components中存放组件 app.vue是主界面&#xff08;入口页面&#xff09; 注释main.ts中的import ./style.css package.j…

以syslog形式推送告警信息到UMP平台--主要为接口思路

背景 客户需求&#xff0c;根据当前时间获取到的接口返回值中的关键字段的数值进行判断&#xff0c;当超过阈值时推送可恢复告警&#xff0c;推送一次即可&#xff0c;待数据正常时推送告警恢复&#xff0c;工作日8点到18点执行。【代码还在整理中】 问题分析 告警通知&…

“光学行业正被量子颠覆”——行业巨头齐聚,展示量子成果

OFC是全球最大的光网络和通信盛会&#xff0c;代表一系列产品&#xff0c;从光学元件和设备到系统、测试设备、软件和特种光纤&#xff0c;代表整个供应链&#xff0c;并提供业界学习、连接、建立网络和达成交易的首要市场&#xff0c;于2024年3月24日至28日在圣地亚哥会议中心…

Redis入门到实战-第二十二弹

Redis入门到实战 Redis高可用Sentinel官网地址Redis概述虚拟机配置在主从复制环境的基础上添加Sentinel更新计划 Redis高可用Sentinel 官网地址 声明: 由于操作系统, 版本更新等原因, 文章所列内容不一定100%复现, 还要以官方信息为准 https://redis.io/Redis概述 Redis是一…

Sentinel原理及实践

Sentinel 是什么 Sentinel 是面向分布式、多语言异构化服务架构的流量治理组件&#xff0c;主要以流量为切入点&#xff0c;从流量路由、流量控制、流量整形、熔断降级、系统自适应过载保护、热点流量防护等多个维度来帮助开发者保障微服务的稳定性。 为什么使用sentinel&…

[flume$1]记录一个启动flume配置的错误

先总结&#xff1a;Flume配置文件后面&#xff0c;不能跟注释 报错代码&#xff1a; [ERROR - org.apache.flume.SinkRunner$PollingRunner.run(SinkRunner.java:158)] Unable to deliver event. Exception follows. org.apache.flume.EventDeliveryException: Failed to open…