TS中扩展window对象

TS中扩展window对象

ts中扩展widows对象,方法四种:

  1. 使用windows的地方,利用断言将window变为any;
  2. 使用windows地方,利用接口继承扩展Window接口;
  3. 利用@ts-ignore命令
  4. 利用声明合并,扩展全局声明;
  5. 利用声明合并,定义全局接口;

示例函数:

// 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中原同名接口,进行合并;

注意这里是定义全局接口,所以不能有任何导入和导出;

posted @   CD、小月  阅读(1441)  评论(0编辑  收藏  举报
(评论功能已被禁用)
相关博文:
阅读排行:
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· 上周热点回顾(2.24-3.2)
点击右上角即可分享
微信分享提示