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将带来显著的好处,并推动项目的成功和发展。 

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

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

相关文章

数据挖掘实验-主成分分析与类特征化

数据集&代码https://www.aliyundrive.com/s/ibeJivEcqhm 一.主成分分析 1.实验目的 了解主成分分析的目的&#xff0c;内容以及流程。 掌握主成分分析&#xff0c;能够进行编程实现。 2.实验原理 主成分分析的目的 主成分分析就是把原有的多个指标转化成少数几个代表…

Kafka3.0.0版本——消费者(Sticky分区分配策略以及再平衡)

目录 一、Sticky分区分配策略原理二、Sticky分区分配策略 示例需求三、Sticky分区分配策略代码案例3.1、创建带有7个分区的sevenTopic主题3.2、创建三个消费者 组成 消费者组3.3、创建生产者3.4、测试3.5、Sticky分区分配策略代码案例说明 四、Sticky分区分配再平衡案例4.1、停…

Redis 删除策略

文章目录 Redis 删除策略一、过期数据二、数据删除策略1、定时删除2、惰性删除3、定期删除4、删除策略对比 三、逐出算法 Redis 删除策略 一、过期数据 Redis是一种内存级数据库&#xff0c;所有数据均存放在内存中&#xff0c;内存中的数据可以通过TTL指令获取其状态 XX &a…

【李自然说】在创业路演现场,3分钟打动投资人 (notebook)[Updating]

【李自然说】在创业路演现场&#xff0c;3分钟打动投资人_哔哩哔哩_bilibili 融资的核心问题&#xff08;三分钟内讲清楚&#xff09; - 竞争者做什么&#xff0c;我们做什么 &#xff08;是否有&#xff0c;没有那潜在competitor是谁&#xff0c;有没有可能变成合作伙伴&#…

构建高效实时数据流水线:Flink、Kafka 和 CnosDB 的完美组合

当今的数据技术生态系统中&#xff0c;实时数据处理已经成为许多企业不可或缺的一部分。为了满足这种需求&#xff0c;Apache Flink、Apache Kafka和CnosDB等开源工具的结合应运而生&#xff0c;使得实时数据流的收集、处理和存储变得更加高效和可靠。本篇文章将介绍如何使用 F…

java的动态代理如何实现

一. JdkProxy jdkproxy动态代理必须基于接口(interface)实现 接口UserInterface.java public interface UserService {String getUserName(String userCde); }原始实现类&#xff1a;UseServiceImpl.java public class UserServiceImpl implements UserSerice {Overridepub…

举例说明PyTorch函数torch.cat与torch.stack的区别

一、torch.cat与torch.stack的区别 torch.cat用于在给定的维度上连接多个张量&#xff0c;它将这些张量沿着指定维度堆叠在一起。 torch.stack用于在新的维度上堆叠多个张量&#xff0c;它会创建一个新的维度&#xff0c;并将这些张量沿着这个新维度堆叠在一起。 二、torch.…

原生js之dom表单改变和鼠标常用事件

那么好,本次我们聊聊表单改变时如何利用onchange方法来触发input改变事件以及鼠标常用的滑入滑出,点击down和点击up事件. 关于onchange方法 onchange方法在鼠标输入完后点击任何非输入框位置时触发.触发时即可改变原有输入框的值. out 、leave、over、down、up鼠标方法 当用…

React refers to UMD global, but the current file is a module vite初始化react项目

vite搭建react项目 初始化项目 npm create vite 在执行完上面的命令后&#xff0c;npm 首先会自动下载create-vite这个第三方包&#xff0c;然后执行这个包中的项目初始化逻辑。输入项目名称之后按下回车&#xff0c;此时需要选择构建的前端框架&#xff1a; ✔ Project na…

932. 漂亮数组

932. 漂亮数组 原题链接&#xff1a;完成情况&#xff1a;解题思路&#xff1a;参考代码&#xff1a; 原题链接&#xff1a; 932. 漂亮数组 https://leetcode.cn/problems/beautiful-array/description/ 完成情况&#xff1a; 解题思路&#xff1a; nums 是由范围 [1, n] 的…

jmeter如何压测和存储

一、存储过程准备&#xff1a; 1、建立一个空表&#xff1a; 1 CREATE TABLE test_data ( id NUMBER, name VARCHAR2(50), age NUMBER ); 2、建立一个存储过程&#xff1a; CREATE OR REPLACE PROCEDURE insert_test_data(n IN NUMBER) ASBEGIN--EXECUTE IMMEDIATE trunca…

4个维度讲透ChatGPT技术原理,揭开ChatGPT神秘技术黑盒!(文末送书)

&#x1f935;‍♂️ 个人主页&#xff1a;艾派森的个人主页 ✍&#x1f3fb;作者简介&#xff1a;Python学习者 &#x1f40b; 希望大家多多支持&#xff0c;我们一起进步&#xff01;&#x1f604; 如果文章对你有帮助的话&#xff0c; 欢迎评论 &#x1f4ac;点赞&#x1f4…

浏览器进程,性能指标,性能优化

目录 浏览器进程&#xff1a;多进程 主进程&#xff1a;显示、交互&#xff0c;增删进程 UI进程&#xff1a;控制地址栏、书签、前进后退 存储进程&#xff1a;cookie&#xff0c;webstorage&#xff0c;indexDB 渲染进程&#xff1a;每个标签页或窗口都有一个独立的渲染进…

【深度学习】分类损失函数解析

【深度学习】分类相关的损失解析 文章目录 【深度学习】分类相关的损失解析1. 介绍2. 解析3. 代码示例 1. 介绍 在分类任务中&#xff0c;我们通常使用各种损失函数来衡量模型输出与真实标签之间的差异。有时候搞不清楚用什么&#xff0c;下面是几种常见的分类相关损失函数及其…

Boost搜索引擎

项目背景 先说一下什么是搜索引擎,很简单,就是我们平常使用的百度,我们把自己想要所有的内容输入进去,百度给我们返回相关的内容.百度一般给我们返回哪些内容呢?这里很简单,我们先来看一下. 搜索引擎基本原理 这里我们简单的说一下我们的搜索引擎的基本原理. 我们给服务器发…

Fast RCNN

【简介】 Fast RCNN[6]网络是RCNN和SPPNet的改进版&#xff0c;该网路使得我们可以在相同的网络配置下同时训练一个检测器和边框回归器。该网络首先输入图像&#xff0c;图像被传递到CNN中提取特征&#xff0c;并返回感兴趣的区域ROI&#xff0c;之后再ROI上运用ROI池化层以保证…

如何用Jmeter提取和引用Token

1.执行获取token接口 在结果树这里&#xff0c;使用$符号提取token值。 $根节点&#xff0c;$.data.token表示提取根节点下的data节点下的token节点的值。 2.使用json提取器&#xff0c;提取token 变量路径就是把在结果树提取的路径写上。 3.使用BeanShell取样器或者BeanShell后…

浅谈泛在电力物联网、能源互联网与虚拟电厂

导读&#xff1a;从能源互联网推进受阻&#xff0c;到泛在电力物联网名噪一时&#xff0c;到虚拟电厂再次走向火爆&#xff0c;能源领域亟需更进一步的数智化发展。如今&#xff0c;随着新型电力系统建设推进&#xff0c;虚拟电厂有望迎来快速发展。除了国网和南网公司下属的电…

常见排序算法

排序简介常见排序算法插入排序直接插入排序希尔排序 选择排序选择排序堆排序 交换排序冒泡排序快速排序hoare版挖坑法前后指针法非递归实现快排优化 归并排序非递归实现归并排序海量数据排序问题 基数排序&#xff08;不用比较就能够排序&#xff09;桶排序计数排序&#xff08…

常用消息中间件有哪些

RocketMQ 阿里开源&#xff0c;阿里参照kafka设计的&#xff0c;Java实现 能够保证严格的消息顺序 提供针对消息的过滤功能 提供丰富的消息拉取模式 高效的订阅者水平扩展能力 实时的消息订阅机制 亿级消息堆积能力 RabbitMQ Erlang实现&#xff0c;非常重量级&#xff0c;更适…