全部 / 前端 · 2024年5月17日 0

TypeScript – declare

1715961321

在TypeScript中,declare关键字主要用于声明类型、变量、函数、模块等的存在,但不提供其实现。这对于与JavaScript库或现有代码集成特别有用,因为你可以告诉TypeScript编译器这些实体已经存在,即使它们在你的TypeScript源代码中没有实际定义。这有助于TypeScript更好地理解和验证你的代码,同时避免类型检查错误。以下是declare的一些基本用法和案例。

基本语法

  1. 声明变量:

    declare var variableName: type;
    
  2. 声明函数:

    declare function functionName(param1: type1, param2: type2): returnType;
    
  3. 声明模块:

    declare module moduleName {
        export function funcName(param: type): returnType;
        export var varName: type;
        // ...其他声明
    }
    
  4. 声明类型别名:

    declare type typeName = type;
    
  5. 全局声明:

    declare global {
        interface Window {
            myCustomMethod: (arg: string) => void;
        }
    }
    

使用案例

1. 声明全局变量

假设你正在使用的某个JavaScript库在全局作用域中添加了一个名为myLib的对象,但这个对象在你的TypeScript代码中没有定义。你可以这样声明它:

declare var myLib: any;

或者,如果可能的话,提供更具体的类型信息:

declare var myLib: {
    doSomething: () => void;
    config: {
        option1: string;
    };
};

2. 声明外部模块

当你使用未包含类型定义的第三方库时,可以通过声明模块来描述其接口:

declare module 'myExternalLibrary' {
    export function initialize(config: { apiKey: string }): void;
    export class MyClass {
        constructor(name: string);
        someMethod(): number;
    }
}

然后你就可以像使用有类型定义的模块一样使用这个库了:

import { initialize, MyClass } from 'myExternalLibrary';

initialize({ apiKey: 'myKey' });
const instance = new MyClass('instanceName');

3. 扩展全局类型

如果你想往现有的全局对象(如Window)上添加自定义属性或方法,可以这样做:

declare global {
    interface Window {
        myCustomMethod: (message: string) => void;
    }
}

window.myCustomMethod = function(message) {
    alert(message);
};

// 现在可以在TypeScript中安全地使用这个方法
window.myCustomMethod('Hello, world!');

通过declare,TypeScript能够更好地与JavaScript生态系统中的各种代码和库协同工作,同时保持严格的类型检查和代码提示功能。