TypeScript 扩展

扩展

?:可选参数

可选链事实上并不是TypeScript独有的特性,它是ES11(ES2020)中增加的特性

  • 可选链使用可选链操作符 ?
  • 作用是当对象的属性不存在时,会短路,直接返回undefined,如果存在,那么才会继续执行
  • 虽然可选链操作是ECMAScript提出的特性,但是和TypeScript一起使用更版本

type Person = {name: string,friend?: {name: string,age?: number}
}const info: Person = {name: 'zs'
}console.log(info.friend?.name);

??类似于||

??类似于||,都是或者的意思,但是??前面如果是undefined或是null才会运行后面的代码

console.log(null || 5); // 5
console.log(null ?? 5); // 5console.log(undefined || 5); // 5
console.log(undefined ?? 5); // 5console.log(0 || 5); // 5
console.log(0 ?? 5); // 0

在赋值时,可能会做判断没有值则赋值其他值,可以考虑使用??或者使用||

let b = 0;let a = b ?? 5;console.log('a', a);

?.

当你访问对象里面的属性时,这个属性可能不存在,那么你访问时可能报语法错误。

?.指当前面的值存在就访问后面的,如果不存在则返回undefined。

interface User {name?: string;age?: number;getName?(): string;user?: User
}let obj: User = {name: 'zs',age: 20,getName() {return ''},user: {name: '李四',age: 30,getName() {return ''},}
}let name = obj.user?.name;obj.user?.getName?.();

非空断言(!.)

代表一定有值,意思是断言,告诉ts这个对象中一定有这个值。

interface User {name?: string;age?: number;getName?(): string;user?: User
}let obj: User = {name: 'zs',age: 20,getName() {return ''},user: {name: '李四',age: 30,getName() {return ''},}
}let name2: string = obj.user!.name!;

type

类型别名,顾名思义,给类型取一个别名

type Str = string;let str: Str = '12';type User = {name?: string;age?: number;getName?(): string;user?: User
}
let obj: User = {name: 'zs',age: 20,getName() {return ''},user: {name: '李四',age: 30,getName() {return ''},}
}

type和interface区别?

  • interface可以被类实现,type只是类型别名,不能被类实现。
  • 写法不一样,type使用=写类型。

?? 和 !!

有时候我们还会看到 !! 和 ?? 操作符,这些都是做什么的呢?

!!操作符:

  • 将一个其他类型转换成boolean类型
  • 类似于Boolean(变量)的方式

??操作符:

  • 是ES11增加的新特性
  • 空值合并操作符(??)是一个逻辑操作符,当操作符的左侧是 null 或者 undefined 时,返回其右侧操作数,否则返回左侧操作数

 

模块化

TypeScript支持两种方式来控制我们的作用域:

  • 模块化:每个文件可以是一个独立的模块,支持ES Module,也支持CommonJS
  • 命名空间:通过namespace来声明一个命名空间

模块化:

 

命名空间:

命名空间在TypeScript早期时,称之为内部模块,主要目的是将一个模块内部再进行作用域的划分,防止一些命名冲突的问题

 

类型查找

 

内置类型声明:

内置类型声明是typescript自带的、帮助我们内置了JavaScript运行时的一些标准化API的声明文件

  • 包括比如Math、Date等内置类型,也包括DOM API,比如Window、Document等

内置类型声明通常在我们安装typescript的环境中会带有的

  • https://github.com/microsoft/TypeScript/tree/main/lib

外部定义类型声明和自定义声明:

外部类型声明通常是我们使用一些库(比如第三方库)时,需要的一些类型声明

这些库通常有两种类型声明方式:

方式一:在自己库中进行类型声明(编写.d.ts文件),比如axios

方式二:通过社区的一个公有库DefinitelyTyped存放类型声明文件

该库的GitHub地址:https://github.com/DefinitelyTyped/DefinitelyTyped/

该库查找声明安装方式的地址:TypeScript: Search for typed packages

比如我们安装react的类型声明: npm i @types/react --save-dev

什么情况下需要自己来定义声明文件呢?

情况一:我们使用的第三方库是一个纯的JavaScript库,没有对应的声明文件;比如lodash

npm i lodash

src/types/lwj.d.ts

declare module "lodash" {export function join(...args: any[]):any
}

xxx.ts

import _ from 'lodash'_.join(['abc', 'cba'])

情况二:我们给自己的代码中声明一些类型,方便在其他地方直接进行使用;

type IDType = number | string
let id: IDType = 5

声明变量-函数-类

 

声明模块

我们也可以声明模块,比如lodash模块默认不能使用的情况,可以自己来声明这个模块:

声明模块的语法: declare module '模块名' {}。

  • 在声明模块的内部,我们可以通过 export 导出对应库的类、函数等

declare文件

在某些情况下,我们也可以声明文件:

  • 比如在开发vue的过程中,默认是不识别我们的.vue文件的,那么我们就需要对其进行文件的声明
  • 比如在开发中我们使用了 jpg 这类图片文件,默认typescript也是不支持的,也需要对其进行声明

 

declare命名空间

比如我们在index.html中直接引入了jQuery:

 

tsconfig.json文件

tsconfig.json是用于配置TypeScript编译时的配置选项:

TypeScript: TSConfig Reference - Docs on every TSConfig option

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

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

相关文章

【机器学习】从零开始理解深度学习——揭开神经网络的神秘面纱

1. 引言 随着技术的飞速发展,人工智能(AI)已从学术研究的实验室走向现实应用的舞台,成为推动现代社会变革的核心动力之一。而在这一进程中,深度学习(Deep Learning)因其在大规模数据处理和复杂问题求解中的卓越表现,迅速崛起为人工智能的最前沿技术。深度学习的核心是…

安卓玩机工具-----ADB方式的刷机玩机工具“秋之盒”’ 测试各项功能预览

秋之盒 安卓玩机工具-秋之盒是一款ADB刷机工具箱,基于谷歌ADB的一款绿色安装,具备了海量扩展模块,支持ADB刷机救砖、一键激活黑域、adb指令修复等功能,是一款开源、免费、易用的手机刷机工具! 并且是一款开源、免费、易用的图形化…

细致刨析JDBC ① 基础篇

目录 一、JDBC概述 1.JDBC的概念 ​编辑2.JDBC的核心组成 ① 接口规范: ② 实现规范: 二、JDBC快速入门 1.JDBC搭建步骤 三、核心API理解 1.注册驱动 2.Connection 3.Statement 4.PreparedStatement 5.ResultSet 四、基于Preparedment实现CRUD 1.查询单行单列 2.查询单行…

P3565 [POI2014] HOT-Hotels

~~~~~ P3565 [POI2014] HOT-Hotels ~~~~~ 总题单链接 ~~~~~ 2024.9.10:DP方程有问题,已修改,同时更新了长链剖分优化版本。 思路 ~~~~~ 设 g [ u ] [ i ] g[u][i] g[u][i] 表示在 u u u 的子树内,距离 u u u 为 i i i 的点的…

管家婆云辉煌手机端怎么连接蓝牙打印机?

管家婆云辉煌手机端可以连接蓝牙打印机,这样手机可以发送打印任务到蓝牙打印机,完成打印任务。具体的设置步骤如下: 一、首先完成手机和蓝牙打印机配对,打开蓝牙打印机后。手机开启蓝牙和定位服务 点击手机设置,进入手…

jmeter压力测试,通过LLM利用RAG实现知识库问答,NEO4J部署,GraphRAG以知识图谱在查询时增强提示实现更准确的知识库问答(9/7)

前言 这周也是杂七杂八的一天(高情商:我是一块砖,哪里需要往哪里搬),首先是接触了jemter这个压力测试工具,然后帮公司的AIGC项目编写使用手册和问答手册的第一版,并通过这个平台的智能体实现知识…

【数据结构】排序算法系列——希尔排序(附源码+图解)

希尔排序 算法思想 希尔排序(Shell Sort)是一种改进的插入排序算法,希尔排序的创造者Donald Shell想出了这个极具创造力的改进。其时间复杂度取决于步长序列(gap)的选择。我们在插入排序中,会发现是对整体…

探索数据可视化的奥秘:Seaborn库的魔力

文章目录 探索数据可视化的奥秘:Seaborn库的魔力背景:为何选择Seaborn?Seaborn是什么?如何安装Seaborn?简单函数介绍与示例场景应用示例常见问题与解决方案总结 探索数据可视化的奥秘:Seaborn库的魔力 背景…

xLSTM模型学习笔记

笔记来源:bilibili LSTM 回顾 原始的 LSTM 是为了解决 RNN 时序反向传播中梯度消失和爆炸问题而提出的。 其所谓的门控机制,其实就是一种时序上的注意力机制,相当于把不同时间进行"掺和",是对时序信息的一种选择性控制…

【ARM compiler】生成ELF文件中包含了那些内容

【更多软件使用问题请点击亿道电子官方网站】 文档目标:用于了解ARM compiler生成的ELF文件中存储的内容进行了解 问题场景:ELF文件主要用于通过调试软件对于代码的运行顺序和数据链接等内容进行分析。了解一下ARM compiler生成ELF文件包含那些内容。 软…

Linux find案例

目录 1. 只查找当前目录,不查找子目录中的指定文件2. 查找到的文件批量复制到指定文件夹中3. 查找到的文件批量修改所属用户和组4. 查找到的文件批量添加执行权限5. 查找到的文件内容全部导入指定文件6. 查找指定目录下指定用户所属的文件7. 获取当前目录下&#xf…

[Redis] Redis中的String类型

🌸个人主页:https://blog.csdn.net/2301_80050796?spm1000.2115.3001.5343 🏵️热门专栏: 🧊 Java基本语法(97平均质量分)https://blog.csdn.net/2301_80050796/category_12615970.html?spm1001.2014.3001.5482 🍕 Collection与…

电脑开机速度慢怎么解决?

电脑开机速度慢怎么解决?电脑开机速度慢的原因可以是多方面的,以下是一些常见的原因: 启动项过多: 许多软件在系统启动时会自动启动,导致启动项过多,从而延长了开机时间。过时的驱动程序: 设备…

《基于深度半监督学习的目标检测综述》泛读

基于深度半监督学习的目标检测方法分为 1、生成式方法 2、一致性正则化方法 3、基于图的方法 4、伪标记方法和混合方法 然后基于常用数据集 对典型方法进行了性能对比,最后分析了其挑战和发展趋势,旨在为相关研究提供参考 收获就是: 1…

网络学习-eNSP配置NAT

NAT实现内网和外网互通 #给路由器接口设置IP地址模拟实验环境 <Huawei>system-view Enter system view, return user view with CtrlZ. [Huawei]undo info-center enable Info: Information center is disabled. [Huawei]interface gigabitethernet 0/0/0 [Huawei-Gigabi…

计算机网络八股总结

这里写目录标题 网络模型划分&#xff08;五层和七层&#xff09;及每一层的功能五层网络模型七层网络模型&#xff08;OSI模型&#xff09; 三次握手和四次挥手具体过程及原因三次握手四次挥手 TCP/IP协议组成UDP协议与TCP/IP协议的区别Http协议相关知识网络地址&#xff0c;子…

Qt Model/View概述

概述 Qt包含了一组item view类&#xff0c;它们使用模型/视图架构来管理数据之间的关系以及呈现给用户的方式。该体系结构引入的功能分离为开发人员提供了更大的灵活性来定制项目的表示&#xff0c;并提供了一个标准的模型接口&#xff0c;以允许广泛的数据源与现有项目视图一…

独立站新纪元:破局而出,共绘可持续发展蓝图

随着全球电商市场的日益繁荣与平台竞争的加剧,独立站作为商家自主掌控品牌与市场的桥头堡,正面临着前所未有的挑战与机遇。在这个瞬息万变的时代,如何在平台垄断的阴影下突围而出,实现可持续增长,成为了每一位独立站商家亟需解答的课题。为此,店匠科技( Shoplazza ) 将于 9月 2…

【MySQL】查询表中重复数据、模糊查询列信息、快速copy表数据(1)

一、SQL查询重复的数据&#xff1a; 1、SQL格式&#xff1a; Select * From 数据表 Where 重复记录字段 in ( select 重复记录字段 From 数据表 Group By 重复记录字段 Having Count(重复记录字段)>1) 2、举例&#xff1a; 在这个patient_member_info表中&#xff0c;我们…

【Hot100】LeetCode—62. 不同路径

目录 1- 思路题目识别动规五部曲 2- 实现⭐62. 不同路径——题解思路 3- ACM 实现 原题链接&#xff1a;62. 不同路径 1- 思路 题目识别 识别1 &#xff1a;给一个二维矩阵&#xff0c;每次只能向下或者向右移动一步识别2&#xff1a;求解到达最右下角的路径数。 动规五部曲…