TypeScript学习（四）声明文件和declare关键字

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› TypeScript›TypeScript教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

前言

当使用第三方库时，我们需要引用它的声明文件，才能获得对应的代码补全、接口提示等功能。这是因为前端第三方库大多都是非 TypeScript 库，基本上都是使用 JS 编写的，在 TS 中使用非 TS 编写的第三方库，需要有个 xx.d.ts 声明文件。

【TypeScript 作为 JavaScript 的超集，在开发过程中不可避免要引用其他第三方的 JavaScript 的库。虽然通过直接引用可以调用库的类和方法，但是却无法使用TypeScript 诸如类型检查等特性功能。为了解决这个问题，需要将这些库里的函数和方法体去掉后只保留导出类型声明，而产生了一个描述 JavaScript 库和模块信息的声明文件。通过引用这个声明文件，就可以借用 TypeScript 的各种特性来使用库文件了。】

自己定义声明文件

当我们使用的第三方npm包没有声明文件时需要自己写，方式如下：

// 例1 verify.d.ts
declare module "@ks/mina-verify-page" {
    import minaVerify from "@ks/mina-verify-page";
    export default minaVerify;
}

// 例2 yoda.d.ts
declare module "@ks/yoda-kuaishou-plugin" {
    import YodaKuaishouPlugin from "@ks/yoda-kuaishou-plugin";
    export default YodaKuaishouPlugin;
}

// 例3 vue.d.ts
declare module "*.vue" {
    import Vue from 'vue'
    export default Vue
}

// 例4 ks_ksbridge.d.ts
declare module '@ks/ks-bridge' {
    export interface PostVideoParams {
        tag?: string;
        topic?: string;
        magicFaceId?: string;
        magicName?: string;
        musicId?: string,
        musicType?: Number,
        name?: string;
        id?: string;
        imageUrl?: string;
        resourceUrl?: string;
        version?: string;
        showNativeTagPage?: boolean;
        activity?: string;
    }

    export interface CommonShareParam {
        platform?: ('timeline' | 'weixin' | 'qq' | 'weibo' | 'qz' | 'copylink' | 'imfriend' | 'imfriend_list')[];
        imgUrl?: string;
        caption?: string;
        desc?: string;
        siteName?: string;
        siteUrl?: string;
    }

    export interface ShareParam {
        // 必选，分享对应的业务
        subBiz: string;
        // 必选，分享业务对象的唯一标识，举例：userId，photoId等
        shareObjectId: string;
        // 可选，分享业务对象的类型（可以用来区分场景）
        shareResourceType?: string;
        shareContent?: string;
        // 可选，若为false，则不展示面板直接发起分享，否则展示面板
        showSharePanel?: boolean;
        // 直接发起分享的必要参数
        shareDirectActionUrl?: string;
        logParams?: string;
        // 可选，定制化回流的文案，图片等，具体会在中台的show/any接口生效。
        tokenStoreParams?: object;
        commonConfigs?: object;
        forceCommonConfigs?: object;
        extraChannelOptions?: Array;

    }
    export interface Sf2020ShareParam {
        subBiz: string;
        kwaiTokenTargetUrl?: string;
        coverUrls?: Array;
        shareUrl?: string;
        extTransientParams?: {
            shareMessage?: string
        }
        enableShareToIM?: boolean
    }
    export interface OpenLiveProfileCardParmes {
        targetUserId: string | number;
        isDimEnabled?: boolean;
        extraInfo?: {
            profileOriginSource?: number;     // 埋点上报用
            followSource?: number;           // 埋点上报用
        }
    }

    interface KsBridge {
        sendGiftToGuest: any;
        exitWebView();
        isSupportAsync(arg0: { api: string; complete: (res: any)=> void; });
        getLiveRoomInfo(arg0: { success: (result: any)=> void; fail: (err: any)=> void; });
        showConfirmDialog(arg0: {
            content: string;
            title?: string;
            onConfirm: ()=> void;
            onCancel: ()=> void;
            confirmBtnText?: string;
            cancelBtnText?: string;
        });
        showAlertDialog(arg0: {
            content: string;
            title?: string;
            onConfirm: ()=> void;
            confirmBtnText?: string;
        });
        sniff: {
            browserDesc: string; // 浏览器类型，例如 "uc"
            deviceHeightAndWidth: any; // 例如 { dph: 1334, dpw: 750 }
            iOSVersion: number; // iOS 系统版本，例如 11
            isAndroid: boolean;
            isIOS: boolean;
            isInApp: boolean; // 快手主 APP，概念版，极速版，直播伴侣等
            isInKwai: boolean; // 快手，现不推荐使用，后续该字段将被废弃，请改使用 isInApp
            isInBaidu: boolean; // 百度手机客户端
            isInWeChat: boolean; // 微信
            isInEnterpr: boolean; // 企业微信
            isInQQ: boolean; // QQ
            isInQQWebBrowser: boolean; // QQ浏览器
            isInQzone: boolean; // QQ空间
            isInTBS: boolean; // 腾讯浏览服务(Tencent Browser Service) 简称TBS
            isInUC: boolean; // UC浏览器
            isInWeibo: boolean; // 微博
            isInXiaomi: boolean; // 小米
            isInKakaoTalk: boolean; // KaKaoTalk
            isInPinterest: boolean; // Pinterest
            isInZalo: boolean; // Zalo
            isInAcFun: boolean; // A站
            supportUniversalLink: boolean;
        };

        on(options: {
            type: string; // 客户端事件类型
            handler(ret: any): any; // 事件触发的回调
            success?(ret: any): any; // on回调成功的回调
            fail?(err: any): any; // on回调失败的回调
            complete?(ret: any): any;
        }): any;

        startGatewayWithdraw(options?: {
            url: string
        }): any;

        config(options?: {
            debug?: boolean; // 默认false
            name?: string; // 客户端在 window 上挂载的变量名，如果是其他客户端，例如直播伴侣，可以指定 'livemate'
        }): any;

        commonShare(options: {
            param: CommonShareParam;
            success?(ret: any): any;
            fail?(err: any): any;
        }): any;

        launchApp(options: {
            identifier: string;
            success?(ret: any): any;
            fail?(err: any): any;
        }): any;


        startHalfScreenRecharge(options: {
            source: string;
        }): any

        resister(name: string, bridgeName: string, nameSpace: string, option: object): any;

        download(options: {
            action: string;
            url: string;
            success?(ret: any): any;
            fail?(err: any): any;
            complete?(ret: any): any;
        }): any;

        gameDownload(options: {
            action: string;
            url: string;
            success?(ret: any): any;
            fail?(err: any): any;
            complete?(ret: any): any;
        }): any;

        installApk(options: {
            action: string;
            url: string;
            downloadId: string;
            downloadName: string;
            success?(ret: any): any;
            fail?(err: any): any;
            complete?(ret: any): any;
        }): any;

        hasInstalledApp(options: {
            identifier: string;
            success?(ret: any): any;
            fail?(err: any): any;
            complete?(ret: any): any;
        }): any;

        downloadProgress(options: {
            action: string;
            url: string;
            downloadId: string;
            success?(ret: any): any;
            fail?(err: any): any;
            complete?(ret: any): any;
        }): any;

        gameDownloadProgress(options: {
            action: string;
            url: string;
            downloadId: string;
            success?(ret: any): any;
            fail?(err: any): any;
            complete?(ret: any): any;
        }): any;

        // 视频拍摄和发布
        postVideo(options: {
            param: PostVideoParams;
            tag?: string;
            topic?: string;
            magicFaceId?: string;
            magicName?: string;
            name?: string;
            id?: string;
            activity?: string;
            success?(ret: any): any;
            fail?(err: any): any;
            complete?(ret: any): any;
        }): any;

        // UI
        // 设置顶部右侧按钮
        setTopRightBtn(options: {
            show: boolean;
            icon?: 'camera' | 'share' | 'custom';
            text?: string;
            textColor?: string;
            iconUrl?: {
                normal: string;
                pressed: string;
            };
            onClick?(event: any): any;
        }): any;

        // 设置顶部右侧按钮
        setTopRightSecondBtn(options: {
            show: boolean;
            icon?: 'camera' | 'share' | 'custom';
            text?: string;
            textColor?: string;
            iconUrl?: {
                normal: string;
                pressed: string;
            };
            onClick?(event: any): any;
        }): any;

        // WebView
        // 打开新的webview
        loadUrlOnNewPage(options: {
            url: string;
            type: 'back' | 'close'
        }): any;

        showToast(options: {
            type: 'normal' | 'success' | 'error',
            text: string
        }): void;

        gameTaskSelectImage(options: {
            gameId: string,
            text: string,
            source: string,
            requestParam: string,
            callback?(ret: any): any
        }): void;

        setSlideBack(options: {
            enabled: boolean;
        }): void;

        register(name: string, bridgeName: string, nameSpace?: string, option?: object): any;

        isSupport(api: String, namespace?: String): boolean;

        share(options: {
            param: ShareParam,
            success?(ret: any): any;
            fail?(err: any): any;
            complete?(ret: any): any;
        })
        sf2020Share(options: {
            param: Sf2020ShareParam,
            success?(ret: any): any;
            fail?(err: any): any;
            complete?(ret: any): any;
        })
        // openLiveProfileCard(options: openLiveProfileCardParmes)
        openLiveProfileCard(options: { param: OpenLiveProfileCardParmes, complete?(ret: any): any })
        setTopLeftBtn(options: {
            show: boolean;
            icon: string;
            iconUrl?: any
            onClick?(ret: any): any;
        }): any
        setPageTitle(options: {
            title?: string;
            titleTextColor?: string;
            titleBackgroundColor?: string;
        }): any
        isSupportAsync(options: {
            api?: string;
            namespace?: string;
            complete?(ret: any): any,
        }): any
        component: any
        getLiveRoomInfo(options: {
            success?(ret: any): any
        })
        exitWebView(): any
        exitCurrentWebview(): any
        openWechatMiniProgram(options: {
            originalID: string,
            path: string,
            success?(ret: any): any;
            fail?(err: any): any;
            complete?(ret: any): any;
        }): any

        hideNavigationBar(options?: {
            success?(ret: any): any;
            fail?(err: any): any;
            complete?(ret: any): any;
        })
        getLiveRoomInfo(options: {
            success?(ret: any): any;
            fail?(err: any): any;
            complete?(ret: any): any;
        })
        popBack()
        login(options?: {
            checkFromServer?: boolean
            success?(ret: any): any;
            fail?(err: any): any;
            complete?(ret: any): any;
        })
        setStatusBarStyle(options: { style: 0 | 1 })
        exitAll()
        openWechatMiniProgram(options: {
            originalID: string
            path: string
            success?(ret: any): any
            fail?(err: any): any;
            complete?(ret: any): any;
        })
        requestFollowUserV2(options: {
            userId: string
            following: boolean
            activityId: string,
            success?(ret: any): any
            fail?(err: any): any;
            complete?(ret: any): any;
        })
        setPhysicalBackButton(options: {
            onClick?(ret: any): any;
        })
        selectImage(options: {
            count?: number
            sourceType?: string[]
            maxFileSize?: number
            maxWidth?: number
            maxHeight?: number
            success?(ret: any): any
            fail?(err: any): any
        })
        getDeviceInfo(options: {
            success?(ret: any): any
            fail?(err: any): any
        })
        collapseKeyboard()

        setBounceStyle(options: {
            enable: boolean
        })

        openBrowser(options: {
            url: string
            success?(ret: any): any
            fail?(err: any): any
        })
        submitData(options: {
            type: string;
            data: any;
        })
        selectAndUploadMedia(options: {
            sourceType?: string | string[],
            uploadToken?: string,
            mediaType: string,
            fileType: string,
            maxFileSize: number,
            success?(ret: any): any,
            fail?(err: any): any
        })
        startKspayOrderPrepay(options: {
            merchantId: string,
            outOrderNo: string,
            extra?: string,
            complete(res: any): any
        })
        getDarkMode(options: {
            success?(ret: any): any,
            fail?(err: any): any
        })
    }

    const ksBridge: KsBridge;
    export default ksBridge;
}