TS中扩展window对象
TS中扩展window对象
ts中扩展widows对象,方法四种:
- 使用windows的地方,利用断言将window变为any;
- 使用windows地方,利用接口继承扩展Window接口;
- 利用@ts-ignore命令
- 利用声明合并,扩展全局声明;
- 利用声明合并,定义全局接口;
示例函数:
// widow对象动态添加globalConfig对象
function getLocalApiUrl(url: any) {
let baseUrl = window?.globalConfig?.api || ''
return `${baseUrl}${url}`
}
利用断言将window变为any
function getLocalApiUrl(url: any) {
// 利用断言:as断言或者<T>断言
// <T>类型断言
const extendWindow = <any>window
// as类型断言
// const extendWindow = window as any
let baseUrl = extendWindow?.globalConfig?.api || ''
return `${baseUrl}${url}`
}
接口继承扩展Window接口
function getLocalApiUrl(url: any) {
interface extendsWindow extends Window{
globalConfig?:any
}
let _window :extendsWindow= window
let baseUrl = _window?.globalConfig?.api || ''
// let baseUrl = window?.globalConfig?.api || ''
return `${baseUrl}${url}`
}
注意
window对象的类型为
Window
而不是window
,注意区分大小写;globalConfig因为是动态,非必有,必须添加"?";不然编译报错;
@ts-ignore命令
export function getLocalApiUrl(url: any) {
// 忽略该行类型检查
//@ts-ignore
let baseUrl = window?.globalConfig?.api || ''
return `${baseUrl}${url}`
}
注意
也可以使用
// @ts-nocheck
;但是该指令:用于当前文档,忽略所有类型检查
扩展全局声明
示例函数不变;新建一个声明文件:
// 新建声明文件,如index.d.ts
// 内容如下:
declare global{
interface Window{
globalConfig:any
}
}
export {};
注意
export {}
,必须有导出语句;这是因为全局对象扩充语句必须在模块或外部模块声明中使用,当添加了空导出语句后,该文件就成了一个模块。
定义全局接口
示例函数不变;新建一个声明文件:
// 新建声明文件,如index.d.ts
// 内容如下:
interface Window{
globalConfig:any
}
注意
这里新定义
Window
接口;和TS中原同名接口,进行合并;注意这里是定义全局接口,所以不能有任何导入和导出;
分类:
TypeScript
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· 上周热点回顾(2.24-3.2)