当前位置: 首页 > news >正文

TypeScript:赋予JavaScript数据类型新的力量,提升编程效率!

🎬 岸边的风:个人主页

 🔥 个人专栏 :《 VUE 》 《 javaScript 》

⛺️ 生活的理想,就是为了理想的生活 !

在这里插入图片描述

 📚 前言

TypeScript:扩展JavaScript数据类型,赋予编程更强大的表达能力!

在现代Web开发中,TypeScript已经成为了一种备受欢迎的编程语言。它不仅继承了JavaScript的基本数据类型,例如number、string、boolean等,还引入了许多额外的类型,为开发者提供了更丰富和精确的类型系统。

除了常见的基本类型,TypeScript引入了any类型,允许变量在编译时具有任意类型,提供了更大的灵活性。而unknown类型则是一个更加安全的选项,用于处理未知类型的值,需要进行类型检查后才能使用

此外,TypeScript还引入了never类型,表示永远不会发生的类型,常用于处理异常情况或无法正常返回的函数。还有void类型,用于标识没有返回值的函数。

通过这些新增类型,TypeScript为开发者提供了更强大的表达能力和类型检查,大大减少了在运行时出现错误的可能性。它不仅提高了代码的可维护性和可读性,还加速了开发过程,为项目的健壮性和可靠性增添了保障。

因此,如果你想要在编程世界中拥有更强大的工具,并享受更高效的开发体验,不妨尝试一下TypeScript吧!

 

 📘 1. number

TypeScript中,所有的数字都是浮点数。这些数字的类型是number。下面是一些例子:

let decimal: number = 6; // 十进制
let hex: number = 0xf00d; // 十六进制
let binary: number = 0b1010; // 二进制
let octal: number = 0o744; // 八进制

📘 2. string

string类型表示文本数据。你可以使用单引号(')或双引号(")定义字符串,也可以使用反引号(`)定义模板字符串:

let color: string = "blue";
color = 'red';let fullName: string = `Bob Bobbington`;
let age: number = 37;
let sentence: string = `Hello, my name is ${ fullName }. I'll be ${ age + 1 } years old next month.`;

📘 3. boolean

boolean类型有两个值:truefalse

let isDone: boolean = false;

📘 4. Array

TypeScript中,数组类型有两种表达方式。一种是在元素类型后面加上 [],表示由此类型元素组成的一个数组。另一种方式是使用数组泛型,Array<元素类型>

let list: number[] = [1, 2, 3];
// 或
let list: Array<number> = [1, 2, 3];

📘 5. Tuple

元组类型允许表示一个已知元素数量和类型的数组,各元素的类型不必相同。比如,你可以定义一对值分别为 stringnumber的元组:

let x: [string, number];
x = ['hello', 10]; // OK

以上是TypeScript的一些基本类型。在接下来的对话中,我们可以进一步讨论其他的TypeScript类型,比如枚举(enum)、nullundefinednevervoid以及对象类型。

📘 6. Enum

Enum是一种特殊的类型,它可以更容易地处理一组有名字的常量。在TypeScript中,enum的默认起始值是0,然后每个成员的值都会依次增加。你也可以手动为enum的成员指定值:

enum Color {Red, Green, Blue}
let c: Color = Color.Green;// 手动指定成员的数值
enum Color {Red = 1, Green = 2, Blue = 4}
let c: Color = Color.Green;

📘 7. Null and Undefined

TypeScript中,undefinednull各自有自己的类型,分别是undefinednull。默认情况下,它们是所有类型的子类型。这意味着你可以把 nullundefined赋值给 number类型的变量。

然而,当你指定了--strictNullChecks标记,nullundefined只能赋值给void和它们各自的类型:

let u: undefined = undefined;
let n: null = null;

📘 8. Any

当你不确定一个变量应该是什么类型的时候,你可能需要用到 any 类型any类型的变量允许你对它进行任何操作,它就像是TypeScript类型系统的一个逃生窗口:

let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false; // okay, definitely a boolean

📘 9. Unknown

unknown类型TypeScript 3.0中引入的一种新类型,它是any类型对应的安全类型。unknown类型的变量只能被赋值给any类型unknown类型本身:

let value: unknown;value = true;             // OK
value = 42;               // OK
value = "Hello World";    // OK
value = [];               // OK
value = {};               // OK

📘 10. Never

never类型表示的是那些永不存在的值的类型。例如,never类型是那些总是会抛出异常或者根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型:

function error(message: string): never {throw new Error(message);
}

📘 11. void

TypeScript中,void类型用于表示没有返回值的函数的返回类型。在JavaScript中,当一个函数没有返回任何值时,它会隐式地返回undefinedvoid类型就是用来表达这种情况的:

function warnUser(): void {console.log("This is my warning message");
}

在这个例子中,warnUser函数没有返回任何值,所以它的返回类型是void

需要注意的是,在TypeScript中,你可以声明一个void类型的变量,但是你只能为它赋予undefinednull(在非严格null检查模式下):

let unusable: void = undefined;

通常情况下,我们不会这样使用void类型,因为除了undefinednull之外,你不能将任何值赋给void类型的变量。

📘 12. 联合类型(Union Types

TypeScript联合类型是一种将多种类型组合到一起的方式,表示一个值可以是多种类型之一。你可以使用管道符(|)来分隔每个类型。这可以让你在不确定一个值是什么类型的时候,为它选择多个可能的类型。

例如,假设我们有一个函数,这个函数的参数可以是number类型或者string类型

function display(input: string | number) {console.log(input);
}

在上面的函数中,我们声明了input参数可以是string类型或者number类型。你可以传递一个string类型或者number类型的值给display函数,而TypeScript编译器不会报错:

display(1); // OK
display("Hello"); // OK

你也可以将联合类型用于变量和属性。例如:

let variable: string | number;variable = "Hello"; // OK
variable = 1; // OK

在上面的代码中,我们声明了variable可以是string类型或者number类型。然后我们可以安全地将一个字符串或者数字赋值给variable

联合类型在TypeScript中非常常用,因为它们可以帮助你编写更灵活的代码。

📘 13. 交叉类型(Intersection Types

交叉类型是将多个类型合并为一个类型。这让我们可以把现有的多种类型叠加到一起获得所需的能力。它被定义为 Type1 & Type2 & Type3 & ... & TypeN。它包含了所需的所有类型的成员。

interface Part1 { a: string;
}interface Part2 { b: number;
}type Combined = Part1 & Part2;let obj: Combined = { a: 'hello',b: 42,
};

📘 14. 类型别名(Type Aliases

类型别名是给一个类型起个新名字。类型别名有时和接口很相似,但可以作用于原始值,联合类型,交叉类型等任何我们需要手写的地方。

type MyBool = true | false;
type StringOrNumber = string | number;

📘 15. 字符串字面量类型(String Literal Types

字符串字面量类型允许你指定字符串必须的固定值。在实践中,这种类型常与联合类型、类型别名和类型保护结合使用

type Easing = "ease-in" | "ease-out" | "ease-in-out";class UIElement {animate(dx: number, dy: number, easing: Easing) {// ...}
}let button = new UIElement();
button.animate(0, 0, "ease-in"); // OK
button.animate(0, 0, "uneasy");  // Error: "uneasy" is not allowed here

  📚 写在最后

总的来说,TypeScript是一个强大的编程语言,它结合了JavaScript的灵活性和动态特性,并扩展了静态类型检查和更丰富的功能,提供了更好的可维护性、可靠性和开发效率。对于Web开发者来说,学习和使用TypeScript将带来显著的好处,并推动项目的成功和发展。 

相关文章:

TypeScript:赋予JavaScript数据类型新的力量,提升编程效率!

&#x1f3ac; 岸边的风&#xff1a;个人主页 &#x1f525; 个人专栏 :《 VUE 》 《 javaScript 》 ⛺️ 生活的理想&#xff0c;就是为了理想的生活 ! ​ &#x1f4da; 前言 TypeScript&#xff1a;扩展JavaScript数据类型&#xff0c;赋予编程更强大的表达能力&#xff01…...

LLMs之Baichuan 2:《Baichuan 2: Open Large-scale Language Models》翻译与解读

LLMs之Baichuan 2&#xff1a;《Baichuan 2: Open Large-scale Language Models》翻译与解读 导读&#xff1a;2023年9月6日&#xff0c;百川智能重磅发布Baichuan 2。科技论文主要介绍了Baichuan 2&#xff0c;一个开源的大规模语言模型&#xff0c;以及其在多个领域的性能表现…...

听书网站模板源码 懒人书院网站源码 苹果cms手机听书网站模版源码 支持手机端

苹果cms超漂亮UI高仿芒果TV听书网站模板带手机端。 手机版修改logo&#xff0c;ting_wap/images/logo.png 电脑版修改logo&#xff0c;ting_pc/img/logo.png 编辑推荐后台推荐5颗星。 新势力/热播榜单后台推荐9颗星。...

算法 数据结构 斐波那契数列 递归实现斐波那契数列 斐波那契递归的优化 斐波那契数列递归求解 多路递归实现 斐波那契算法系列 数据结构(十一)

1. 什么是斐波那契数列&#xff1a; 之前的例子是每个递归函数只包含一个自身的调用&#xff0c;这称之为 single recursion 如果每个递归函数例包含多个自身调用&#xff0c;称之为 multi recursion 递推关系 下面的表格列出了数列的前几项 F0F1F2F3F4F5F6F7F8F9F10F11F12…...

【面试经典150 | 双指针】两数之和

文章目录 写在前面Tag题目来源题目解读解题思路方法一&#xff1a;暴力枚举方法二&#xff1a;哈希表方法三&#xff1a;二分法方法四&#xff1a;双指针 知识回顾写在最后 写在前面 本专栏专注于分析与讲解【面试经典150】算法&#xff0c;两到三天更新一篇文章&#xff0c;欢…...

桥接模式简介

概念&#xff1a; 桥接模式是一种结构型设计模式&#xff0c;它将抽象和实现分离&#xff0c;使它们可以独立地变化。通过使用桥接模式&#xff0c;可以将一个类的抽象部分与其具体实现部分解耦&#xff0c;并且可以在运行时动态地选择不同的实现。 特点&#xff1a; 将抽象…...

零钱兑换00

题目链接 零钱兑换 题目描述 注意点 如果没有任何一种硬币组合能组成总金额&#xff0c;返回 -1可以认为每种硬币的数量是无限的 解答思路 动态规划从总金额1开始推出目标金额所需的最少硬币个数&#xff0c;任意某个金额所需的最少硬币个数可以由当前金额减去每种面额的硬…...

JavaScipt中如何实现函数缓存?函数缓存有哪些场景?

1、函数缓存是什么&#xff1f; 函数缓存就是将函数运行的结果进行缓存。本质上就是用空间&#xff08;缓存存储&#xff09;换时间&#xff08;计算过程&#xff09; 常用于缓存数据计算结果和缓存对象。 缓存只是一个临时的数据存储&#xff0c;它保存数据&#xff0c;以便将…...

android studio的Android Drawable Preview

Android Drawable Preview 应用后&#xff0c;如下图&#xff1a; 再也不用一个一个点开去看了 其他学习资料&#xff1a; 1、付费专栏《Android kotlin入门到进阶系列讲解》&#xff1a;https://blog.csdn.net/qq_35091074/category_11036895.html 2、免费专栏《Android kot…...

基于云计算的区域LIS系统系统源码

在医疗机构内部&#xff0c;院内实验室主要负责本院临床科室的检验&#xff0c;院内LIS系统必须满足实验室日常的标本处理入库、仪器联机、检验结果处理、报告打印、报告发布、检验信息统计、检验信息报告发布、标本流程、外部医疗机构检验报告调阅等工作。 在医疗机构间&#…...

VR农学虚拟仿真情景实训教学演示

首先&#xff0c;VR农学虚拟仿真情景实训教学提供了更为真实的实践环境。传统的农学实训往往受制于时间、空间和资源的限制&#xff0c;学生只能通过观察或简单的模拟来学习农业知识和技能。而借助虚拟现实技术&#xff0c;学生可以进入虚拟农场&#xff0c;与各种农作物、工具…...

sklearn中make_blobs方法:聚类数据生成器

sklearn中make_blobs()方法参数&#xff1a; n_samples:表示数据样本点个数,默认值100 n_features:是每个样本的特征&#xff08;或属性&#xff09;数&#xff0c;也表示数据的维度&#xff0c;默认值是2。默认为 2 维数据&#xff0c;测试选取 2 维数据也方便进行可视化展示…...

Win11自带微软输入法怎么输入π及其他希腊字母

如果用搜狗等第三方输入法的话就没有这些问题了&#xff0c;各种符号很方便。 自带的输入法输入 pi 和 pai 都不能正常输入 π \pi π 参考文章 https://www.cnblogs.com/qq-757617012/p/14078133.html 如果用自带的输入法可以采用以下方式 输入uuxl xl表示“希腊”&#x…...

关于MyBatisPlus框架下出现xml里面定义的方法无法被正确识别以及提示调用mysql存储过程时参数无效的问题

第一个问题&#xff1a;xml里面明明定义了方法A&#xff0c;但是通过IService接口调用A的时候&#xff0c;总提示无法将接口中定义的函数绑定到xml中的同名方法中&#xff08;“Invalid bound statement (not found): com.aircas.sqlservice.mapper.SysTempIndexMapper.getRemo…...

vscode路径别名文件跳转解决办法

第一步&#xff1a;下载 1.在jsconfig.json中配置&#xff1a; {"compilerOptions": {"target": "es5","module": "esnext","baseUrl": "./","moduleResolution": "node","p…...

layui 富文本编辑器layedit 以及 图片转base64前端页面显示

js var index layui.layedit.build(noticeInformationContent, {area: [500px, 400px],uploadImage: {url: NI/uploadconimage //接口url, type: POST //默认post},hideTool: [image]});layui.form.verify({content: function (val) {layui.layedit.sync(index);var content …...

服务器给前端实时推送数据轻量化解决方案eventSource+Springboot

一、前端代码 body代码 <div id"result"></div>js代码 $(function(){if(typeof(EventSource) ! "undefined"){var source new EventSource("/demo/getTime");source.onmessage function(event) {console.log(event.data);$(&qu…...

数据结构与算法:数据结构基础

目录 数组 定义 形式 顺序存储 基本操作 读取元素 更新元素 插入元素 删除元素 扩容 初始化 时机 步骤 优劣势 链表 定义 单向链表 特点 双向链表 随机存储 基本操作 查找节点 更新节点 插入节点 删除元素 数组VS链表 栈与队列 栈 定义 基本操作…...

virtualbox虚拟机中安装FreeDOS系统和DJGPP编译环境

一、安装FreeDOS系统 1、从官网下载FreeDOS系统镜像&#xff0c;下载的压缩包中包含两个文件&#xff1a;后缀为.iso和.img的镜像 ​​​下载页面 http://www.freedos.org/download/ 直接下载链接 https://www.ibiblio.org/pub/micro/pc-stuff/freedos/files/distributions/1.…...

JAVASE事件监听

代码&#xff1a; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; import java.util.Scanner;import javax.swing.JButton; import javax.…...

ubuntu14.04改静态ip

现在可能已经用ubuntu14.04的人已经不多了&#xff0c;这里讲一下Ubuntu14.04怎么改静态ip 第一步&#xff1a;输入ifconfig查看ip和子网掩码 第二步&#xff1a;输入route -n查看网关 上面ip是192.168.88.136&#xff0c;子网掩码是255.255.255.0&#xff0c;网关是192.168.…...

“文件的上传与下载:实现与优化“

目录 引言1.文件的上传2.文件的下载3. JRebel安装使用4. 文件批量上传总结 引言 在开发过程中&#xff0c;文件的上传与下载是常见的需求。本篇博客将以CSND为例&#xff0c;介绍文件上传与下载的常见方式&#xff0c;以及如何通过优化提升性能和用户体验。 1.文件的上传 使…...

uboot顶层Makefile前期所做工作说明三

一. uboot顶层 Makefile文件 uboot顶层 Makefile&#xff0c;就是 uboot源码工程的根目录下的 Makefile文件。 本文继续对 uboot顶层 Makefile的前期准备工作进行介绍。续上一篇文章内容的学习&#xff0c;如下&#xff1a; uboot顶层Makefile前期所做工作说明二_凌肖战的博…...

Mysql树形表的两种查询方案(递归与自连接)

你有没有遇到过这样一种情况&#xff1a; 一张表就实现了一对多的关系&#xff0c;并且表中每一行数据都存在“爷爷-父亲-儿子-…”的联系&#xff0c;这也就是所谓的树形结构 对于这样的表很显然想要通过查询来实现价值绝对是不能只靠select * from table 来实现的&#xff0…...

text-align和text-align-last的属性值

text-algin 文本对齐方式&#xff1a; &#xff08;1&#xff09;left&#xff1a;左对齐&#xff1b; &#xff08;2&#xff09;right&#xff1a;右对齐&#xff1b; &#xff08;3&#xff09;center&#xff1a;居中对齐&#xff1b; &#xff08;4&#xff09;start&…...

SpringMVC的注解、参数传递、页面跳转

一.SpringMvc常用注解 常用注解 RequestMapping:RequestMapping注解是一个用来处理请求地址映射的注解&#xff0c;可用于映射一个请求或一个方法&#xff0c;可以用在类或方法上。 RequestParam:RequestParam主要用于将请求参数区域的数据映射到控制层方法的参数上 ModelAttr…...

OAK相机:启动报错X_LINK_DEVICE_NOT_FOUND

OAK相机&#xff1a;启动报错X_LINK_DEVICE_NOT_FOUND 环境报错原因与解决未设置 udev 规则USB崩溃排线接触不良或相机模块时钟干扰 环境 硬件&#xff1a; 4✖️OV9782相机模组OAK-FFC-4P驱动模组笔记本电脑 软件&#xff1a; Ubuntu18.04python 3.9depthai 2.21.2.0 报错…...

Python异常处理——走BUG的路,让BUG无处可走

作者&#xff1a;Insist-- 个人主页&#xff1a;insist--个人主页 本文专栏&#xff1a;Python专栏 专栏介绍&#xff1a;本专栏为免费专栏&#xff0c;并且会持续更新python基础知识&#xff0c;欢迎各位订阅关注。 目录 一、了解python异常 1、BUG 单词的由来 2、什么是异…...

如何解决iOS打包工具AppUploader登录权限问题?

摘要&#xff1a;在iOS技术博主的指导下&#xff0c;了解如何解决使用AppUploader打包时出现的权限问题。本文将深入探讨此问题&#xff0c;为你提供详细的解决方案。 引言&#xff1a; 作为iOS开发者&#xff0c;我们经常需要使用工具来打包和上传应用程序。AppUploader 是一…...

leetcode分类刷题:基于数组的双指针(四、小的移动)

leetcode上有些题是真的太难了&#xff0c;正常读题之后完全想不到要用双指针来求解&#xff0c;本次博客总结的题目是双指针初始时位于数组两端&#xff0c;哪个元素小就移动哪个指针 11. 盛最多水的容器 1、这道题放在42. 接雨水的相似题目里&#xff0c;可能是因为它们都有相…...

杰讯山西网站建设/seo什么意思简单来说

display布局中有两个属性&#xff0c;一个是none可以使其修饰的标签隐藏&#xff0c;show可以使其修饰的标签显示出来...

iis wordpress伪静态/百度问问我要提问

首先需要修改一些配置文件 vim /etc/ssh/sshd_config 进入sshd_config文件后需要更改几个地方 PubkeyAuthentication yes #启用公告密钥配对认证方式 AuthorizedKeysFile %h/.ssh/authorized_keys #设定PublicKey文件路径RSAAuthentication yes #允许RSA密钥PasswordAu…...

建站小二/百度收录入口

1. one team&#xff1a;生活日历 身为生活日历应该添加一些假期提醒以及工作人和双休日安排。可以添加第三方登录&#xff0c;使用户登录更加简单方便。应用了悬浮安妮&#xff0c;感觉把悬浮按钮放在顶部的的效果会更好&#xff0c;同时信息的显示不够清晰&#xff0c;绿色的…...

网站怎么做app吗/关键词优化资讯

2019独角兽企业重金招聘Python工程师标准>>> 1.端口号&#xff0c;链接在 application 中更改 2.链接名字--项目---web-寻找 转载于:https://my.oschina.net/u/3717819/blog/1801728...

做亚马逊网站费用吗/苏州网站优化公司

点击跳转Python笔记总目录 Python面向对象之异常处理 一、错误与异常 二、异常处理 三、什么时候用异常处理 一、错误与异常 程序中难免会出现错误&#xff0c;而错误分为两种 1.语法错误&#xff1a;&#xff08;这种错误&#xff0c;根本过不了python解释器的语法检测&#x…...

优秀的国外网站/西安抖音seo

需求&#xff1a;客户端界面需要一个软键盘进行操作 做了一个简易的例子进行展示。 html代码&#xff1a; <div id"container"> <div class"print-right"><div id"right-top" class"right-top"><div class&quo…...