关注公众号 前端界，回复“加群”
加入我们一起学习，天天进步
背景
declare关键字是为了服务TypeScript的。TypeScript是什么在这里就不多介绍了，但是我们要知道ts文件是需要TypeScript编译器转换为js文件才可以执行，并且在编译阶段就会进行类型检查。但是在TypeScript中并不支持js可识别的所有类型，例如我们使用第三方库JQuery，我们通过一下方法获取一个id为‘foo’的标签元素。
$('#foo');
// or
jQuery('#foo');
然而在ts文件中，使用语法，语法，语法，底下就会爆出一条红线提示到：Cannot find name '$'
![]()
因此，需要declare来声明，告诉TypeScript编译器该标识符已存在，通过编译时的检查并在开发时提供类型提示。
定义
在 TypeScript 中，declare关键字告诉编译器存在一个对象（并且可以在代码中引用）。它向 TypeScript 编译器声明该对象。简而言之，它允许开发人员使用在其他地方声明的对象。
注：编译器不会将declare语句编译为 JavaScript。对比下面两段代码：
// declare声明了一个名为 myGlobal 的全局变量，并指定其类型为 any。
// 该声明并不会生成真正的 JavaScript 代码，而只是告诉 TypeScript 编译器该变量存在。
declare var myGlobal: any;
// 给 myGlobal 赋值为 42。
myGlobal = 42;
console.log(myGlobal); // 42
// 直接声明了一个名为 myGlobal 的全局变量，并指定其类型为 any。这会生成真正的 JavaScript 代码。
var myGlobal: any;
// 给 myGlobal 赋值为 42。
myGlobal = 42;
console.log(myGlobal); // 42
使用
declare var 声明全局变量 declare function 声明全局方法 declare class 声明全局类 declare enum 声明全局枚举类型 declare namespace 声明（含有子属性的）全局对象 declare global 扩展全局变量 declare module 扩展模块
声明文件
通常，在使用第三方库或模块时，有两种方式引入声明文件：
全局声明：如果第三方库或模块是全局可访问的，你可以在整个项目的任何地方直接使用它们，而无需显式导入。此时，你只需要确保在 TypeScript 项目中正确引入了相应的声明文件。一般情况下，TypeScript 会自动查找并加载全局声明文件。如果没有自动加载，你可以使用 /// 的方式在具体的源文件中将声明文件引入。 模块导入：如果第三方库或模块是通过模块化方式提供的，你需要使用 import 语句将其导入到你的代码中，同时也需要确保相应的声明文件被正确引入。在这种情况下，你可以使用 import 或 require 来引入库，并且不需要显式地引入声明文件，因为 TypeScript 编译器会根据模块的导入语句自动查找和加载相应的声明文件。
有很多第三方库提供了声明文件，可以在packages.json文件中查看。types表示类型声明文件是哪一个。
![]()
image.png 可以使用 @types 统一管理第三方库的声明文件。@types 的使用方式很简单，直接用 npm 安装对应的声明模块即可，以 jQuery 举例：
npm install @types/jquery --save-dev
背景
declare关键字是为了服务TypeScript的。TypeScript是什么在这里就不多介绍了，但是我们要知道ts文件是需要TypeScript编译器转换为js文件才可以执行，并且在编译阶段就会进行类型检查。但是在TypeScript中并不支持js可识别的所有类型，例如我们使用第三方库JQuery，我们通过一下方法获取一个id为‘foo’的标签元素。
$('#foo');
// or
jQuery('#foo');
然而在ts文件中，使用语法，语法，语法，底下就会爆出一条红线提示到：Cannot find name '$'
因此，需要declare来声明，告诉TypeScript编译器该标识符已存在，通过编译时的检查并在开发时提供类型提示。
定义
在 TypeScript 中，declare关键字告诉编译器存在一个对象（并且可以在代码中引用）。它向 TypeScript 编译器声明该对象。简而言之，它允许开发人员使用在其他地方声明的对象。
注：编译器不会将declare语句编译为 JavaScript。对比下面两段代码：
// declare声明了一个名为 myGlobal 的全局变量，并指定其类型为 any。
// 该声明并不会生成真正的 JavaScript 代码，而只是告诉 TypeScript 编译器该变量存在。
declare var myGlobal: any;
// 给 myGlobal 赋值为 42。
myGlobal = 42;
console.log(myGlobal); // 42
// 直接声明了一个名为 myGlobal 的全局变量，并指定其类型为 any。这会生成真正的 JavaScript 代码。
var myGlobal: any;
// 给 myGlobal 赋值为 42。
myGlobal = 42;
console.log(myGlobal); // 42
使用
declare var 声明全局变量 declare function 声明全局方法 declare class 声明全局类 declare enum 声明全局枚举类型 declare namespace 声明（含有子属性的）全局对象 declare global 扩展全局变量 declare module 扩展模块
声明文件
通常，在使用第三方库或模块时，有两种方式引入声明文件：
全局声明：如果第三方库或模块是全局可访问的，你可以在整个项目的任何地方直接使用它们，而无需显式导入。此时，你只需要确保在 TypeScript 项目中正确引入了相应的声明文件。一般情况下，TypeScript 会自动查找并加载全局声明文件。如果没有自动加载，你可以使用 /// 的方式在具体的源文件中将声明文件引入。 模块导入：如果第三方库或模块是通过模块化方式提供的，你需要使用 import 语句将其导入到你的代码中，同时也需要确保相应的声明文件被正确引入。在这种情况下，你可以使用 import 或 require 来引入库，并且不需要显式地引入声明文件，因为 TypeScript 编译器会根据模块的导入语句自动查找和加载相应的声明文件。
有很多第三方库提供了声明文件，可以在packages.json文件中查看。types表示类型声明文件是哪一个。
可以使用 @types 统一管理第三方库的声明文件。@types 的使用方式很简单，直接用 npm 安装对应的声明模块即可，以 jQuery 举例：
npm install @types/jquery --save-dev本文作者：努力学习前端的呆瓜
原文链接：https://juejin.cn/post/7402811318816702515
最后
关注福利，关注公众号后，在首页：
回复「简历」获取精选的简历模板
回复「思维图」获取完整 JavaScript 相关思维图
回复「电子书」可下载我整理的大量前端资源，包含面试、Vue实战项目、CSS和JavaScript电子书等。
回复「Node」获取简历制作建议
最后不要忘了点个赞再走噢
