ts中的类型定义的详细使用教程

文章目录

  • 前言
  • 原始数据类型(Primitive data types)
  • 特殊数据类型
  • 断言
    • 尖括号断言(Angle Bracket Syntax)
    • as 语法断言
    • 类型断言函数
  • 泛型
    • 数据容器
    • 数据类型转换
    • 工具函数
    • 接口定义
  • & 和 | 的用法
    • &
    • |
  • 后言

前言

hello world欢迎来到前端的新世界


😜当前文章系列专栏:Typescript
🐱‍👓博主在前端领域还有很多知识和技术需要掌握,正在不断努力填补技术短板。(如果出现错误,感谢大家指出)🌹
💖感谢大家支持!您的观看就是作者创作的动力

原始数据类型(Primitive data types)

number: 表示数字,可以是整数或浮点数。

let zhuodou:number = 123

string: 表示字符串。

let zhuodou:string = "真帅"

boolean: 表示布尔值,即 true 或 false。

let zhuodou:boolean = false

null: 表示空值。在 TypeScript 中,null 是一个独立的类型,其它类型的子类型。

let zhuodou:null = null

undefined: 表示未定义的值。与 null 类似,undefined 也是一个独立的类型,其它类型的子类型。

let zhuodou:undefined = undefined 

symbol: 表示唯一标识符。

let zhuodou:symbol = undefined 

bigint: 表示任意精度的整数。

const num1: bigint = 123456789012345678901234567890n;
const num2: bigint = 987654321098765432109876543210n;const sum: bigint = num1 + num2;  // 可以进行数值运算,得到 1111111110111111111011111111100nconsole.log(sum.toString());  // 输出: "1111111110111111111011111111100"

特殊数据类型

unknown: 表示一种不确定的类型。它类似于 any 类型,但是更加安全,要求在使用之前进行类型检查或类型转换。

let userInput: unknown;
userInput = "Hello";
userInput = 10;if (typeof userInput === "string") {console.log(userInput.toUpperCase());
}

never: 表示永远不存在的值的类型。它通常用于表示总是会抛出异常或无法执行完整的函数,或是永远不会返回结果的函数。

function throwError(message: string): never {throw new Error(message);
}function infiniteLoop(): never {while (true) {}
}

void: 表示没有任何返回值的函数的类型。通常用于标记函数为无返回值。

typescript
function sayHello(name: string): void {console.log(`Hello, ${name}!`);
}

tuple: 表示一个固定长度的数组类型,其中每个位置的元素可能是不同的类型。例如:[string, number] 表示一个包含一个字符串和一个数字的数组。

typescript
let person: [string, number] = ["John", 25];
console.log(person[0]); // "John"
console.log(person[1]); // 25

enum: 表示一组具名的常数值。枚举类型常用于表示一组相关的常量,可以通过枚举的名字来引用其中的值。

enum Color {Red = "#FF0000",Green = "#00FF00",Blue = "#0000FF",
}let selectedColor: Color = Color.Red;
console.log(selectedColor); // #FF0000

never: 表示永远不存在的值的类型。它通常用于表示总是会抛出异常或无法执行完整的函数,或是永远不会返回结果的函数。

typescript
function throwError(message: string): never {throw new Error(message);
}function infiniteLoop(): never {while (true) {}
}

symbol: 表示唯一的、不可变的值。Symbol 类型可以用作对象属性的键或作为唯一标识符使用。

const key = Symbol("securityKey");let data = {[key]: "secure data",
};console.log(data[key]); // secure data

断言

尖括号断言(Angle Bracket Syntax)

let someValue: any = "hello";
let strLength: number = (<string>someValue).length;

as 语法断言

let someValue: any = "hello";
let strLength: number = (someValue as string).length;

类型断言函数

function assertString(value: any): asserts value is string {if (typeof value !== "string") {throw new Error("Value is not a string");}
}let someValue: unknown = "hello";
assertString(someValue);
let strLength: number = someValue.length; // 此处可以正常访问 length 属性

泛型

泛型(Generics)是 TypeScript 提供的一种特性,它能够让我们在定义函数、类、接口等数据类型时,定义一些可变的类型参数。这些类型参数可以用来表示不同类型之间的关联,增加代码的灵活性和复用性。

数据容器

在定义数组、链表、队列、堆栈等数据容器类型时,可以使用泛型来表示容器中元素的类型。

interface Container<T> {addItem(item: T): void;removeItem(item: T): void; 
}class Stack<T> implements Container<T> {private items: T[] = [];addItem(item: T) {this.items.push(item);}removeItem() {return this.items.pop();}
}const stack = new Stack<number>();
stack.addItem(1);
stack.addItem(2);
stack.removeItem(); // 2

数据类型转换

在进行数据类型转换时,可以使用泛型来表示源类型和目标类型。

function cast<T>(value: any): T {return value as T;
}const str = cast<string>(123); // "123"
const num = cast<number>("123"); // 123

工具函数

在编写工具函数时,可以使用泛型来处理具有不同类型的数据

function toArray<T>(value: T): T[] {return [value];
}const arr1 = toArray<number>(1); // [1]
const arr2 = toArray<string>("hello"); // ["hello"]

接口定义

在定义接口时,可以使用泛型来表示接口中的属性或方法的类型。

interface Response<T> {code: number;message: string;data: T;
}const res: Response<string> = {code: 200,message: "ok",data: "hello world"
}

& 和 | 的用法

&

它表示类型的交集。

type Person = {name: string;
}type Employee = {employeeId: number;
}type Manager = Person & Employee;const manager: Manager = {name: 'John Smith',employeeId: 1001,
};

|

它表示类型的并集。

type Status = 'active' | 'inactive' | 'pending';function setStatus(status: Status) {console.log('Status:', status);
}setStatus('active'); // 合法
setStatus('deleted'); // 非法,因为'deleted'不在Status类型的定义中

后言

创作不易,要是本文章对广大读者有那么一点点帮助 不妨三连支持一下,您的鼓励就是博主创作的动力

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

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

相关文章

Java之函数式接口

1、函数式接口概述 函数式接口: 有且仅有一个抽象方法的接口。Java中的函数式编程体现就是Lambda表达式。所以函数式接口即可以适用于Lambda使用的接口。如何检测一个接口是不是函数式接口? @FunctionalInterface放在接口定义的上方:如果接口是函数式接口,编译通过;如果不…

【SpringBoot篇】登录校验 — JWT令牌

文章目录 &#x1f339;简述JWT令牌⭐JWT特点 &#x1f33a;JWT使用流程&#x1f6f8;JWT令牌代码实现&#x1f354;JWT应用 &#x1f339;简述JWT令牌 JWT全称为JSON Web Token&#xff0c;是一种用于身份验证的开放标准。它是一个基于JSON格式的安全令牌&#xff0c;主要用于…

跨越威胁的传说:揭秘Web安全的七大恶魔

&#x1f90d; 前端开发工程师&#xff08;主业&#xff09;、技术博主&#xff08;副业&#xff09;、已过CET6 &#x1f368; 阿珊和她的猫_CSDN个人主页 &#x1f560; 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 &#x1f35a; 蓝桥云课签约作者、已在蓝桥云…

CVE-2022-4886 ingress命令注入复现与分析

安装 安装ingress-nginx wget https://raw.githubusercontent.com/kubernetes/ingress-nginx/controller-v1.8.4/deploy/static/provider/cloud/deploy.yamlk apply -f deploy.yaml 原理 nginx.ingress.kubernetes.io/rewrite-target标签会在nginx配置进行插入字符串&#…

Linux - 动静态库(下篇)

前言 在上篇博客当中&#xff0c;对静态库是什么&#xff0c;怎么使用&#xff0c;简单实现自己的静态库&#xff0c;这些做了描述&#xff0c;具体请看上篇博客&#xff1a; 本篇博客将会对 动态库是什么&#xff0c;怎么使用&#xff0c;简单实现自己的动态库&#xff0c…

ESP32-Web-Server 实战编程-使用文件系统建立强大的 web 系统

ESP32-Web-Server 实战编程-使用文件系统建立强大的 web 系统 概述 在前述章节我们讲述了在网页端控制多个 GPIO 的案例。当程序开始变得复杂&#xff0c;让一些功能“自动起来”是一个好的选择。 在前面的示例中&#xff0c;我们需要在后端为每个前端代码的 URL 指定一个对…

Android RecyclerView分析 第一篇【ChildHelper】

一、在RecyclerView中的位置与角色 在RecyclerView对象创建时&#xff0c;会创建一个 ChildHelper 对象。 在设置layoutManager时&#xff0c;将 RecyclerView中的成员变量 mChildHelper 传进 layoutManager中。 ChildHelper 封装了对 RecyclerView所有子View的所有操作。包括…

播放器开发(五):视频帧处理并用SDL渲染播放

目录 学习课题&#xff1a;逐步构建开发播放器【QT5 FFmpeg6 SDL2】 步骤 VideoOutPut模块 1、初始化【分配缓存、读取信息】 2、开始线程工作【从队列读帧->缩放->发送渲染信号到窗口】 VideoWidget自定义Widget类 1、定义内部变量 2、如果使用SDL&#xff0c;需要进…

Matplotlib直方图的创建_Python数据分析与可视化

Matplotlib直方图的创建 概念区分绘制直方图 概念区分 什么是直方图&#xff1f; 直方图&#xff08;Histogram&#xff09;又称质量分布图&#xff0c;是统计报告图的一种&#xff0c;由一系列高度不等的纵向条纹或线段表示数据分布的情况&#xff0c;一般用横轴表示数据所属…

探索性数据分析(EDA):从数据中发现洞察力

写在开头 在数据科学的世界中,探索性数据分析(Exploratory Data Analysis,EDA)是一项至关重要的任务,它能够帮助我们深入了解数据、发现潜在的模式,并为进一步的分析和建模提供基础。本篇博客将介绍探索性数据分析的基本技术和方法,通过具体的数字、场景和代码,帮助读…

解锁文件安全新境界!迅软DSE带您领略数据加密的魅力!

随着信息技术的不断发展&#xff0c;企业数据信息的安全与保护受到愈发广泛的关注。而文件加密软件得益于其强大的系统功能能够有效地保护企业重要数据的隐私和安全&#xff0c;成为越来越多企事业单位在进行内部数据安全防护工作时的优选。 一、文件加密软件的作用 文件加密软…

国产数据库

当今世界&#xff0c;数据已成为重要的生产要素&#xff0c;数据库管理系统更是广泛应用于信息化行业各领域&#xff0c;国内数据库产业能否健康可持续的发展&#xff0c;在很大程度上影响着国民经济发展和网络空间安全。 当前&#xff0c;国产数据库行业竞争非常激烈&#xf…

c++基础----new

c基础----new 在C中&#xff0c;new是一个运算符&#xff0c;用于动态分配内存并返回指向该内存的指针。它可以用于创建单个对象、数组以及动态分配的对象。 下面是new的几种常见用法&#xff1a; 动态分配单个对象&#xff1a; int* ptr new int; // 动态分配一个int类型…

Wi-Fi标准

Wi-Fi 标准 记录关于Wi-Fi 标准 Wi-Fi 6&#xff08;802.11ax&#xff09;&#xff1a; 这是目前最新的无线网络标准&#xff0c;提供了更高的速度、更好的性能和更高的容量。Wi-Fi 6支持更多的设备连接、更快的速度和更低的延迟&#xff0c;因此是为未来的高密度无线网络设…

HCIE 01:基于前缀列表的BGP ORF功能

当运行BGP协议的某台设备上&#xff0c;针对入方向配置了基于ip-prefix的路由过滤&#xff0c;过滤了邻居发送的路由&#xff1b; 目前想&#xff0c;通过在peer关系的两端设备上都配置ORF功能&#xff0c;实现路由发送端只能送路由接收端过滤后的路由&#xff1b; ORF功能的说…

总结vue3 的一些知识点:MySQL 排序

MySQL 排序 我们知道从 MySQL 表中使用 SQL SELECT 语句来读取数据。 如果我们需要对读取的数据进行排序&#xff0c;我们就可以使用 MySQL 的 ORDER BY 子句来设定你想按哪个字段哪种方式来进行排序&#xff0c;再返回搜索结果。 语法 以下是 SQL SELECT 语句使用 ORDER B…

Sedex 验厂有证书的吗

【Sedex 验厂有证书的吗】 SEDEX是一家总部设在英国伦敦的非赢利组织&#xff0c;世界上任何地点的公司都可以申请会员资格。SEDEX已获得了许多大型零售商和生产商的青睐&#xff0c;许多零售商、超市、品牌商、供应商和其它组织都要求与之合作的农场、工厂和制造商参加SEDEX成…

Leetcode—1670.设计前中后队列【中等】

2023每日刷题&#xff08;四十三&#xff09; Leetcode—1670.设计前中后队列 实现代码 erase(iterator position)在删除vector中的元素后&#xff0c;会将该元素的后面所有元素都往前挪一位。因此&#xff0c;原先的迭代器指向的元素就不是原来那个了&#xff0c;而是它的后…

2023年05月 Scratch图形化(四级)真题解析#中国电子学会#全国青少年软件编程等级考试

Scratch等级考试(1~4级)全部真题・点这里 一、单选题(共10题,每题3分,共30分) 第1题 下列积木运行后的结果是?( )(说明:逗号后面无空格) A:我 B:爱 C:中 D:国 答案:B 两个字符串连接后的第8个字符是“爱”。 第2题 接鸡蛋游戏中,天空掉下来有鸡蛋、石…

Flink Flink中的合流

一、Flink中的基本合流操作 在实际应用中&#xff0c;我们经常会遇到来源不同的多条流&#xff0c;需要将它们的数据进行联合处理。所以 Flink 中合流的操作会更加普遍&#xff0c;对应的 API 也更加丰富。 二、联合&#xff08;Union&#xff09; 最简单的合流操作&#xf…