TypeScript 类型系统深度解析:类型全览

TypeScript 类型系统深度解析:类型全览

引言

TypeScript 类型系统是其核心特性之一,它为 JavaScript 提供了静态类型检查的能力。这不仅帮助开发者在编译时发现错误,还增强了代码的可读性和可维护性。本文将为您详细介绍 TypeScript 中的各种类型,并提供示例说明它们的使用场景。

基本类型

基本类型是 TypeScript 中最简单的数据类型,包括:

  • string:用于表示文本数据。
  • number:用于表示数值,可以是整数或浮点数。
  • boolean:表示逻辑值 truefalse
  • void:用于表示没有任何值,通常用作没有返回值的函数的返回类型。

示例

let name: string = "TypeScript";
let age: number = 30;
let isApproved: boolean = true;
function printName(): void {console.log(name);
}
复合类型

复合类型允许更复杂的类型定义,包括:

  • union types:联合类型,使用 | 表示,一个变量可以是多种类型之一。
  • intersection types:交叉类型,使用 & 表示,组合多个类型到一个新类型。

示例

let status: "active" | "pending" | "inactive" = "active";
interface Person {name: string;age: number;
}
interface Developer {language: string;
}
type PersonDeveloper = Person & Developer; // 交叉类型
对象类型

对象类型用于表示复杂的数据结构,包括:

  • object:表示非原始类型。
  • literal types:字面量类型,用于定义具体的值。

示例

let user: object = { name: "Alice", age: 30 };
let id: 1 = 1; // 具体的数值字面量类型
数组类型

数组类型用于定义数组中元素的类型。

示例

let numbers: number[] = [1, 2, 3];
let names: string[] = ["Alice", "Bob"];
元组类型 (Tuple)

元组类型允许表示一个元素有固定数量和类型的数组。

示例

let userInfo: [string, number] = ["Alice", 30];
枚举类型 (Enum)

枚举类型由一组命名的常量值组成。

示例

enum Color { Red, Green, Blue }
let color: Color = Color.Blue;
任意值 (Any)

any 类型用于表示任何类型,通常在不清楚类型时使用。

示例

let value: any = "Hello";
value = 123;
未知值 (Unknown)

unknown 类型类似于 any,但它更加安全,需要类型检查。

示例

let value: unknown;
value = "Hello";
value = 123; // 错误,需要类型断言
空值 (Null and Undefined)

nullundefined 表示没有值。

示例

let value: string | null = null;
let notSet: string | undefined = undefined;
类型断言 (Type Assertions)

类型断言用于断言一个值的类型。

示例

interface Person {name: string;
}
let user = { name: "Alice" } as Person;
类型守卫 (Type Guards)

类型守卫用于缩小变量的类型范围。

示例

function printValue(value: string | number) {if (typeof value === "string") {console.log(value.toUpperCase());} else {console.log(value * 10);}
}
类型别名 (Type Aliases)

类型别名用于创建新类型名称的简写。

示例

type UserID = string;
let id: UserID = "123";
类和接口

class 用于定义类,interface 用于定义对象的结构。

示例

interface Person {name: string;age: number;
}
class User implements Person {name: string;age: number;constructor(name: string, age: number) {this.name = name;this.age = age;}
}
函数类型

函数类型用于定义函数的参数和返回值类型。

示例

let add: (a: number, b: number) => number;
add = (a, b) => a + b;
泛型 (Generics)

泛型允许创建可重用的组件。

示例

function identity<T>(arg: T): T {return arg;
}
let output = identity<string>("hello"); // string类型
映射类型 (Mapped Types)

映射类型基于现有类型创建新类型。

示例

interface Options {[key: string]: string;
}
type OptionsMapped = { [Key in keyof Options]: number };
条件类型 (Conditional Types)

条件类型根据条件表达式的结果来决定使用哪种类型。

示例

type TypeName<T> = T extends string ? "string" : T extends number ? "number" : never;
type Result = TypeName<"hello">; // "string"
索引类型 (Indexable Types)

索引类型允许通过索引访问对象属性。

示例

let obj: { [key: string]: string } = { name: "TypeScript" };
let name: string = obj["name"];
模板字符串类型 (Template Literal Types)

模板字符串类型允许字符串字面量和表达式混合使用。

示例

let name: string = "TypeScript";
let message: string = `Hello, ${name}!`; // 类型为 "Hello, TypeScript!"
类实例成员变量类型 (This Parameter Type)

为类的实例成员函数的 this 参数指定类型。

示例

class Point {x = 0;y = 0;constructor(x: number, y: number) {this.x = x;this.y = y;}print() {return `(${this.x}, ${this.y})`;}
}
模块类型 (Module Types)

模块类型用于模块和命名空间的类型。

示例

module Geometry {export class Square {sideLength: number;constructor(sideLength: number) {this.sideLength = sideLength;}}
}
let mySquare = new Geometry.Square(10);
声明合并 (Type Merging)

声明合并将多个类型声明指向相同的名称时合并为一个类型。

示例

interface Logger {log(message: string): void;
}
interface Logger {error(message: string): void;
}
结语

TypeScript 提供了丰富的类型系统,允许开发者以静态方式定义和使用数据类型。这不仅提升了代码的安全性,还增强了代码的可读性和可维护性。

学习资源
  • TypeScript官方文档:TypeScript Handbook

  • TypeScript官方文档:Advanced Types

  • 关键词:TypeScript, 类型系统, 类型注解, 类型推断, 联合类型, 交叉类型, 类型守卫, 类型别名, 类, 接口, 泛型, 映射类型, 条件类型, 索引类型, 模板字符串类型, 类实例成员变量类型, 模块类型, 声明合并

相关文章
  • 【TypeScript 入门】
  • TypeScript的非空断言(!)和可选链(?):开发效率翻倍!

这篇文章全面介绍了 TypeScript 中的类型,从基本类型到高级用法,帮助读者深入理解 TypeScript 的强大功能,并鼓励他们在实际项目中应用这些知识。

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

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

相关文章

高考志愿系统-信息管理模块:院校信息分析

信息模块包括三个信息实体&#xff1a;招生学校&#xff0c;专业&#xff0c;分数线。 学校实体中有一个叫院校代码的属性&#xff0c;专业实体中含有院校代码这个属性&#xff0c;属于外键&#xff0c;一个学校有多个专业&#xff0c;所以学校和专业属于一对多关系。 专业实…

【Python】使用PyTorch训练一个手写数字识别模型(MNIST)

文章目录 1. 准备工作2. 训练网络3. 测试网络4. 训练和测试循环5. 模型保存6. 最终完整代码7. 结果截图使用PyTorch训练一个手写数字识别模型(MNIST) 在这篇博客中,使用了PyTorch构建一个简单的神经网络来识别手写数字。将使用MNIST数据集,这是一个经典的机器学习基准数据集…

KBPC2510-ASEMI开关电源整流方桥KBPC2510

编辑&#xff1a;ll KBPC2510-ASEMI开关电源整流方桥KBPC2510 型号&#xff1a;GBU810 品牌&#xff1a;ASEMI 封装&#xff1a;KBPC-4 正向电流&#xff08;Id&#xff09;&#xff1a;25A 反向耐压&#xff08;VRRM&#xff09;&#xff1a;1000V 正向浪涌电流&#x…

阅读送书抽奖?玩转抽奖游戏,js-tool-big-box工具库新上抽奖功能

先讨论一个问题&#xff0c;你做软件工作是为了什么&#xff1f;从高中选专业&#xff0c;就喜欢上了软件开发&#xff1f;还是当初毕业不知道干啥&#xff0c;不喜欢自己的专业&#xff0c;投入软件开发的怀抱&#xff1f;还是干着干着别的&#xff0c;突然觉得互联网行业真不…

WordPress中插入视频的两种方法详解

最近我在建设WordPress网站的时候需要上传视频&#xff0c;我使用的是Hostease的主机安装的WordPress&#xff0c;随后在咨询了他们的技术支持后获得了一些解决方法。下面将介绍WordPress中插入视频的两种方法&#xff1a;本地上传和外部引用。 本地上传视频 使用WordPress的古…

阿里云短信提示被攻击怎么解决!!

你是否收到过这样的短信&#xff0c;【阿里云】尊敬的用户&#xff1a;您的IP: 实例名称&#xff1a; 受到攻击流量已超过云盾DDoS基础防护的带宽峰值&#xff0c;服务器的所有访问已被屏蔽&#xff0c;如果35分钟后攻击停止将自动解除否则会延期解除。详情请登录云盾控制台DDo…

对比state和props的区别

State和Props在React中都是用于组件间数据传递的重要概念&#xff0c;但它们之间存在一些显著的区别。 定义与用途&#xff1a; Props&#xff1a;Props是组件的输入属性&#xff0c;用于从父组件向子组件传递数据。它们是只读的&#xff0c;并且子组件不能修改传递给它的props…

华为ensp中路由器IPSec VPN原理及配置命令(超详解)

作者主页&#xff1a;点击&#xff01; ENSP专栏&#xff1a;点击&#xff01; 创作时间&#xff1a;2024年5月13日2点11分 虚拟专用网络&#xff08;VPN&#xff09;是一种通过公用网络建立安全连接的技术。它可以使您的设备看起来像是连接到另一个网络&#xff0c;例如公司…

618买什么划算?618买啥好?618数码好物推荐,必买清单大放送!

随着一年一度的618购物狂欢节的临近&#xff0c;作为数码领域的资深爱好者&#xff0c;我感到有责任为大家推荐精心挑选的数码精品。无论你是追逐科技尖端的探索者&#xff0c;还是希望通过智能装备提升生活品质的时尚人士&#xff0c;这里的每一款产品都能与你的心灵产生共鸣。…

如何3分钟快速训练一个属于自己的(暴躁老哥、猫娘)AI大模型?(弱智吧经典问题为例)

首先我们进入谷歌Gemini&#xff1a;Gemini - Google DeepMind 然后我们进入官网看见左边的几个选项 选择Create new prompt创建新的提示 选择结构化提示 点击action可以增加列&#xff0c;也就是设置更多回答或者选项 那么那个温度&#xff08;Temperature&#xff09;是什么…

笨方法学习python(七)-输入

输入 一般软件做的事情主要就是下面几条&#xff1a; 接受人的输入。改变输入。打印出改变了的输入。 前面几节都是print输出&#xff0c;这节了解一下输入input&#xff1b;在python2中使用的是raw_input&#xff0c;python3就只是input。 print ("How old are you?&…

【Python贪吃蛇】:编码技巧与游戏设计的完美结合

文章目录 &#x1f525;一、运行效果&#x1f4a5;二、游戏教程✈1. 导入模块❤️2. 初始化游戏元素☔3. 改变蛇移动的方向&#x1f44a;4. 绘制方块&#x1f680;5. 检查蛇头是否在游戏区域内&#x1f308;6. 定义蛇的移动函数&#x1f3ac;7. 绑定键盘事件 ⭐三、完整代码 &a…

数据库设计基础知识

数据库优化技术 集中式数据库优化技术 分布式数据库优化技术

B站视频怎么下载到手机本地

在这个数字化时代&#xff0c;B站已经成为了许多人追逐创意和乐趣的热门去处。面对网络环境的不稳定和数据流量的限制&#xff0c;有时想要在手机上随时随地观看喜爱的B站视频并不容易。今天&#xff0c;我将分享一些简单而又高效的方法&#xff0c;帮助你轻松地将B站视频下载到…

基于 LlaMA 3 + LangGraph 在windows本地部署大模型 (一)

基于LlaMA 3 LangGraph 在windows本地部署大模型 &#xff08;一&#xff09; RAG 是未来人工智能应用的基石。大家并不是在寻求仅仅产生无意义反应的人工智能。而目标是人工智能能够从特定文档集中检索答案&#xff0c;理解查询的上下文&#xff0c;指导自己搜索其嵌入内容或…

探索 SwiftUI:全屏覆盖的 DragGesture

使用 SwiftUI 时&#xff0c;您熟悉sheet(isPresented:onDismiss:content:)用于呈现视图的修饰符。这是一种以模态样式叠加显示内容的便捷方法&#xff0c;并且带有内置的滑动手势来关闭视图。 但是如果你想用 afullScreenCover(isPresented:onDismiss:content:)代替怎么办&am…

APScheduler定时器使用【重写SQLAlchemyJobStore版】:django中使用apscheduler,使用mysql做存储后端

一、环境配置 python3.8.10 包&#xff1a; APScheduler3.10.4 Django3.2.7 djangorestframework3.15.1 SQLAlchemy2.0.29 PyMySQL1.1.0 项目目录情况 gs_scheduler 应用 commands &#xff1a; 主要用来自定义命令&#xff0c;python manage.py crontab schedulers&#…

OpenHarmony开发案例【大合集】

OpenHarmony Codelabs 概要简介 为帮助开发者快速熟悉OpenHarmony的能力以及相关的应用开发流程&#xff0c;我们提供了一系列的基于趣味场景的应用示例&#xff0c;即Codelabs&#xff0c;开发者可以根据我们的文档一步步的学习和完成简单项目的开发。 目录 优秀案例 一次开…

小米/红米手机刷机错误:Missmatching image and device

报错&#xff1a; Missmatching image and device。 场景&#xff1a; 该解决方法只适用于手机是通过EMT解锁的。 解决方法&#xff1a; 打开刷机脚本&#xff0c;并注释检测脚本&#xff1a; 刷机脚本根据不同的刷机方式&#xff0c;选择编辑不同的脚本&#xff0c;例如&am…

nginx关于并发的总结

一、环境 1.nginx版本 [rootnode4 ~]# nginx -V nginx version: nginx/1.18.0 built by gcc 4.8.5 20150623 (Red Hat 4.8.5-44) (GCC) configure arguments: --prefix/usr/local/nginx2.操作系统 centos73.硬件配置 [rootnode2 ~]# cat /proc/cpuinfo |grep process proc…