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

news2025/1/15 17:20:02

🎬 岸边的风:个人主页

 🔥 个人专栏 :《 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.coloradmin.cn/o/998541.html

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

相关文章

bs4库爬取小说工具

学习了爬取天气预报&#xff0c;今天尝试做个爬取小说工具&#xff0c;有时候网上看看小说休闲下&#xff0c;打算保存txt文本文件&#xff0c;方便离线阅读。 第一步&#xff1a;先确定目标网址 网上随便找了本小说&#xff0c;先找到小说目录页面。 网址首页&#xff1a;h…

c语言练习48:总结字符函数和字符串函数

总结字符函数和字符串函数 字符函数 1. 字符分类函数 C语⾔中有⼀系列的函数是专⻔做字符分类的&#xff0c;也就是⼀个字符是属于什么类型的字符的。 这些函数的使⽤都需要包含⼀个头⽂件是 ctype.h 2. 字符转换函数 字符串函数 . strlen的使⽤ •字符串以 \0 作为结束标…

Linux操作系统基础知识

目录 一、什么是Linux 二、如何有一个Linux环境 三、基本的 Linux 命令 1. pwd - 显示当前工作目录 2. ls - 列出文件和目录 3. cd - 切换目录 4. mkdir - 创建目录 5. rm - 删除文件或目录 6. cp - 复制文件或目录 7. mv - 移动文件或目录 8. touch - 创建空文件 9…

智能座舱概述

文章目录 智能座舱智能驾驶一、汽车座舱历经机械化、电子化&#xff0c;向智能化不断演进二、智能座舱的定义&#xff1a;车内升级车外互联1.从车内看2.从车外看 三、电子座舱、智能助理、人机共驾、第三生活空间 智能座舱智能驾驶 智能汽车以“座舱”“底盘”上下两大智能化系…

短视频去水印

一、使用方法 打开短视频APP&#xff0c; 选择要下载的视频&#xff0c;点击右下角分享按钮&#xff0c;在分享弹框中点击“复制链接” 将刚才复制的链接粘贴到下面的输入框&#xff08;中文可以不用去掉&#xff09; 二、短视频解析王源码 public function analysis($video…

音视频技术开发周刊 | 310

每周一期&#xff0c;纵览音视频技术领域的干货。 新闻投稿&#xff1a;contributelivevideostack.com。 学术头条 | 基于网络科学的人工智能揭示基因信息如何利用单细胞塑造形体 近日&#xff0c;由清华大学脑与智能实验室复杂网络智能中心&#xff08;CCNI&#xff09;主任Ca…

监听对象中属性变化(一个或多个属性、全部属性)

一、数据监听器 什么是数据监听器 数据监听器用于监听和响应任何属性和数据自动的变化&#xff0c;从而执行特定的操作。它的作用类似于vue中的watch侦听器。在小程序中&#xff0c;基本语法格式如下&#xff1a; Component({observers: {字段A&#xff0c;字段B: function(字…

计算机丢失msvcp140.dll是什么意思?msvcp140.dll丢失的解决方法

在使用计算机的过程中&#xff0c;我们可能会遇到各种奇葩的问题。其中&#xff0c;一个常见的问题是计算机提示丢失msvcp140.dll。这个文件是Microsoft Visual C 2015 Redistributable的一部分&#xff0c;通常用于支持一些软件&#xff08;如游戏、办公软件等&#xff09;的运…

遗忘因子递推最小二乘参数估计(FFRLS)

基于遗忘因子的最小二乘法电池参数辨识 最小二乘法是系统辨识中最常用的一种估算方法。为了克服最小二乘法存在”数据饱和”的问题&#xff0c;我们通常采用含有遗忘因子的递推最小二乘法(Forgetting Factor Recursive Least Square,FFRLS)算法进行电池模型的参数辨识。 1、二…

图片码二次渲染绕过

目录 一、环境 1、代码 2、文件处理方式 3、图片码的制作 二、绕过图片重构 1、可行性分析 2、数据比对 3、完成绕过 一、环境 以upload-labs靶场第十七关为例 1、代码 源码为&#xff1a; <?php include ../config.php; include ../head.php; include ../menu.…

管理类联考——数学——汇总篇——知识点突破——应用题——分段计费

👊 分段计费是指不同的范围对应着不同的计费方式,在实际中应用很广泛,比如电费,水费、邮费、个税、话费、出租车费、销售提成等等。解题思路的关键点有两个,一个是先计算每个分界点的值,确定所给的数值落入哪个范围;另外,对应选取正确的计费表达式,按照所给的标准进…

腾讯云CVM S5服务器性能测评和租用价格1年和五年

腾讯云服务器CVM五年时长&#xff0c;2核2G服务器5年1728元、2核4G1M带宽五年3550、4核8G服务器6437元五年&#xff0c;CVM标准型S5实例可选2核2G、2核4G和4核8M&#xff0c;公网带宽可1M、3M和5M&#xff0c;系统盘为50G高性能云硬盘&#xff0c;S5云服务器CPU采用Intel Xeon …

模电课设:用Multisim简单了解二极管

1 课设内容 1&#xff09;测试二极管伏安特性电路&#xff1b; 2&#xff09;二极管的整流电路及负载对输出电压和纹波的影响&#xff1b; 2 模型搭建 电路一&#xff1a;测试二极管伏安特性的电路如下图所示&#xff0c;结构十分简单&#xff0c;直流电源串联上二极管组成一…

windows10搭建llama大模型

背景 随着人工时代的到来及日渐成熟&#xff0c;大模型已慢慢普及&#xff0c;可以为开发与生活提供一定的帮助及提升工作及生产效率。所以在新的时代对于开发者来说需要主动拥抱变化&#xff0c;主动成长。 LLAMA介绍 llama全称&#xff1a;Large Language Model Meta…

c#中字段和属性的区别,委托和事件的区别

IDE眼里的字段和属性 class Test {public int age1 12;public int Age2 { get; set; } 18;public void Show(){Console.WriteLine(age1);Console.WriteLine(Age2);} }很多新人发现在类中定义变量时&#xff0c;有些人会在后面写上get,set。 这种写法定义出来的变量&#xf…

数据结构与算法-二叉搜索树红黑树

一&#xff1a;二叉搜索树 大家来看以下几个结构&#xff1a;下图中的 二叉搜索树又叫二叉查找树&#xff0c;二叉排序树&#xff1b; 它具有以下特点&#xff1a; 1.如果它的左子树不为空&#xff0c;则左子树上结点的值都小于根结点。 2.如果它的右子树不为空&#xff0c;则右…

动手学深度学习——Windows下的环境安装流程(一步一步安装,图文并配)

目录 环境安装官网步骤图文版安装Miniconda下载包含本书全部代码的压缩包使用conda创建虚拟&#xff08;运行&#xff09;环境使用conda创建虚拟环境并安装本书需要的软件激活之前创建的环境打开Jupyter记事本 环境安装 文章参考来源&#xff1a;http://t.csdn.cn/tu8V8 官网…

编程初学者指南(2023版):零基础小白如何学习编程-两万字详述

文章目录 1.写在前面1.1 为什么有这份指南1.2 指南里有什么1.3 关于软件协会1.4 面对人生&#x1f340; 对工作&#xff1a;越努力越幸运&#x1f340; 对感情&#xff1a;爱得厚重开阔&#x1f340; 对他人&#xff1a;保持尊重、友好、真诚和谦逊&#x1f340; 对生活&#x…

【论文解读】元学习:MAML

一、简介 元学习的目标是在各种学习任务上训练模型&#xff0c;这样它就可以只使用少量的训练样本来解决新任务。 论文所提出的算法训练获取较优模型的参数&#xff0c;使其易于微调&#xff0c;从而实现快速自适应。该算法与任何用梯度下降训练的模型兼容&#xff0c;适用于…

群辉 Synology NAS Docker 安装 RustDesk-server 自建服务器只要一个容器

from https://blog.zhjh.top/archives/M8nBI5tjcxQe31DhiXqxy 简介 之前按照网上的教程&#xff0c;rustdesk-server 需要安装两个容器&#xff0c;最近想升级下版本&#xff0c;发现有一个新镜像 rustdesk-server-s6 可以只安装一个容器。 The S6-overlay acts as a supervi…