TypeScript学习（四）声明文件和declare关键字
前言
当使用第三方库时，我们需要引用它的声明文件，才能获得对应的代码补全、接口提示等功能。这是因为前端第三方库大多都是非 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; }
参考
TypeScript 的声明文件（优先）
声明文件（可以关注里面的声明文件放在哪）
