『TypeScript』深入理解TypeScript基本类型及其应用

news2025/1/18 20:29:54

请添加图片描述

请添加图片描述
📣读完这篇文章里你能收获到

  • 掌握TypeScript的基本及高级数据类型
  • 掌握TypeScript的类型系统

请添加图片描述

文章目录

  • 一、基本类型
    • 1. 类型声明
    • 2. 基本数据类型
      • 2.1 数字(Number)
      • 2.2 字符串(String)
      • 2.3 布尔值(Boolean)
      • 2.4 数组(Array)
      • 2.5 元组(Tuple)
      • 2.6 枚举(Enum)
    • 3. 高级数据类型
      • 3.1 对象(Object)
      • 3.2 空(Void)
      • 3.3 任意类型(Any)
      • 3.4 联合类型(Union)
  • 二、类型系统
    • 1. 类型推断
    • 2. 类型断言
    • 3. 类型兼容性
    • 4. 类型保护

请添加图片描述

一、基本类型

TypeScript 是一种由微软开发的开源编程语言,它是 JavaScript 的超集,为 JavaScript 添加了静态类型检。在 TypeScript 中,我们可以对数据进行显式的类型注解,以提高代码的可读性、可维护性和可靠性。

1. 类型声明

  • 语法:
let 变量: 类型;
let 变量: 类型 =; 
function fn(参数: 类型, 参数: 类型): 类型{     ... }
  • 类型:
类型例子描述
number1, -33, 2.5任意数字
string“hello”任意字符串
booleantrue、false布尔值true或false
字面量其本身限制变量的值就是该字面量的值
any*任意类型
unknown*类型安全的any
void空值(undefined)没有值(或undefined)
never没有值不能是任何值
object{name:‘孙悟空’}任意的JS对象
array[1,2,3]任意JS数组
tuple[4,5]元素,TS新增类型,固定长度数组
enumenum{A, B}枚举,TS中新增类型

2. 基本数据类型

2.1 数字(Number)

在 TypeScript 中,数字类型表示数值,可以包括整数和浮点数。使用 number 关键字声明数字类型变量,例如:

let age: number = 20;
let price: number = 9.99;

2.2 字符串(String)

字符串类型表示一串字符。使用单引号或双引号括起来的字符序列都是合法的字符串,例如:

let name: string = 'Alice';
let message: string = "Hello, TypeScript!";

2.3 布尔值(Boolean)

布尔类型表示真(true)或假(false)的值。使用 boolean 关键字声明布尔类型变量,例如:

let isFinished: boolean = false;
let hasErrors: boolean = true;

2.4 数组(Array)

数组类型表示一个元素的集合。使用 type[] 或 Array 格式来声明数组类型,其中 type 是元素的类型。例如:

let numbers: number[] = [1, 2, 3, 4, 5];
let fruits: Array<string> = ['apple', 'banana', 'orange'];

2.5 元组(Tuple)

元组类型表示一个固定长度的数组,每个元素可以具有不同的类型。使用 [type1, type2, …] 格式来声明元组类型,例如:

let person: [string, number] = ['Alice', 20];

2.6 枚举(Enum)

枚举类型用于定义一组命名的常量。通过 enum 关键字来声明枚举类型,例如:

enum Color {
  Red,
  Green,
  Blue,
}

let backgroundColor: Color = Color.Red;

3. 高级数据类型

3.1 对象(Object)

对象类型表示非原始类型的值。使用 object 关键字声明对象类型,例如:

let person: object = { name: 'Alice', age: 20 };

3.2 空(Void)

空类型表示没有任何值的类型。通常用于函数返回值的标注,例如:

function showMessage(): void {
  console.log('Hello, TypeScript!');
}

3.3 任意类型(Any)

任意类型表示允许赋值为任意类型的值。使用 any 关键字声明任意类型变量,例如:

let data: any = 'Hello, TypeScript!';
data = 10;
data = true;

3.4 联合类型(Union)

联合类型表示可以是多种类型之一的值。使用 type1 | type2 | … 格式来声明联合类型,例如:

let value: string | number = 'Hello, TypeScript!';
value = 10;

请添加图片描述

二、类型系统

1. 类型推断

TypeScript 能够根据变量的使用上下文来自动推断变量的类型。例如,当我们声明一个变量而没有显式指定其类型时,TypeScript 会根据变量的初始值来推断它的类型。示例代码如下:

let message = 'Hello, TypeScript!';
// 推断 message 的类型为 string

在上述示例中,TypeScript 推断 message 的类型为 string,因为它的初始值是一个字符串。
此外,TypeScript 也能推断函数的返回类型。如果函数的返回语句中有明确的类型信息,TypeScript 将会根据该信息推断出函数的返回类型。示例代码如下:

function add(a: number, b: number) {
  return a + b;
}
// 推断 add 函数的返回类型为 number

在上述示例中,TypeScript 推断 add 函数的返回类型为 number,因为 a 和 b 的类型都被显式地指定为 number,而函数体内部返回了两个 number 类型的值相加。

2. 类型断言

有时候,我们可能会清楚地知道一个变量的类型,但 TypeScript 并不能通过类型推断来确定。这种情况下,我们可以使用类型断言来告诉 TypeScript 变量的确切类型。示例代码如下:

let someValue: any = 'this is a string';
let strLength: number = (someValue as string).length;

在上述示例中,我们使用了类型断言 (someValue as string) 来将 someValue 断言为 string 类型,然后通过 .length 属性获取字符串的长度。通过类型断言,我们明确告诉 TypeScript 变量的类型,避免了潜在的类型错误。
除了 as 语法之外,还可以使用尖括号 进行类型断言。示例代码如下:

let someValue: any = 'this is a string';
let strLength: number = (<string>someValue).length;

3. 类型兼容性

在 TypeScript 中,类型兼容性是指当一个类型 A 可以被赋值给另一个类型 B 时,我们就说类型 A 兼容类型 B。TypeScript 的类型系统是基于结构子类型化的,这意味着类型的成员结构决定了它们是否兼容。
例如,如果一个类型具有与目标类型相同的属性和方法,则认为这两个类型是兼容的。示例代码如下:

interface Animal {
  name: string;
}
class Dog {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
}
let animal: Animal;
animal = new Dog('旺财');

在上述示例中,Animal 接口和 Dog 类具有相同的属性 name,因此我们可以将 Dog 类的实例赋值给 Animal 类型的变量,它们是兼容的。

4. 类型保护

类型保护是指一些表达式,它们能够在运行时检查类型,并以此来确保类型的正确性。TypeScript 提供了一些内置的类型保护机制,例如类型断言、类型判断等。
其中,类型判断是通过使用 typeofinstanceofin 和自定义类型谓词函数等方式进行的。示例代码如下:

function isNumber(value: any): value is number {
  return typeof value === 'number';
}
function printValue(value: any) {
  if (isNumber(value)) {
    console.log(value.toFixed(2));
  } else {
    console.log(value.toUpperCase());
  }
}

在上述示例中,函数 isNumber 接收一个参数 value,类型为 any,并且返回一个表达式 value is number。这里的 value is number 是一种类型谓词,意味着当这个函数返回 true 的时候,TypeScript 就会知道在这个条件下 value 的类型是 number。在 printValue 函数中,我们使用了类型保护来确保 value 的类型正确,从而避免了潜在的错误操作。

请添加图片描述

请添加图片描述

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

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

相关文章

YOLOv8改进 | 2023 | DiverseBranchBlock多元分支模块(有效涨点)

一、本文介绍 本文带来的改进机制是YOLOv8模型与多元分支模块&#xff08;Diverse Branch Block&#xff09;的结合&#xff0c;Diverse Branch Block (DBB) 是一种用于增强卷积神经网络性能的结构重新参数化技术。这种技术的核心在于结合多样化的分支&#xff0c;这些分支具有…

机器学习应用 | 使用 MATLAB 进行异常检测(上)

异常检测任务&#xff0c;指的是检测偏离期望行为的事件或模式&#xff0c;可以是简单地检测数值型数据中&#xff0c;是否存在远超出正常取值范围的离群值&#xff0c;也可以是借助相对复杂的机器学习算法识别数据中隐藏的异常模式。 在不同行业中&#xff0c;异常检测的典型…

Linux 文件写入报错E297: Write error in swap file

错误原因 Linux系统不能向文件写入内容&#xff0c;无论写入都无保存&#xff0c;并且提示下文信息 E297: Write error in swap file "abc.txt" [New File] Press ENTER or type command to continue 经过查找资料得知可能是磁盘满了。通过df -h命令查看磁盘情况…

互联网Java工程师面试题·RabbitMQ篇

目录 1、什么是 rabbitmq 2、为什么要使用 rabbitmq 3、使用 rabbitmq 的场景 4、如何确保消息正确地发送至 RabbitMQ&#xff1f; 如何确保消息接收方消费了消息&#xff1f; 5、如何避免消息重复投递或重复消费&#xff1f; 6、消息基于什么传输&#xff1f; 7、消息如…

新农村建设集中污水处理需要哪些设备

新农村建设集中污水处理是一个关乎环境保护和农村发展的重要议题。在实施该项目时&#xff0c;需要一系列专业设备来确保污水处理的高效性和可持续性。 首先&#xff0c;在新农村建设集中污水处理中&#xff0c;最基本的设备是污水收集系统。这包括地下管网、检查井和泵站等设施…

C++新经典模板与泛型编程:SFINAE特性的信息萃取

用成员函数重载实现is_default_constructible 首先介绍一个C标准库提供的可变参类模板std::is_default_constructible。这个类模板的主要功能是判断一个类的对象是否能被默认构造&#xff08;所谓默认构造&#xff0c;就是构造一个类对象时&#xff0c;不需要给该类的构造函数…

Linux 网络协议

1 网络基础 1.1 网络概念 网络是一组计算机或者网络设备通过有形的线缆或者无形的媒介如无线&#xff0c;连接起来&#xff0c;按照一定的规则&#xff0c;进行通讯的集合( 缺一不可 )。 5G的来临以及IPv6的不断普及&#xff0c;能够进行联网的设备将会是越来越多&#xff08…

12、组合模式(Composite Pattern,不常用)

组合模式&#xff08;Composite Pattern&#xff09;&#xff0c;有时又叫作部分-整体模式&#xff0c;它是一种将对象组合成树状的层次结构的模式&#xff0c;用来表示“部分-整体”的关系&#xff0c;使用户对单个对象和组合对象具有一致的访问性。 它在我们树型结构的问题中…

微信小程序动态加载图表[echart]

1.引入Echarts &#xff08;1&#xff09;将ec-canvas文件拷贝下来放到你自己的项目中&#xff1a; &#xff08;2&#xff09;在你需要使用Echarts的页面的json文件中引入Echarts "usingComponents": {"ec-canvas": "../utils/ec-canvas/ec-canva…

[⑧ADRV902x]: Digital Pre-Distortion (DPD)学习笔记

前言 DPD 数字预失真技术&#xff0c;是一种用于抑制功率放大器非线性失真的方法。 它通过在信号输入功率放大器&#xff08;PA&#xff09;之前插入一个预失真模块&#xff0c;对输入信号进行适当的调制&#xff0c;以抵消功率放大器引起的非线性失真&#xff0c;使功率放大器…

【AIGC】prompt工程从入门到精通--图片生成专题

本文为系列教程【AIGC】prompt工程从入门到精通的子教程。 一、介绍 与文本提示相比&#xff0c;找到最佳的提示词来生成完美的图片并没有那么成熟。这可能是因为创建对象自身的挑战&#xff0c;这些对象基本上是主观的并且往往缺乏良好的准确性度量方法。 本指南涵盖了基本…

【libcurl库】OpenSSL 库、多线程、断点续传(二)

一、libcurl函数库常用字段解读 1、curl_global_init()&#xff1a;初始化libcurl2、curl_easy_init()&#xff1a;得到easy interface型指针&#xff0c;拿到句柄3、curl_easy_setopt(CURL *handle, CURLoption option, parameter)&#xff1a;设置传输选项 第二个参数CURLop…

Linux——进程状态

我们都知道进程信息被放到了PCB&#xff08;task_struct&#xff09;中&#xff0c;可以理解为进程属性的集合。 PCB中包含了进程的ID&#xff0c;时间片&#xff0c;pc指针&#xff0c;所有的寄存器&#xff0c;进程状态、优先级、I/O状态信息等等...有兴趣的可以去看看源码&…

【Flink系列六】Flink里面的状态一致性

状态一致性 有状态的流处理&#xff0c;内部每个算子任务都可以有自己的状态&#xff0c;对于流处理器内部来说&#xff0c;所谓的状态一致性&#xff0c;其实就是我们所说的计算结果要保证准确。一条数据不应该丢失&#xff0c;也不应该重复计算。再遇到有故障时可以恢复状态…

2024年度AI策略报告:AI浪潮扬帆起航,传媒应用百花齐放

今天分享的人工智能系列深度研究报告&#xff1a;《2024年度AI策略报告&#xff1a;AI浪潮扬帆起航&#xff0c;传媒应用百花齐放》。 &#xff08;报告出品方&#xff1a;兴业证券&#xff09; 报告共计&#xff1a;52页 1、行情回顾&#xff1a;板块处于较低区间&#xff0…

粒子库particles.vue3在项目中的使用

一、particles.vue3是什么 particles.vue3 是一个 Vue 3 的组件库&#xff0c;用于在 Vue 3 项目中创建和管理粒子效果。它基于 tsparticles 引擎&#xff0c;提供了一系列的 Vue 组件&#xff0c;使我们能够轻松地在应用程序中添加动态的粒子效果。   如果您正在开发一个 V…

【Python源码保护】02 - pyc

1. python编译过程 Python虽然是一门解释型语言&#xff0c;但Python程序执行时&#xff0c;也需要将源码进行编译生成字节码&#xff0c;然后由Python虚拟机进行执行&#xff0c;因此Python解释器实际是由两部分组成&#xff1a;编译器和虚拟机。 Python程序执行过程和Java类…

函数声明、调用的过程

【 一 】函数声明、调用的过程详述 1. 函数必须先定义后调用&#xff0c;没有定义函数是一定不能够调用的 2. 函数在定义阶段&#xff0c;只检测语法是否错误&#xff0c;不检测逻辑是否有问题 3. 逻辑上的错误只会在调用阶段检测 4. 函数一定是被调用之后才会执行函数内部的代…

C#科学绘图库ScottPlot

文章目录 安装和准备初步使用简单的设置 安装和准备 ScottPlot是基于.Net的一款开源免费的交互式可视化库&#xff0c;支持Winform和WPF等UI框架&#xff0c;本文示例在WPF环境中运行。在VS的菜单栏->工具->NuGet包管理器->管理解决方案的NuGet程序包->在浏览选项…

JS基础面试题之手写bind

JS基础面试题之手写bind 手写bind返回函数的模拟实现传参的模拟实现构造函数效果的模拟实现构造函数效果的优化实现最终版 手写bind bind()方法会创建一个新的函数。当这个函数被调用时&#xff0c;bind()的第一个参数将作为它的运行时的this&#xff0c;之后的一序列参数将会在…