【零基础入门TypeScript】类型和变量

news2025/1/13 2:32:11

目录

任意类型

内置类型

Null 和 undefined ─ 它们是一样的吗?

用户定义类型

TypeScript 中的变量声明

示例:TypeScript 中的变量

TypeScript 中的类型断言

例子

TypeScript 中的推断类型

示例:推断类型

TypeScript 变量作用域

示例:变量范围


类型系统表示该语言支持的不同类型的值。在程序存储或操作所提供的值之前,类型系统会检查它们的有效性。这确保了代码的行为符合预期。类型系统还允许更丰富的代码提示和自动化文档。

TypeScript 提供数据类型作为其可选类型系统的一部分。数据类型分类如下 -

数据类型

任意类型

Any数据类型是 TypeScript 中所有类型的超类型。它表示动态类型。使用any类型相当于选择不进行变量的类型检查。

内置类型

下表说明了 TypeScript 中的所有内置类型 -

Data typeKeywordDescription
NumbernumberDouble precision 64-bit floating point values. It can be used to represent both, integers and fractions.
StringstringRepresents a sequence of Unicode characters
BooleanbooleanRepresents logical values, true and false
VoidvoidUsed on function return types to represent non-returning functions
NullnullRepresents an intentional absence of an object value.
UndefinedundefinedDenotes value given to all uninitialized variables

注意- TypeScript 和 JavaScript 中没有整数类型。

Null 和 undefined ─ 它们是一样的吗?

null和未定义的数据类型通常造成混乱。null 和 undefined 不能用于引用变量的数据类型。它们只能作为值分配给变量。

但是,null 和 undefined 并不相同。用 undefined 初始化的变量意味着该变量没有分配任何值或对象,而 null 则意味着该变量已被设置为值未定义的对象。

用户定义类型

用户定义类型包括枚举(enum)、类、接口、数组和元组。这些将在后面的章节中详细讨论。

根据定义,变量是“内存中存储值的命名空间”。换句话说,它充当程序中值的容器。TypeScript 变量必须遵循 JavaScript 命名规则 -

  • 变量名称可以包含字母和数字。

  • 它们不能包含空格和特殊字符,下划线 (_) 和美元 ($) 符号除外。

  • 变量名不能以数字开头。

变量必须在使用之前声明。使用var关键字来声明变量。

TypeScript 中的变量声明

在 TypeScript 中声明变量的类型语法是在变量名称后面包含一个冒号 (:),后跟其类型。就像在 JavaScript 中一样,我们使用var关键字来声明变量。

当你声明一个变量时,你有四个选项 -

  • 在一条语句中声明其类型和值。

声明类型

  • 声明其类型但不声明值。在这种情况下,该变量将被设置为未定义。

不明确的

  • 声明其值但不声明类型。变量类型将设置为指定值的数据类型。

任何

  • 既不声明值也不声明类型。在这种情况下,变量的数据类型将为any,并将被初始化为未定义。

任意和未定义

下表说明了上面讨论的变量声明的有效语法 -

编号变量声明语法和描述
1.

变量名称:字符串=“玛丽”

该变量存储字符串类型的值

2.

变量名称:字符串;

该变量是一个字符串变量。变量的值默认设置为未定义

3.

变量名称=“玛丽”

变量的类型是从值的数据类型推断出来的。这里,变量是字符串类型

4.

变量名称;

变量的数据类型是any。默认情况下,其值设置为未定义。

示例:TypeScript 中的变量

var name:string = "John";
var score1:number = 50; 
var score2:number = 42.50 
var sum = score1 + score2 
console.log("name"+name) 
console.log("first score: "+score1) 
console.log("second score: "+score2) 
console.log("sum of the scores: "+sum)
编译时,它将生成以下 JavaScript 代码。
//Generated by typescript 1.8.10 
var name = "John"; 
var score1 = 50; 
var score2 = 42.50; 
var sum = score1 + score2; 
console.log("name" + name); 
console.log("first score: " + score1); 
console.log("second score : " + score2); 
console.log("sum of the scores: " + sum);

上述程序的输出如下:

name:John 
first score:50 
second score:42.50 
sum of the scores:92.50

如果我们尝试将值分配给不同类型的变量,TypeScript 编译器将生成错误。因此,TypeScript 遵循强类型。强类型语法确保赋值运算符 (=) 两侧指定的类型相同。这就是为什么以下代码会导致编译错误 -

var num:number = "hello" // will result in a compilation error

TypeScript 中的类型断言

TypeScript 允许将变量从一种类型更改为另一种类型。TypeScript 将此过程称为类型断言。语法是将目标类型放在 < > 符号之间,并将其放在变量或表达式的前面。下面的例子解释了这个概念 -

例子

var str = '1' 
var str2:number = <number> <any> str //str is now of type number 
console.log(typeof(str2))

如果将鼠标指针悬停在 Visual Studio Code 中的类型断言语句上,它将显示变量数据类型的更改。基本上,如果 S 是 T 的子类型或 T 是 S 的子类型,则它允许从类型 S 到 T 的断言成功。

它不被称为“类型转换”的原因是,转换通常意味着某种运行时支持,而“类型断言”纯粹是一种编译时构造,是一种向编译器提供有关您希望代码如何运行的提示的方法。进行分析。

编译时,它将生成以下 JavaScript 代码。

"use strict"; 
var str = '1'; 
var str2 = str; //str is now of type number 
console.log(typeof (str2));

它将产生以下输出 -

string

TypeScript 中的推断类型

鉴于 Typescript 是强类型的,因此此功能是可选的。TypeScript 还鼓励变量的动态类型。这意味着,TypeScript 鼓励声明没有类型的变量。在这种情况下,编译器将根据分配给变量的值来确定变量的类型。TypeScript 将在代码中找到该变量的第一次使用,确定它最初设置的类型,然后在代码块的其余部分中假定该变量的类型相同。

下面的代码片段解释了同样的情况 -

示例:推断类型

var num = 2;    // data type inferred as  number 
console.log("value of num "+num); 
num = "12";
console.log(num);

在上面的代码片段中 -

  • 该代码声明了一个变量并将其值设置为 2。请注意,变量声明未指定数据类型。因此,程序使用推断类型来确定变量的数据类型,即,它分配变量设置的第一个值的类型。在本例中,num设置为类型编号。

  • 当代码尝试将变量的值设置为字符串时。由于变量的类型已设置为数字,编译器会引发错误。

它将产生以下输出 -

error TS2011: Cannot convert 'string' to 'number'.

TypeScript 变量作用域

变量的范围指定变量的定义位置。程序中变量的可用性由其范围决定。TypeScript 变量可以具有以下范围 -

  • Global Scope- 全局变量在编程结构之外声明。可以从代码中的任何位置访问这些变量。

  • Class Scope- 这些变量也称为字段。字段或类变量在类内部但在方法外部声明。可以使用类的对象来访问这些变量。字段也可以是静态的。可以使用类名访问静态字段。

  • Local Scope- 顾名思义,局部变量是在方法、循环等构造中声明的。局部变量只能在声明它们的构造中访问。

以下示例说明了 TypeScript 中的变量范围。

示例:变量范围

var global_num = 12          //global variable 
class Numbers { 
   num_val = 13;             //class variable 
   static sval = 10;         //static field 
   
   storeNum():void { 
      var local_num = 14;    //local variable 
   } 
} 
console.log("Global num: "+global_num)  
console.log(Numbers.sval)   //static variable  
var obj = new Numbers(); 
console.log("Global num: "+obj.num_val) 

转译时,会生成以下 JavaScript 代码 -

var global_num = 12;              //global variable 
var Numbers = (function () {
   function Numbers() {
      this.num_val = 13;          //class variable 
   }
   Numbers.prototype.storeNum = function () {
      var local_num = 14;        //local variable 
   };
   Numbers.sval = 10;            //static field 
   return Numbers;
}());

console.log("Global num: " + global_num);
console.log(Numbers.sval);       //static variable  

var obj = new Numbers();
console.log("Global num: " + obj.num_val);

它将产生以下输出 -

Global num: 12
10
Global num: 13

如果尝试在方法外部访问局部变量,则会导致编译错误。

error TS2095: Could not find symbol 'local_num'.

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

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

相关文章

认识机器学习【woodwhales.cn】

为了更好的阅读体验&#xff0c;建议移步至笔者的博客阅读&#xff1a;认识机器学习 生活中的问题1&#xff1a;居民家庭生活用气价格 北京燃气小程序在线咨询&#xff0c;查询北京居民家庭生活用气价格 上图价格梯度&#xff0c;可以由文字转换成表格&#xff1a; 第一档用气…

DrGraph原理示教 - OpenCV 4 功能 - 二值化

二值化&#xff0c;也就是处理结果为0或1&#xff0c;当然是针对图像的各像素而言的 1或0&#xff0c;对应于有无&#xff0c;也就是留下有用的&#xff0c;删除无用的&#xff0c;有用的部分&#xff0c;就是关心的部分 在图像处理中&#xff0c;也不仅仅只是1或0&#xff0c;…

Linux 命令echo

命令作用 输出一行字符串在shell中&#xff0c;可以打印变量的值输出结果写入到文件在显示器上显示一段文字&#xff0c;起到提示的作用 语法 echo [选项] [字符串] 参数 字符含义-n不自动换行-e解释转义字符-E不解释转义字符 如果-e有效&#xff0c;则识别以下序列&…

【Unity入门】RequireComponent的使用

目录 RequireComponent的作用构造函数 RequireComponent的作用 RequireComponent 属性自动将所需的组件添加为依赖项。 当某个脚本必须依赖其他脚本或者组件共同使用时&#xff0c;为了避免人为添加过程的操作失误&#xff0c;可以在代码中使用RequireComponent&#xff0c;它…

c语言:设计投票小程序|练习题

一、题目 设计一个投票小程序 如图&#xff1a; 二、代码图片【带注释】 三、源代码【带注释】 #include <stdio.h> #include<string.h> void win(int,int,int); int main() { char ch[5]; int countLili0; int countjp0; int countzx0; int …

OS 7--DNS配置+Apache发布网站

环境准备 centOS 7 1.配置DNS 1.1 域名为lianxi.com 1.2 为WWW服务器、FTP服务器、NEWS服务器做域名解析 1)安装DNS yum -y install bind bind-utils (如果安装不上&#xff0c;就把磁盘在重洗挂载一下&#xff09; 2&#xff09;修改DNS配置文件 vim /etc/resolv.conf…

【一文入门】Git常用命令集锦--分支操作和版本管理篇

前言 Git 是一种分布式版本控制系统&#xff0c;可以帮助团队协作开发、管理和维护代码&#xff0c;提高代码质量和效率&#xff0c;掌握常用版本管理命令可以帮助我们更好地管理代码变更和历史记录。下面我将介绍开发中常用的一些Git分支操作和版本管理命令 1 分支操作 1.1 …

Linux 系统编程:文件系统

文件类型 Linux 文件分为 3 类&#xff1a; 普通文件&#xff1a;文本文件、二进制文件&#xff0c;要学习如何创建、复制、移动、重命名和删除这样的文件。目录&#xff08;Windows 中的“文件夹”与之类似&#xff09;伪文件&#xff1a;设备文件、命名管道、proc 文件&…

Kafka安全认证机制详解之SASL_PLAIN

一、概述 官方文档&#xff1a; https://kafka.apache.org/documentation/#security 在官方文档中&#xff0c;kafka有五种加密认证方式&#xff0c;分别如下&#xff1a; SSL&#xff1a;用于测试环境SASL/GSSAPI (Kerberos) &#xff1a;使用kerberos认证&#xff0c;密码是…

DevSecOps研讨会: 2023年DevOps有哪些值得关注的发展与挑战

近日&#xff0c;龙智DevSecOps研讨会年终专场”趋势展望与实战探讨&#xff1a;如何打好DevOps基础、赋能创新”在上海圆满落幕。来自清晖、Jama Software、CloudBees和中新赛克的嘉宾&#xff0c;以及龙智技术与顾问咨询团队代表分别发表了主题演讲&#xff0c;分享他们在Dev…

(已解决)word如何制作和引用参考文献

文章目录 正文其他 一般使用latex&#xff0c;但是有的时候会遇到使用word的情况&#xff0c;这里记录一下word如何弄参考文献。 正文 1.首先复制你的参考文献到word里面&#xff0c;然后要编号&#xff0c;记住&#xff0c;一定要编号&#xff0c;否则到时候无法引用。 那么…

Note: Balanced Diet

Balanced Diet 平衡膳食 diet balanced Wang Peng earned his living by running a barbecue restaurant, which served delicious bacon, fried chiken breast and mutton roasted with pepper and garlic. 王鹏经营一家烧烤餐厅来谋生&#xff0c;它提供美味的培根&#xf…

C语言注意点(2)

1.使用pow函数的相关问题 局部变量n0 while(num/pow(10,n)) n; 为什么不可行 printf("%d",num/pow(10,4)%10) 为什么要提前用temp先引出来 答&#xff1a;pow函数的返回值为double类型&#xff0c;1.终止条件不会满足 2.num/pow(10,4)结果为浮点型&#xff0c;浮…

Spark一:Spark介绍、技术栈与运行模式

一、Spark简介 Spark官网 https://spark.apache.org/ 1.1 Spark是什么 Spark是一种通用的大数据计算框架&#xff0c;是基于RDD(弹性分布式数据集)的一种计算模型。 是一种由 Scala 语言开发的快速、通用、可扩展的大数据分析引擎。 1.2 Spark作用 中间结果输出 Spark的Jo…

从零开始配置kali2023环境:配置jupyter的多内核环境

在kali2023上面尝试用anaconda3&#xff0c;anaconda2安装实现配置jupyter的多内核环境时出现各种问题&#xff0c;现在可以通过镜像方式解决 1. 搜索镜像 ┌──(holyeyes㉿kali2023)-[~] └─$ sudo docker search anaconda ┌──(holyeyes㉿kali2023)-[~] └─$ sudo …

Redis数据删除策略(惰性删除+定期删除)

文章目录 Redis数据删除策略1. 惰性删除2. 定期删除3. Redis过期删除策略用的哪种&#xff1f; Redis数据删除策略 1. 惰性删除 设置key过期时间后&#xff0c;不管它&#xff0c;需要用该key时&#xff0c;再检查是否过期&#xff0c;过期就删掉她&#xff0c;没过期返回 set …

车载 Android之 核心服务 - CarPropertyService 的VehicleHAL

前言: 本文是车载Android之核心服务-CarPropertyService的第二篇&#xff0c;了解一下CarPropertyService的VehicleHAL, 第一篇在车载 Android之 核心服务 - CarPropertyService 解析-CSDN博客&#xff0c;有兴趣的 朋友可以去看下。 本节介绍 AndroidAutomotiveOS中对于 Veh…

如何在 Ubuntu 20.04 上以独立模式设置 MinIO 对象存储服务器

前些天发现了一个人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;最重要的屌图甚多&#xff0c;忍不住分享一下给大家。点击跳转到网站。 如何在 Ubuntu 20.04 上以独立模式设置 MinIO 对象存储服务器 介绍 存储非结构化对象数据 blob 并使其可通过 …

jenkins +jmeter 报告乱码解决

问题&#xff1a;生产报告会乱码的问题&#xff0c;一般是有编码格式引起的。我遇到的问题是&#xff0c;jmeter需要读取csv的数据作为参数。但是我们并不知道csv保存是什么编码格式&#xff0c;有可能不是utf-8的编码格式&#xff0c;所以会导致中文乱码的问题 解决方案&#…

sealor安装k8s

文章目录 平台介绍sealos(github下载)百度网盘 部署删除污点命令补全验证 平台介绍 模块功能描述公共部分权限管理(登录)集成K8s自身RBAC授权公共部分命名空间选择展示不通命名空间资源仪表盘命名空间|计算资源|存储资源|节点状态展示主要指标状况k8s集群node|namespace|pv创建…