在 JavaScript 中，使用 declare 关键字声明变量和函数可以有效地避免全局变量污染和函数重载，还能够提高代码的可读性和可维护性。本文从以下几个方面阐述使用 declare 声明变量和函数的正确姿势。

一、declare 的基本语法

    
    // 声明变量
    declare var variableName: any;
    // 声明函数
    declare function functionName(parameters): returnType;
    

其中 variableName 表示需要声明的变量名，any 表示变量的类型为任意类型。functionName 表示需要声明的函数名，parameters 表示函数的参数，returnType 表示函数的返回类型。

在使用 declare 声明时，变量和函数的实现是在声明文件（类型描述文件）中实现的，而不是在当前文件中实现。声明文件通常是以 .d.ts 为后缀的文件，用来描述第三方库或自己编写的模块，以供其他 TypeScript 项目使用。

二、声明全局变量

在 JavaScript 中，全局变量很容易被误用或者覆盖，导致代码运行出现意想不到的错误。在 TypeScript 中使用 declare 可以有效地避免全局变量的影响。

1、单个变量声明

    
    declare var variableName: any;
    

例如，要在 TypeScript 中使用 jQuery，可以创建一个 jQuery.d.ts 文件，通过 declare var $: any; 声明全局变量 $，则可以在 TypeScript 项目中直接使用 $。

2、多个变量声明

    
    declare var variableName1: any;
    declare var variableName2: any;
    declare var variableName3: any;
    

如果需要声明多个全局变量，可以通过多个 declare var 语句实现。

3、对象属性声明

    
    declare namespace objName {
        var propertyName:any;
    }
    

如果需要声明一个对象，并且声明该对象的属性，则可以使用 namespace。

    
    declare namespace MyLib {
        var foo: any;
        function bar(): void;
    }
    

上面代码声明了一个名为 MyLib 的对象，该对象具有一个 foo 属性和一个 bar() 方法。

三、声明函数

使用 declare 声明函数，可以避免出现函数重载和全局命名空间污染的问题，同时也可以在声明文件中定义参数、返回值的类型，提高代码的可读性和可维护性。

1、函数声明

  
  declare function functionName(parameters): returnType;
  

例如，要在 TypeScript 中使用 jQuery 的 click() 方法，可以声明如下：

    
    declare function $(selector: string): any;
    declare function click(callback: any): any;
    

2、函数重载声明

  
  declare function functionName(parameters): returnType;
  declare function functionName(parameters): returnType;
  

函数重载是指在 TypeScript 中允许函数有多个定义，而不会出现冲突，这些定义需要通过 declare 来声明。

  
  declare function add(x:number, y:number): number;
  declare function add(x:string, y:string): string;
  

上面代码中，我们声明了一个名为 add 的函数，它有两个定义，一个是处理两个数字相加并返回数字，另一个是处理两个字符串连接并返回字符串。

四、总结

使用 declare 声明 JavaScript 变量和函数是提高代码可读性、可维护性的一种方法，特别是在 TypeScript 和 JavaScript 结合的项目中，declare 可以帮助我们更好地维护代码。希望本文的介绍能够帮助大家在开发过程中用好 declare 关键字。