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中原同名接口，进行合并；

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