TS:.d.ts 文件 和 declare 的作用

  • 1 declare 做外部声明
    • 1.1 声明外部类型
    • 1.2 声明外部模块
      • 1.2.1 解决引入资源模块报错
      • 1.2.2 跳过对第三方库的类型检查
    • 1.3 声明外部变量
    • 1.4 声明外部命名空间(作用域)
  • 2 .d.ts 文件做外部声明
  • 3 declare global {} 在模块中做外部声明

先说一下我对 .d.ts文件 和 declare 的理解,.d.ts文件 和 declare 都是用来做 外部声明 的,而 .d.ts 文件做外部声明是 declare 做外部声明的简化形式。

备注:
我理解 外部声明 就是 声明全局类型或者模块,可以直接引用而不用去 import 或者 import type 相应的变量或者类型。

1 declare 做外部声明

如果 types.ts 文件在 ts 编译范围内的情况下,在 types.ts 文件中,通过 declare 声明的变量、类型或者模块是全局性的,即,可以在不导入类型的情况下直接使用。

1. 何为 types.ts 文件在 ts 编译范围内的情况下?
在 TS 配置文件(tsconfig.js)中,通过 include 选项设置的编译范围内包含 types.ts 文件。
2. 用 declarre 声明的变量、类型或者模块不能全局使用的情况?
types.ts 文件不能是模块,即,文件内不用有导入/导出语句(import,import type,export,export type)。如果文件中包含导入导出语句,types.ts 文件中的声明将失去全局性,必须导出声明,并在使用时先导入,否则会报错。

1.1 声明外部类型

// ajax 请求方式
declare type AjaxType = 'GET' | 'POST' | 'DELETE' | 'PUT' | 'PATCH';

1.2 声明外部模块

1.2.1 解决引入资源模块报错

declare module '*.css';
declare module '*.scss';
declare module '*.png';

此例中,不对导入的资源模块进行类型检查。如果不进行以上声明,导入 css/less/png 等资源文件时会提示编译错误。

1.2.2 跳过对第三方库的类型检查

declare module 'jquery';

如果想要使用一些用js 编写的第三方库,可以通过声明外部模块,跳过对第三方库的类型检查
此例中,jquery模块中所有成员的类型都成了any类型,这等同于不对jQuery进行类型检查。

1.3 声明外部变量

declare var a: boolean;
declare let b: boolean;
declare const c: boolean;

如果外部变量声明中没有使用类型注解,那么变量的类型为 any类型

这个什么情况下会用到呢?假如我在项目中引入了一个sdk,这个sdk(我们以微信的sdk为例)里面有一些全局的对象(比如wx),但是如果不经过任何的声明,在ts文件里面直接用wx.config()的话,肯定会报错。

declare就是告诉 TS编译器 你担保这些变量和模块存在,并声明了相应类型,编译的时候按照声明的类型进行类型检查,如果没有声明类型,默认是 any 类型。

1.4 声明外部命名空间(作用域)

declare namespace API {var a: boolean;let b: boolean;const c: boolean;function foo(bar: string, baz: boolean): void;
}

外部命名空间的成员默认为导出成员,不需要使用export关键字来明确地导出它们,但使用了export关键字也没有错误。

声明完之后在其他 ts文件中,就可以直接 API.xxx 引用。

2 .d.ts 文件做外部声明

和 declare 做外部声明一样, .d.ts 文件(例如:types.d.ts)在 ts 编译范围内,且 .d.ts 文件不是模块的情况下,文件中声明的变量、类型或者模块都是外部声明。只不过在 .d.ts 文件中的声明可以省略 declare。

// types.d.ts文件中
type PlainObjectType<T = any> = { [propType: string]: T };
// declare type PlainObjectType<T = any> = { [propType: string]: T };

以上两种声明,都是外部声明,效果相同。

注意
1. .d.ts 文件提供的声明仅在编译阶段有效
.d.ts 文件中只提供类型声明,不提供任何值,如字符串和函数实现等,在编译TypeScript程序的过程中,.d.ts文件 不会生成对应的 .js文件
2. .d.ts 文件不能是模块
.d.ts 文件不能是模块,即,文件内不用有导入/导出语句(import,import type,export,export type)。如果文件中包含导入导出语句,.d.ts 文件中的声明将失去全局性,必须导出声明,并在使用时先导入,否则会报错。

3 declare global {} 在模块中做外部声明

使用 declare global {} 可以实现在模块中做外部声明。以下示例中:
MainMenuType 类型 就是外部接口类型,在其他模块中不用引入就可以直接使用。
UserType 类型 在其他模块中需要引入才能使用。

import { createSlice } from '@reduxjs/toolkit';
import type { PayloadAction } from '@reduxjs/toolkit';declare global {interface MainMenuType {eventCode: string,businessCode: string,menuOrder: number,icon: string,menuId: string,menuPid: string,isMultiple: boolean,menuName: string,menuType: string,menuGroup: string,menuAttestWay: string,children?: MainMenuType[]}
}export interface UserType {common: PlainObjectType,mainMenus: MainMenuType[],[key: string]: any
}

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

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

相关文章

计算机缺失msvcp140.dll的修复教程,教你快速解决dll问题

“针对计算机系统中出现的msvcp140.dll文件丢失问题&#xff0c;小编将详细阐述一系列有效的解决方法。首先&#xff0c;msvcp140.dll是Microsoft Visual C Redistributable Package中的一个关键动态链接库文件&#xff0c;对于许多应用程序的正常运行至关重要。当系统提示该文…

RS触发器

转自&#xff1a;【基础】RS触发器_两个或非门构成rs触发器-CSDN博客 RS触发器为什么能 “保持上一状态” 触发器就是在常规的门电路的基础上加入了反馈&#xff0c;这样触发器就实现了存储数据的功能。这也是上面章节 “RS触发器实验” 的 RS触发器特征表 中第3条 “保持上一…

线性分解模型(LDM)的扩展方法——分析稀疏数据里的微生物组存在或缺失关联

谷禾健康 生态学家在分析微生物组和感兴趣的协变量(如临床结果或环境因素)之间的关联时&#xff0c;经常以两种方式查看物种分类计数数据。 一种是将计数视为定量的(即作为相对丰度数据进行分析)&#xff1b;另一种是将计数数据离散化&#xff0c;只表明一个分类单元在样本中是…

终极Linux命令宝典:从入门到精通,一网打尽!

文章目录 Linux命令详解1、Linux初级命令1.1、ls&#xff08;List&#xff09;1.1.1、ls-常用参数&#xff1a; 1.2、pwd&#xff08;Print Working Directory&#xff09;1.3、touch&#xff08;change file timestamps&#xff09;1.3.1、touch-常用参数 1.4、cat&tac (C…

Java多线程:创建多线程的三种方式

在Java中&#xff0c;有三种方式创建多线程&#xff0c;继承类Thread&#xff0c;继承接口Runnable&#xff0c;继承接口Callable。其中Thread和Runnable需要重写方法run&#xff0c;方法run没有返回值&#xff1b;Callable需要重写方法call&#xff0c;方法call可以返回值。 …

SAP OData(三)Query Option

Query option是指客户端在获取EntitySet的URL中后缀的一些指令&#xff0c;在第一篇第四小节我们已经见识了一部分Query指令。在下面表中列出了最重要的QueryOption。注意指令在URL中必须小写。 Operation Query Option Filtering and projecting $filter and $select Sort…

thinkphp6实现简单定时任务

thinkphp6实现定时任务 创建定时任务文件定义指令编写Test.php代码运行测试 创建定时任务文件 Test类名根据自己的需要修改 php think make:command Test testcommand文件夹在app目录下没有需要自己创建 运行上面的命令后会在command下 多一个Test.php文件 定义指令 在conf…

【Elasticsearch】Elasticsearch集群搭建详细手册

一、集群搭建 1.1.资源准备 服务器 192.168.X.26192.168.X.25192.168.X.24 安装包 elasticsearch-6.8.10.tar.gz 防火墙 所有服务器均开通9200,9300端口 1.2.安装组件 第一步&#xff1a;创建es安装目录 #在opt目录下创建soft目录 cd /opt mkdir soft第二步&#xff1a;上…

Java内存模型之原子性

文章目录 1.什么是原子性2.Java中的原子操作有哪些3.long和double的原子性4.原子操作 原子操作 ! 原子操作 1.什么是原子性 一系列的操作&#xff0c;要么全部执行成功&#xff0c;要么全部不执行&#xff0c;不会出现执行一半的情况&#xff0c;是不可分割的。 注意&#x…

探索SQL性能优化之道:实用技巧与最佳实践

SQL性能优化可能是每个数据库管理员和开发者在日常工作中必不可少的一个环节。在大数据时代&#xff0c;为确保数据库系统的响应速度和稳定性&#xff0c;掌握一些实用的SQL优化技巧至关重要。 本文将带着开发人员走进SQL性能优化的世界&#xff0c;深入剖析实用技巧和最佳实践…

Vue3访问不到$refs?

我试过了,getCurrentInstance()的方法 我试过 // 伪代码 <tinymce :ref"tinymceDate" />setup(){ let tinymceDate ref(null) const publish () > {console.log("hfq",tinymceDate.value)} return{...} }都不行 后面我试着在setup中使用setup…

深度学习笔记(四)——TF2构建基础网络常用函数+简单ML分类网络实现

文中程序以Tensorflow-2.6.0为例 部分概念包含笔者个人理解&#xff0c;如有遗漏或错误&#xff0c;欢迎评论或私信指正。 截图和程序部分引用自北京大学机器学习公开课 TF2基础常用函数 1、张量处理类 强制数据类型转换&#xff1a; a1 tf.constant([1,2,3], dtypetf.floa…

装机必看:电脑Bios里的CSM兼容模块是啥?打开有啥用?

前言 最近朋友装了一台新的电脑&#xff0c;用的i5-13490f的CPU。但是由于预算有限&#xff0c;手边只有一块GTX650ti&#xff0c;没办法&#xff0c;只好先这么用着了。 谁知道出现了个大问题&#xff1a;电脑开机居然没办法显示。 由于电脑所有的配件基本上都是全新的&…

随身WiFi选购要点!从此不再踩坑!高性价比高口碑随身wifi推荐,随身WiFi哪个牌子最好用

一、买随身WiFi注意事项 1.随身WiFi常见的芯片高通、马维尔和中兴微&#xff0c;其中高通芯片大部分都是报废手机拆下来的二手芯片&#xff0c;价格相对来说比较低&#xff0c;那种一二十块的随身WiFi&#xff0c;常用这种&#xff0c;优点便宜&#xff0c;缺点设备发烫&#…

ORACLE报错:ORA-04091 表XXX发生了变化,触发器/函数不能读它

ORACLE报错:ORA-04091 表发XXX生了变化&#xff0c;触发器/函数不能读它 问题描述问题分析解决办法拓展&#xff1a;自治事务的特点 问题描述 在开发校验函数FUNCTION的时候&#xff0c;用数据跑批测试的时候报错。经排查这个校验函数FUNCTION的被一个存储过程中的update语句调…

统计项目5000+,出具报表5分钟......捷顺科技数据中台怎么做?

捷顺创立于1992年&#xff0c;以智慧车行、人行出入口软硬件产品为依托&#xff0c;致力于智慧停车生态建设和运营&#xff0c;是出入口智能管理和智慧生态环境建设的开创者和引领者。 历经近三十年的发展&#xff0c;已经成为国内智慧停车领域的领军企业。公司集研、产、销一…

视频转码:掌握mp4视频格式转FLV视频的技巧,视频批量剪辑方法

在多媒体时代&#xff0c;视频格式的转换成为一种常见的需求。把MP4格式转换为FLV格式&#xff0c;FLV格式的视频文件通常具有较小的文件大小&#xff0c;同时保持了较好的视频质量。批量剪辑视频的方法能大大提高工作效率。下面来看云炫AI智剪如何进行MP4到FLV的转码&#xff…

轻量化的yolov8部署到安卓Android手机端

一、pytorch环境配置和yolov8源码安装 首先在电脑上需要配置好pytorch环境&#xff0c;和yolov8源码的下载 然后针对yolov8做自己的轻量化改进 二、下载Android Studio和ncnn-android-yolov8 1. Android Studio官网链接&#xff1a; 下载 Android Studio 和应用工具 - And…

企业数据中台整体介绍及建设方案:文件全文51页,附下载

关键词&#xff1a;数据中台解决方案&#xff0c;数据治理&#xff0c;数据中台技术架构&#xff0c;数据中台建设内容&#xff0c;数据中台核心价值 一、什么是数据中台&#xff1f; 数据中台是指通过数据技术&#xff0c;对海量数据进行采集、计算、存储、加工&#xff0c;…

面试算法119:最长连续序列

题目 输入一个无序的整数数组&#xff0c;请计算最长的连续数值序列的长度。例如&#xff0c;输入数组[10&#xff0c;5&#xff0c;9&#xff0c;2&#xff0c;4&#xff0c;3]&#xff0c;则最长的连续数值序列是[2&#xff0c;3&#xff0c;4&#xff0c;5]&#xff0c;因此…