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.mzph.cn/web/52684.shtml

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

相关文章

SpringCloud集成ELK

1、添加依赖 <dependency><groupId>net.logstash.logback</groupId><artifactId>logstash-logback-encoder</artifactId><version>6.1</version> </dependency>2、在logback-spring.xml中添加配置信息&#xff08;logback-sp…

Android SystemUI组件(06)导航栏创建分析虚拟按键

该系列文章总纲链接&#xff1a;专题分纲目录 Android SystemUI组件 本章关键点总结 & 说明&#xff1a; 说明&#xff1a;本章节持续迭代之前章节的思维导图&#xff0c;主要关注左侧SystemBars分析中导航栏部分即可。 1 导航栏创建之makeStatusBarView 通过上一篇文章的…

前端 + 接口请求实现 vue 动态路由

前端 接口请求实现 vue 动态路由 在 Vue 应用中&#xff0c;通过前端结合后端接口请求来实现动态路由是一种常见且有效的权限控制方案。这种方法允许前端根据用户的角色和权限&#xff0c;动态生成和加载路由&#xff0c;而不是在应用启动时就固定所有的路由配置。 实现原理…

el-tree父子不互相关联时,手动实现全选、反选、子级全选、清空功能

el-tree父子不互相关联时&#xff0c;手动实现全选、反选、子级全选、清空功能 1、功能实现图示 2、实现思路 当属性check-strictly为true时&#xff0c;父子节点不互相关联&#xff0c;如果需要全部选中或选择某一节点下的全部节点就必须手动选择每个节点&#xff0c;十分麻…

【mysql】逻辑运算符

逻辑运算符 逻辑运算符主要是为了判断表达式的真假,返回结果也是1,0,null OR 这里面或就是两个条件或的关系,比如我要department_id等于10和等于20的情况就可以使用或. SELECT last_name,salary,department_id FROM employees WHERE department_id10 OR department_id20 …

CTF——简单的《WEB》

文章目录 一、WEB1、easysql2、baby_web3、baby_sql4、upload_easy5、easygame拓展1.1拓展1.2 6、ht_ssti7、包容乃大 一、WEB 1、easysql 题目描述&#xff1a; sql注入漏洞 1.常用的sql注入测试语句 2.sql注入bypass 解题思路 这边提示基本给的也很完整的&#xff0c;不…

C++开发基础之理解 CUDA 编译配置:`compute_XX` 和 `sm_XX` 的作用

前言 在 CUDA 编程中&#xff0c;确保代码能够在不同的 NVIDIA GPU 上高效运行是非常重要的。为了实现这一点&#xff0c;CUDA 编译器 (nvcc) 提供了多种配置选项&#xff0c;其中 compute_XX 和 sm_XX 是两个关键的编译选项。本文将深入探讨这两个选项的作用及其配置顺序&…

大一新生以此篇开启你的算法之路

各位大一计算机萌新们&#xff0c;你们好&#xff0c;本篇博客会带领大家进行算法入门&#xff0c;给各位大一萌新答疑解惑。博客文章略长&#xff0c;可根据自己的需要观看&#xff0c;在博客中会有给大一萌新问题的解答&#xff0c;请不要错过。 入门简介&#xff1a; 算法…

可信的人类与人工智能协作:基于人类反馈和物理知识的安全自主驾驶强化学习

可信的人类与人工智能协作&#xff1a;基于人类反馈和物理知识的安全自主驾驶强化学习 Abstract 在自动驾驶领域&#xff0c;开发安全且可信赖的自动驾驶策略仍然是一项重大挑战。近年来&#xff0c;结合人类反馈的强化学习&#xff08;RLHF&#xff09;因其提升训练安全性和…

中国银河资产笔试25届考什么?如何通过考试|附真题库面试攻略

嘿&#xff0c;各位小伙伴们&#xff01;我是职小豚&#xff0c;今天就带大家一起探秘中国银河资产 25 届秋招&#xff0c;为大家揭开这场金融之旅的神秘面纱。 一、中国银河资产介绍 中国银河资产&#xff0c;那可是金融领域的璀璨巨星&#xff01;它就像一座闪耀着智慧光芒…

unity安装配置和vs2022联动教程

目录 1.选择vs2022配置 2.安装unity 2.1安装unity hub 2.2注册个人账号 2.3安装编辑器 2.4修改为简体中文 2.5添加许可证 2.6安装位置修改 3.项目的创建 3.1如何创建 3.2如何选择 3.3配置语言 3.4去哪里找语言包 4.unity编辑器窗口的介绍 4.1游戏的运行和停止 4…

11、Hive+Spark数仓环境准备

1、 Hive安装部署 1&#xff09;把hive-3.1.3.tar.gz上传到linux的/opt/software目录下 2&#xff09;解压hive-3.1.3.tar.gz到/opt/module/目录下面 [shuidihadoop102 module]$ tar -zxvf /opt/software/hive-3.1.3.tar.gz -C /opt/module/ 3&#xff09;修改hive-3.1.3-b…

《深度学习》深度学习 框架、流程解析、动态展示及推导

目录 一、深度学习 1、什么是深度学习 2、特点 3、神经网络构造 1&#xff09;单层神经元 • 推导 • 示例 2&#xff09;多层神经网络 3&#xff09;小结 4、感知器 神经网络的本质 5、多层感知器 6、动态图像示例 1&#xff09;一个神经元 相当于下列状态&…

安卓开发板_联发科MTK开发评估套件串口调试

串口调试 如果正在进行lk(little kernel ) 或内核开发&#xff0c;USB 串口适配器&#xff08; USB 转串口 TTL 适配器的简称&#xff09;对于检查系统启动日志非常有用&#xff0c;特别是在没有图形桌面显示的情况下。 1.选购适配器 常用的许多 USB 转串口的适配器&#xf…

通过nginx代理转发实现共用80和443端口

目录 项目场景&#xff1a; 问题&#xff1a;怎么实现端口共用&#xff1f; 一、域名解析到nginx服务器 二、创建vhost解析到实际的服务器 三、防火墙的配置 项目场景&#xff1a; 公司自建服务器&#xff0c;有一条专线带有公网IP&#xff0c;如何满足不同的域名解析共用…

go-map系统学习

map底层结构 Goland的map的底层结构使用hash实现&#xff0c;一个hash表里有多个hash表节点&#xff0c;即bucket&#xff0c;每个bucket保存了map中的一个或者一组键值对。 map结构定义&#xff1a; runtime/map.go:hmap type hmap struct {// Note: the format of the hma…

win10 安装多个版本的python

1&#xff0c;安装python3.9 和python3.10 2, 安装完之后分别打开两个版本的Python的安装目录&#xff08;第一层目录&#xff09;&#xff0c;把pythonw.exe分别重命名为pythonw_39.exe和pythonw_310.exe&#xff0c;把python.exe复制一份&#xff0c;并分别重命名为python_…

【C++】_stack和_queue容器适配器、_deque

当别人都在关注你飞的有多高的时候&#xff0c;只有父母在关心你飞的累不累。&#x1f493;&#x1f493;&#x1f493; 目录 ✨说在前面 &#x1f34b;知识点一&#xff1a;stack •&#x1f330;1.stack介绍 •&#x1f330;2.stack的基本操作 &#x1f34b;知识点二&…

怎么利用XML发送物流快递通知短信

现如今短信平台越来越普遍了&#xff0c;而短信通知也分很多种&#xff0c;例如服务通知、订单通知、交易短信通知、会议通知等。而短信平台在物流行业通知这一块作用也很大。在家时:我们平时快递到了&#xff0c;如果电话联系不到本人&#xff0c;就会放到代收点&#xff0c;然…

力扣之1777.每家商店的产品价格

文章目录 1. 1777.每家商店的产品价格1.1 题干1.2 建表1.3 题解1.4 结果截图 1. 1777.每家商店的产品价格 1.1 题干 表&#xff1a;Products -------------------- | Column Name | Type | -------------------- | product_id | int | | store | enum | | price | int | ---…