2、八个JS中你见过的类型

news2024/9/28 9:23:49

 

1、前言

        为一个变量指定类型的语法是使用"变量: 类型"的形式,如下:

let num: number = 123

        如果你没有为这个变量指定类型,编译器会自动根据你赋给这个变量的值来推断这个变量的类型:

let num = 123
num = 'abc' // error 不能将类型“"123"”分配给类型“number”

        当我们给 num 赋值为123但没有指定类型时,编译器推断出了 num 的类型为 number 数值类型,所以当给 num 再赋 值为字符串"abc"时,就会报错。

        这里还有一点要注意,就是number和Number的区别:TS中指定类型的时候要用 number ,这个是TypeScript的类 型关键字。而 Number 为JavaScript的原生构造函数,用它来创建数值类型的值,它俩是不一样的。包括你后面见 到的string、boolean等都是TypeScript的类型关键字,不是JavaScript语法,这点要区分开。

2、布尔类型

        类型为布尔类型的变量的值只能是 true 或 false,如下:

let bool: boolean = false;
bool = true;
bool = 123; // error 不能将类型"123"分配给类型"boolean"

        当然了,赋给 bool 的值也可以是一个计算之后结果是布尔值的表达式,比如:

let bool: boolean = !!0
console.log(bool) // false

3、数值类型

        TypeScript 和 JavaScript 一样,所有数字都是浮点数,所以只有一个 number 类型,而没有 int 或者 float 类型。而 且 TypeScript 还支持 ES6 中新增的二进制和八进制数字字面量,所以 TypeScript 中共支持二、八、十和十六四种 进制的数值。

let num: number;
num = 123;
num = "123"; // error 不能将类型"123"分配给类型"number"
num = 0b1111011; // 二进制的123
num = 0o173; // 八进制的123
num = 0x7b; // 十六进制的123

4、字符串

        字符串类型中你可以使用单引号和双引号包裹内容,但是可能你使用的 tslint 规则会对引号进行检测,使用单引号 还是双引号可以在 tslint 规则里配置。你还可以使用 ES6 语法——模板字符串,拼接变量和字符串更为方便。

let str: string = "Lison";
str = "Li";
const first = "Lison";
const last = "Li";
str = `${first} ${last}`;
console.log(str) // 打印结果为:Lison Li

        另外还有个和字符串相关的类型:字符串字面量类型。即把一个字符串字面量作为一种类型,比如上面的字符 串"Lison",当你把一个变量指定为这个字符串类型的时候,就不能再赋值为其他字符串值了,如:

let str: 'Lison'
str = 'haha' // error 不能将类型“"haha"”分配给类型“"Lison"”

5、数组

        在 TypeScript 中有两种定义数组的方式:

let list1: number[] = [1, 2, 3];
let list2: Array<number> = [1, 2, 3];

        第一种形式通过 number[] 的形式来指定这个类型元素均为number类型的数组类型,这种写法是推荐的写法,当然 你也可以使用第二种写法。注意,这两种写法中的 number 指定的是数组元素的类型,你也可以在这里将数组的元 素指定为任意类型。如果你要指定一个数组里的元素既可以是数值也可以是字符串,那么你可以使用这种方式: number|string[] ,这种方式我们在后面学习联合类型的时候会讲到。

        当你使用第二种形式定义时,tslint 可能会警告让你使用第一种形式定义,如果你就是想用第二种形式,可以通过在 tslint.json 的 rules 中加入 "array-type": [false] 关闭 tslint 对这条的检测。

6、null 和 undefined

        null 和 undefined 有一些共同特点,所以我们放在一起讲。说它们有共同特点,是因为在 JavaScript 中,undefined 和 null 是两个基本数据类型。在 TypeScript 中,这两者都有各自的类型即 undefined 和 null,也就是说它们既是实际的值,也是类型,来看实际例子:

let u: undefined = undefined;// 这里可能会报一个tslint的错误:Unnecessary initialization to 'undefined',就是不能给一个值赋undefined,但我们知道这是可以的,所以如果你的代码规范想让这种代码合理化,可以配置tslint,将"no-unnecessary-initializer"设为false即可
let n: null = null;

        默认情况下 undefined 和 null 可以赋值给任意类型的值,也就是说你可以把 undefined 赋值给 void 类型,也可以赋 值给 number 类型。当你在 tsconfig.json 的"compilerOptions"里设置了 "strictNullChecks": true 时,那必须严格对待。undefined 和 null 将只能赋值给它们自身和 void 类型,void类型我们后面会学习。

7、object

        object 在 JS 中是引用类型,它和 JS 中的其他基本类型不一样,像 number、string、boolean、undefined、null 这 些都是基本类型,这些类型的变量存的是他们的值,而 object 类型的变量存的是引用,看个简单的例子:

let strInit = "abc";
let strClone = strInit;
strClone = "efg";
console.log(strInit); // 'abc'
let objInit = { a: "aa" };
let objClone = objInit;
console.log(objClone) // {a:"aa"}
objInit.a = "bb";
console.log(objClone); // { a: 'bb' }

        通过例子可以看出,我们修改 objInit 时,objClone 也被修改了,是因为 objClone 保存的是 objInit 的引用,实际上 objInit 和 objClone 是同一个对象。当我们希望一个变量或者函数的参数的类型是一个对象的时候,使用这个类型,比如:

let obj: object
obj = { name: 'Lison' }
obj = 123 // error 不能将类型“123”分配给类型“object”

        这里有一点要注意了,你可能会想到给 obj 指定类型为 object 对象类型,然后给它赋值一个对象,后面通过属性访 问操作符访问这个对象的某个属性,实际操作一下你就会发现会报错:

let obj: object
obj = { name: 'Lison' }
console.log(obj.name) // error 类型“object”上不存在属性“name”

        这里报错说类型 object 上没有 name 这个属性。如果你想要达到这种需求你应该使用我们后面章节要讲到的接口, 那 object 类型适合什么时候使用呢?我们前面说了,当你希望一个值必须是对象而不是数值等类型时,比如我们定 义一个函数,参数必须是对象,这个时候就用到object类型了:

function getKeys (obj: object) {
 return Object.keys(obj) // 会以列表的形式返回obj中的值
}
getKeys({ a: 'a' }) // ['a']
getKeys(123) // error 类型“123”的参数不能赋给类型“object”的参数

8、symbol

        Symbol 是 ES6 加入的新的基础数据类型,因为它的知识比较多,所以我们单独在后面的一节进行讲解。

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

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

相关文章

最简洁快速的kaggle注册(无需翻墙)

目录 1.打开浏览器&#xff0c;点击搜索栏最后3个点点 2.点击扩展&#xff0c;会到一个新页面 3.搜索获取&#xff08;安装插件&#xff09; 4.获取之后&#xff0c;网页搜索栏右边会出现该插件&#xff1a; 5.点击管理&#xff1a; 6.在下载规则中&#xff0c;填入下面的地…

SpringBoot整合JWT

一、What is JWT&#xff1f; Json web token (JWT)&#xff0c;是为了在网络应用环境间传递声明而执行的一种基于 JSON 的开放标准&#xff08;(RFC 7519)&#xff0c;该 token 被设计为紧凑且安全的&#xff0c;特别适用于分布式站点的单点登录&#xff08;SSO&#xff09;场…

认识Spring 和 IoC

目录 何为Spring 1. 何为容器 2. 何为 IoC 2.1 传统的程序开发&#xff1a;耦合性太高 2.2 解决传统开发中的缺陷 2.3 对比总结&#xff1a;IoC的实现思想 3. 理解Spring IoC 4. 理解 DI 5. 总结 何为Spring Spring是一个包含了众多工具方法的 IoC 容器&#xff1…

【Scala入门】Scala下载及安装(Windows)以及Idea创建第一个scala项目

目录 一、安装准备 二、Scala下载安装 三、Idea 创建Scala项目 一、安装准备 在安装之前&#xff0c;确保你的电脑上装有Jdk 8&#xff08;Jdk 1.8&#xff09;&#xff0c;且环境变量配置正确。如果没有安装Jdk&#xff0c;请参照其他文章先安装Jdk 8&#xff08;Jdk 1.8&a…

vue3之Teleport传送组件

一、前言 Teleport 是 Vue3.x 新推出的功能&#xff0c; 没听过这个词的小伙伴可能会感到陌生&#xff1b;翻译过来是传送的意思&#xff0c;可能还是觉得不知所以&#xff0c;没事下边我就给大家形象的描述一下。 二、Teleport 是什么呢&#xff1f;干嘛用的&#xff1f; T…

【PMP】敏捷项目月报模板

敏捷项目月报怎么写呢&#xff1f;和普通项目周报有什么不同呢&#xff1f;不知道大家思考过没有&#xff1f; 为此咱们把敏捷项目月报和普通项目月报进行了对比&#xff0c;并且给出了一个参考月报模板和实例&#xff0c;供大家参考。 敏捷项目月报模板 [项目名称]敏捷月报 …

大屏如何打造智慧城市?30张大屏模板送你,零代码基础也会用

超500个智慧城市在路上了 根据国际数据公司&#xff08;IDC&#xff09;最新发布的《全球半年度智慧城市支出指南》显示&#xff0c;2023年全球智慧城市支出预计将达到1895亿美元。中国智慧城市市场在2023年规模将达到389.2亿美元&#xff0c;超过全球平均水平 德勤咨询发布的一…

电脑端(PC)按键精灵——3.其他命令

电脑端(PC)按键精灵——3.其他命令 前两节说了安装、键盘和鼠标命令&#xff0c;这一章说下其他命令 按键精灵小白入门详细教程&#xff1a; 电脑端(PC)按键精灵—小白入门 详细教程 命令介绍 1. Delay 延时 简介 //1秒&#xff1d;1000毫秒, 1分钟&#xff1d;60000毫秒,…

段式内存管理VS页式内存管理

在讲解段式内存管理、页式内存管理之前&#xff0c;需要了解X86体系结构中的实模式和保护模式相关内容。 在 X86 架构诞生之初&#xff0c;其实是没有虚拟内存的概念的。1978 年发行的 8086 芯片是 X86 架构的首款芯片&#xff0c;它在内存管理上使用的是直接访问物理内存的方…

Java版本-招投标采购系统源代码-高效管控招采流程-降低采购成本

项目说明 随着公司的快速发展&#xff0c;企业人员和经营规模不断壮大&#xff0c;公司对内部招采管理的提升提出了更高的要求。在企业里建立一个公平、公开、公正的采购环境&#xff0c;最大限度控制采购成本至关重要。符合国家电子招投标法律法规及相关规范&#xff0c;以及…

Java数据结构和算法之第五章、LinkedList与链表

一、ArrayList的缺陷 public class ArrayList<E> extends AbstractList<E>implements List<E>, RandomAccess, Cloneable, java.io.Serializable {// ... // 默认容量是10private static final int DEFAULT_CAPACITY 10;//... // 数组&#xff1a;用来存储…

分布式链路追踪之SkyWalking

一 链路追踪简介 在微服务架构中&#xff0c;一次请求往往涉及到多个模块&#xff0c;多个中间件&#xff0c;多台机器的相互协作才能完成。这一系列调用请求中&#xff0c;有些是串行的&#xff0c;有些是并行的&#xff0c;那么如何确定这个请求背后调用了哪些应用&#xff0…

self-attention和cross-attention

为什么Self-Attention要通过线性变换计算Q K V&#xff0c;背后的原理或直观解释是什么&#xff1f; - 知乎回答题主问题题主的问题: 在attention中都经过一个映射&#xff0c;那么建模的相似度是否就没有意义了&#xff1f;个人感觉这…https://www.zhihu.com/question/592626…

是面试官放水,还是公司实在是太缺人?这都没挂,腾讯原来这么容易进···

本人211非科班&#xff0c;之前在字节和腾讯实习过&#xff0c;这次其实没抱着什么特别大的希望投递&#xff0c;没想到腾讯可以再给我一次机会&#xff0c;还是挺开心的。 本来以为有个机会就不错啦&#xff01;没想到能成功上岸&#xff0c;在这里要特别感谢帮我内推的同学&…

CANFD和CAN的区别

文章目录 概念速率数据长度帧格式 概念 FD全称是 Flexible Data-Rate&#xff0c;顾名思义&#xff0c;表示CAN-FD 的帧报文具有数据场波特率可变的特性&#xff0c;即 仲裁场和数据控制场使用标准的通信波特率&#xff0c;而到数据场就会切换为更高的通信波特率&#xff0c; …

瑞云科技副总经理黄金进受邀出席2023广东超聚变生态伙伴大会并作主题演讲

2月10日&#xff0c;2023广东超聚变生态伙伴大会在广东深圳博林天瑞喜来登酒店成功举办。 本次大会以“聚变焕新数字湾区”为主题&#xff0c;通过合作伙伴分享&#xff0c;携手众多合作伙伴共同探讨行业趋势和热点话题&#xff0c;共建合作共赢生态&#xff0c;焕新数字湾区。…

电脑快捷键大全,提高效率靠它了!

案例&#xff1a;电脑快捷键大全 【谁懂啊&#xff01;作为一名打工人&#xff0c;效率真的太重要了&#xff0c;如果有快捷键真的可以使效率翻倍&#xff0c;哪位大神可以总结一下电脑常用的快捷键吗&#xff1f;跪谢了&#xff01;】 在日常使用电脑时&#xff0c;掌握一些…

【网络安全】本地提权漏洞分析

0. 前言 CVE-2023-21752 是 2023 年开年微软第一个有 exploit 的漏洞&#xff0c;原本以为有利用代码会很好分析&#xff0c;但是结果花费了很长时间&#xff0c;难点主要了两个&#xff1a;漏洞点定位和漏洞利用代码分析&#xff0c;欢迎指正。 1. 漏洞简介 根据官方信息&a…

什么是工厂模式?

文章目录 00 | 基础知识01 | 简单工厂模式框架实现应用场景小结 02 | 工厂方法模式框架实现应用场景小结 03 | 抽象工厂模式框架实现应用场景小结 04 | 总结 前面学习了设计模式的基本概念&#xff08;设计模式是对大家实际工作中写的各种代码进行高层次抽象的总结&#xff09;…

浅述 国产仪器仪表 6433D,6433F,6433H,6433L光波元件分析仪

6433系列光波元件分析仪包括6433D&#xff08;10MHz&#xff5e;26.5GHz&#xff09;、6433F&#xff08;10MHz&#xff5e;43.5GHz&#xff09;、6433H&#xff08;10MHz&#xff5e;50GHz&#xff09;、6433L&#xff08;10MHz&#xff5e;67GHz&#xff09;4个型号。 6433系…