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.rhkb.cn/news/128927.html

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

相关文章

React三属性之:props

作用 将父组件的参数传递给子组件 父组件 import ./App.css; import React from react; import PropsTest from ./pages/propsTest class App extends React.Component{render(){return(<div><h2>App组件</h2><PropsTest obj{{name:王惊涛,age:27}}>…

构建企业分支网络

构建企业分支网络 目录 1.1 项目背景 1.2 项目拓扑 1.3 项目需求 1.4 设备选型 1.5 技术选型 1.6 地址规划 1.6.1 交换设备地址规划表 1.6.2 路由设备地址规划表 1.6.3 ISP设备地址规划表 1.6.4 终端地址规划表 1.6.4.1 VLAN 规划 1.7 VLAN 规划 1.8 项目实施 1.…

无法将类型为“Newtonsoft.Json.Linq.JObject”的对象转换为类型“Newtonsoft.Json.Linq.JArray”解决方法

对于“Newtonsoft.Json.Linq.JObject”的对象强制类型转换为类型“Newtonsoft.Json.Linq.JArray”报错 第一的图为对象{“*************”:“********”} 第二个图片为数组[{“…”:“…”}] 在我这里进行强制转换对象转换为类型“Newtonsoft.Json.Linq.JArray”报错. 那我们…

Maven中导入jQuery,前端页面中引用jQuery

第一步pom文件中&#xff0c;配置maven坐标。 第二步&#xff0c;在前端页面中引用jQuery 注&#xff1a;该前端页面需要在web根目录即webapp目录下。可认为在maven中导入jQuery后&#xff0c;jquery.min.js文件放在目录webapp/webjars/jquery/3.3.1下。

新手小白制作产品册的攻略合集

在如今竞争激烈的市场中&#xff0c;一个精美而专业的产品册可以帮助你吸引更多的客户和提升品牌形象。然而&#xff0c;对于新手小白来说&#xff0c;制作产品册可能会显得有些困难。不用担心&#xff01;小编将告诉大家一些制作产品册的攻略&#xff0c;帮助你轻松入门 首先我…

MySQL触发器使用指南大全

一、介绍 触发器是与表有关的数据库对象&#xff0c;指在insert/update/delete之前或之后&#xff0c;触发并执行触发器中定义的SQL语句集合。触发器的这种特性可以协助应用在数据库端确保数据的完整性&#xff0c;日志记录&#xff0c;数据校验等操作。 使用别名OLD和NEW来引…

yolov7添加pconv模块

连接pconv 1、复制到models-common.py文件最后 2、添加模块到yolo.py 3、修改网络&#xff0c;建议替换3x3的卷积&#xff0c;后面的参数不要了 4、不能替换步长为2的卷积

机器学习入门教学——交叉验证

1、简介 交叉验证是在机器学习建立模型和验证模型参数时常用的办法&#xff0c;一般被用于评估一个机器学习模型的表现。更多的情况下&#xff0c;我们也用交叉验证来进行模型选择。【注】在训练模型时&#xff0c;为了提高模型的质量&#xff0c;我们会将数据集划分为训练集、…

VTK实现裁剪删除模型功能

VTK高级裁剪删除模型功能 功能演示 删除框选面片 保护框选面片 功能介绍 纯VTK实现的高级裁剪删除功能&#xff0c;支持任意框选内容&#xff0c;支持以下功能&#xff1a; 鼠标任意框选面片范围&#xff0c;支持删除框内面片&#xff0c;或选择仅保留框内面片框选后可以…

K8S1.23.6版本详细安装教程以及错误解决方案(包括前置环境,使用部署工具kubeadm来引导集群)

准备工作&#xff08;来自官方文档&#xff09; 一台兼容的 Linux 主机。Kubernetes 项目为基于 Debian 和 Red Hat 的 Linux 发行版以及一些不提供包管理器的发行版提供通用的指令。每台机器 2 GB 或更多的 RAM&#xff08;如果少于这个数字将会影响你应用的运行内存&#xf…

Git 提交时忽略某些文件

Git 提交时忽略某些文件 ①打开项目目录&#xff0c;找到.gitignore文件 ②编辑.gitignore文件&#xff0c;加上要忽略的文件后缀 以上是针对还没有提交过的文件进行过滤 如果已经这些后缀的文件已经提交过&#xff0c;则需要删除远程的该后缀文件 git rm --cached示例&…

Es6中的拓展运算符参数解构在实际项目当中应用

扩展操作符 … 是ES6中引入的&#xff0c;将可迭代对象展开到其单独的元素中,常见的应用场景有:拷贝数组对象,合并数组,参数传递,数组去重,字符串转字符数组,解构变量等 单纯的学习某个技术知识点,很容易的,但是能在实际项目中运用进去,那就不简单了的 单纯的学习某个语言的语法…

【LeetCode-简单题】69. x 的平方根

文章目录 题目方法一&#xff1a;二分查找 题目 方法一&#xff1a;二分查找 假设求8的平方根&#xff0c;那就设置left 0 &#xff0c;right 8&#xff1b; 每次取最中间的元素的平方和8对比&#xff0c;如果大于8&#xff0c;则right mid-1&#xff0c;如果小于8 left mi…

python趣味编程-数独游戏

数独游戏是一个用Python编程语言编写的应用程序。该项目包含可以显示实际应用程序的基本功能。该项目可以让修读 IT 相关课程并希望开发简单应用程序的学生受益。这个Python 数独游戏是一个简单的项目,可用于学习tkinter库的实践。这个数独游戏可以提供Python编程的基本编码技…

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

PowerBI - 匹配并从另一个表中获取值

我有 2 个表通过列 A 相互连接。我想将列 C 与列 A 匹配并获得列 B 的值。 DAX 函数是 LOOKUPVALUE . MatchedOutput LOOKUPVALUE(Table2[ColB],Table2[ColA],Table1[ColC])这将查找 Table2[ColB] 中的值哪里Table2[ColA]匹配 Table1[ColC] .

信息系统项目管理师(第四版)教材精读思维导图-第十三章项目资源管理

请参阅我的另一篇文章&#xff0c;综合介绍软考高项&#xff1a; 信息系统项目管理师&#xff08;软考高项&#xff09;备考总结_计算机技术与软件专业技术_铭记北宸的博客-CSDN博客 本章思维导图源文件 13.1 管理基础 13.2 管理过程 13.3 规划资源管理 13.4 估算活动资源 13.5…

[Qt]基础数据类型和信号槽

文章目录 1. Qt基本结构1.1 Qt本有项目1.1.1 项目文件&#xff08;.pro&#xff09;1.1.2 main.cpp1.1.3 mainwindow.ui1.1.4 mainwindow.h1.1.5 mainwindow.cpp 1.2 Qt中的窗口类1.2.1基础窗口类1.2.2 窗口的显示 1.3 内存回收 2. Qt中的基础数据类型2.1 基础类型2.2 log输出2…

爬虫系统的核心:如何创建高质量的HTML文件?

在网页抓取或爬虫系统中&#xff0c;HTML文件的创建是一项重要的任务。HTML文件是网页的基础&#xff0c;包含了网页的所有内容和结构。在爬虫系统中&#xff0c;我们需要生成一个HTML文件&#xff0c;以便于保存和处理网页的内容。 在这种情况下&#xff0c;可以使用Java函数…

Spring Boot深度解析:快速开发的秘密

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…