TypeScript中declare关键词作用小结

在 TypeScript 中，declare 是一个非常重要的关键字，主要用于声明变量、函数、类、模块或命名空间的类型，而不进行实际的实现。它通常用于告诉 TypeScript 编译器某个标识符已经在其他地方（比如 JavaScript 文件、全局作用域、第三方库）被定义了，从而避免类型检查报错。

一、为什么需要declare？

TypeScript 是一种静态类型语言，需要在编译时知道所有标识符的类型信息。如果你使用了一个在 JavaScript 中定义、但 TypeScript 无法推断其类型的变量或函数，编译器就会报错。此时可以使用 declare 来显式地告诉编译器这个标识符已经存在于运行时环境中。

举个例子，如果你在使用一个浏览器全局变量 window.myPlugin，TypeScript 默认是不知道这个变量的：

console.log(window.myPlugin); // 报错：Property 'myPlugin' does not exist on type 'Window & typeof globalThis'.

你可以用 declare 来声明它：

declare global {
  interface Window {
    myPlugin: any;
  }
}

或者：

declare const myPlugin: any;

这样编译器就不会报错了。

二、declare的使用场景

1. 声明全局变量

declare const VERSION: string;
console.log(VERSION);

这告诉 TypeScript：VERSION 是在其他地方定义的（比如通过 <script> 标签引入的脚本），类型是 string。

2. 声明函数

declare function greet(name: string): void;

表示 greet 是一个已经存在的函数，不需要在当前文件中实现它。

3. 声明类

declare class Animal {
  name: string;
  constructor(name: string);
  speak(): void;
}

这个类可能是在其他 JavaScript 文件或第三方库中定义的。

4. 声明模块

declare module 'my-library' {
  export function doSomething(): void;
}

适用于没有类型声明文件（.d.ts）的第三方库。

5. 声明命名空间

declare namespace MyLib {
  function func(): void;
}

适用于一些老的、通过全局对象暴露 API 的库。

三、.d.ts文件中的declare

在 TypeScript 的类型声明文件（通常以 .d.ts 结尾）中，declare 是主角。所有的声明都不会编译成 JavaScript，而是仅用于类型检查和代码提示。

比如：

// my-types.d.ts
declare const myGlobal: number;
declare function myFunc(): void;
declare module 'some-lib' {
  export function hello(): string;
}

当你安装一个第三方 JavaScript 库时，如果没有内置类型定义，可以手动编写 .d.ts 文件进行补充。

四、不使用declare会怎样？

如果你在没有类型声明的情况下使用未定义的标识符，TypeScript 会报错。例如：

console.log(EXTERNAL_VAR); // 错误：Cannot find name 'EXTERNAL_VAR'

使用 declare 后：

declare const EXTERNAL_VAR: string;
console.log(EXTERNAL_VAR); // 正确

五、总结

declare 是 TypeScript 与 JavaScript 和第三方库互操作的桥梁。合理使用它，能让你的代码既保持类型安全，又能自由调用外部资源。

到此这篇关于TypeScript中declare关键词作用小结的文章就介绍到这了,更多相关TypeScript declare关键词内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论