当前位置: 首页 > news >正文

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.lryc.cn/news/280062.html

相关文章:

  • JavaScript-jQuery2-笔记
  • 设计模式之多线程版本的if------Balking模式
  • mybatis核心配置文件介绍
  • Linux完全卸载Anaconda3和MiniConda3
  • Apache Answer,最好的开源问答系统
  • 【C】内存分配
  • MySQL 从零开始:03 基本入门语句
  • 井盖异动传感器,守护脚下安全
  • 复合机器人作为一种新型的智能制造装备高效、精准和灵活的生产方式
  • 重置 Docker 中 Gitlab 的账号密码
  • 任务类型划分
  • docker搭建部署mysql并挂载指定目录
  • 即将推出的 OpenWrt One/AP-24.XY:OpenWrt 和 Banana Pi 合作路由器板
  • 【uniapp-小程序-分享图5/4】
  • 【响应式编程】前置知识和相关技术的总结
  • K8S--安装MySQL8(单机)
  • CMake+QT+大漠插件的桌面应用开发
  • OpenCV-24双边滤波
  • AI智能分析网关V4:太阳能+4G智慧水库远程可视化智能监管方案
  • 第8章-第8节-Java中的文件类File的简单介绍
  • CTF-PWN-沙箱逃脱-【seccomp和prtcl-2】
  • 【Docker篇】使用Docker操作镜像
  • css宽度适应内容
  • 粒子物理和原子核物理的理论在模拟和分析电路中的粒子束和辐射效应中的应用
  • Opentsdb官方优化文档 - 翻译
  • JavaScript深拷贝与浅拷贝的全面解析
  • ESU毅速丨制造企业需不需要建设增材制造中心?
  • Linux shell编程学习笔记39:df命令
  • 简单高效 LaTeX 科学排版 第004集 命令与环境
  • 初识XSS漏洞