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

news2024/11/24 14:36:29

 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'.

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

前端三剑客 —— CSS (第二节)

目录 内容回顾&#xff1a; CSS选择器*** 属性选择器 伪类选择器 1&#xff09;:link 超链接点击之前 2&#xff09;:visited 超链接点击之后 3&#xff09;:hover 鼠标悬停在某个标签上时 4&#xff09;:active 鼠标点击某个标签时&#xff0c;但没有松开 5&#xff09;:fo…

什么是服务雪崩?什么是服务限流?

服务雪崩效应&#xff1a;因服务提供者的不可用而导致服务调用者的不可用&#xff0c;并且这种情况不断的衍生方法&#xff0c;从而导致整个系统崩溃的过程&#xff0c;就是服务雪崩效应。 解决方式&#xff1a; 熔断机制&#xff1a;当一个服务挂了&#xff0c;被影响的服务要…

基于微信小程序的自习室预约系统的设计与实现

基于微信小程序的自习室预约系统的设计与实现 文章目录 基于微信小程序的自习室预约系统的设计与实现1、前言介绍2、功能设计3、功能实现4、开发技术简介5、系统物理架构6、系统流程图7、库表设计8、关键代码9、源码获取10、 &#x1f389;写在最后 1、前言介绍 伴随着信息技术…

Oracle 低代码平台 Apex 最新版本 23.2 安装过程

趁春节快结束前&#xff0c;安装了一把APEX &#xff0c;到目前为此&#xff0c;APEX最新版本为23.2&#xff0c;23.2和21版本有一些变化&#xff0c;只是用于验证&#xff0c;我 是使用的单独模式&#xff0c;没有安装TOMAT&#xff0c;下面列一下安装过程&#xff1a; 1.环境…

Nest安装及使用~

前提条件 请确保您的操作系统上安装了 Node.js&#xff08;版本 > 16&#xff09; &#x1f4da;要查看指南&#xff0c;请访问 https://docs.nestjs.com/ &#x1f4da;要查看中文 指南&#xff0c; 请访问 https://docs.nestjs.cn/ $ node -v v16.18.1 $ npm -v 7.x.x安…

Beans模块之工厂模块DisposableBean

博主介绍&#xff1a;✌全网粉丝5W&#xff0c;全栈开发工程师&#xff0c;从事多年软件开发&#xff0c;在大厂呆过。持有软件中级、六级等证书。可提供微服务项目搭建与毕业项目实战&#xff0c;博主也曾写过优秀论文&#xff0c;查重率极低&#xff0c;在这方面有丰富的经验…

linux下minio部署和nginx配置

1 下载minio wget https://dl.min.io/server/minio/release/linux-amd64/minio chmod x minio #启动minio&#xff0c;文件数据存放在/data目录 ./minio server /data2 部署minio 下载minio后赋予可执行权限就可以运行了&#xff0c;这里我整理了遇到的坑和解决问题的最终配置…

ngrok 内网穿透使用

title: ngrok 内网穿透使用 search: 2024-02-29 文章目录 背景Windows安装ngrok指令授权ngrok个人用户Authtoken穿透 http 或 https 服务ngrok的代理http指令ngrok获得静态域名指令ngrok的代理ssh指令 背景 这次寒假回家&#xff0c;很无奈&#xff0c;很多东西放在项目组服务…

vuex插件实现数据共享

vuex插件 vuex是管理多个vue通用的数据的插件.(状态管理工具,状态是数据) 我们对于多个vue文件之间的共同数据,是用props传递,或者对于一个vue实例对象,进行绑定,传参,也是多次传参,多个文件之间,比较麻烦. 但是我们vuex会创建一个公共对象,从这个公共对象上赋值,比较简单易…

HarmonyOS 应用开发之使用隐式Want打开网址

以打开浏览器为例&#xff0c;假设设备上安装了一个或多个浏览器应用。为了使浏览器应用能够正常工作&#xff0c;需要在 module.json5配置文件 进行配置&#xff0c;具体配置如下&#xff1a; {"module": {..."abilities": [{..."skills": [{&…

Spring面试题(二)

一、老杜讲解Spring6整理 1. Spring有哪几大模块&#xff1f; 2. IoC控制反转的实现是依赖注入&#xff0c;set依赖注入的原理是什么&#xff1f; 3. 自动装配有哪几种&#xff1f;它的原理是基于构造注入还是基于set注入&#xff1f; 4. Spring容器中的Bean是单例还是多例…

Mybatis-Plus分页查询时碰到`total`有值但`records`为空

个人原因&#xff1a;Mybatis-Plus分页插件设置了maxLimit单页条数 // 分页插件配置 PaginationInnerInterceptor paginationInnerInterceptor new PaginationInnerInterceptor(DbType.MYSQL); paginationInnerInterceptor.setMaxLimit(200L); // 单页分页条数限制(默认无限…

博客页面---前端

目录 主页 HTML CSS 文章详细页面 HTML CSS 登录页面 HTML CSS 文章编辑页 HTML CSS 这只是前端的页面组成&#xff0c;还没有接入后端&#xff0c;并不是完全体 主页 HTML <!DOCTYPE html> <!-- <html lang"en"> --> <head>&…

【PSINS工具箱】基于工具箱,自己设计的轨迹,并生成IMU数据和三维视图(完整代码)

完整代码 在有工具箱的情况下&#xff0c;直接运行代码&#xff0c;即可 % 基于PSINS工具箱的三维轨迹生成、三维图像绘制与IMU数据生成 % date:2024-2-13 % Evand&#xff08;evandworldqq.com&#xff09; % Ver1 clear;clc;close all; glvs ts 0.1; % sampling int…

Redis(十九)缓存过期淘汰策略

文章目录 面试题内存满怎么办写入的数据如何删除的&#xff08;删除策略&#xff09;立即删除惰性删除上面两种方案都走极端 缓存淘汰策略配置文件LRU和LFU区别有哪些如何配置、修改 redis缓存淘汰策略配置性能建议 面试题 生产上你们的redis内存设置多少?如何配置、修改redi…

动态规划-最长回文子串

动态规划-最长回文子串 原题描述解答中心移动思想代码实现复杂度分析时间复杂度空间复杂度 动态规划思想代码实现复杂度分析时间复杂度空间复杂度 突然觉得很有必要将学过的内容记录下来&#xff0c;这样后续在需要用到的时候就可以避免从头进行学习&#xff0c;而去看自己之前…

【Threejs基础教程-光影篇】5.2 Threejs 阴影系统

5.2 Threejs阴影系统 学习ThreeJS的捷径在用光影系统之前threejs是实时光影web端目前没有优质的实时光影实时光影会大幅增加渲染压力没有独显的电脑不建议添加实时光影 阴影配置什么样的灯光可以产生阴影什么样的物体可以产生阴影和接受阴影注意开启阴影渲染灵活运用阴影 平行光…

【Linux】普通用户提升权限

概述 在Linux环境下&#xff0c;给普通用户提权的方式&#xff0c;su与sudo命令&#xff0c;su是将一个普通用户登录为root&#xff0c;而sudo则是将普通用户短暂提升权限 普通用户使用$ root使用# 使用su提升权限 如果我们使用su将用户提升为root&#xff0c;此时需要输入…

计算机网络:数据链路层 - 封装成帧 透明传输 差错检测

计算机网络&#xff1a;数据链路层 - 封装成帧 & 透明传输 & 差错检测 数据链路层概述封装成帧透明传输差错检测 数据链路层概述 从数据链路层来看&#xff0c;主机 H1 到 H2 的通信可以看成是在四段不同的链路上的通信组成的&#xff0c;所谓链路就是从一个节点到相邻…

回溯算法|39.组合总和

力扣题目链接 class Solution { private:vector<vector<int>> result;vector<int> path;void backtracking(vector<int>& candidates, int target, int sum, int startIndex) {if (sum > target) {return;}if (sum target) {result.push_back…