在TypeScript中如何在window上定义对象

2023-05-16

比如我们要在window上定义 Jim

最简单的方法就是将window强制类型转换成any,但是不推荐!


(window as any).Jim=233;  

推荐方法:

在项目中找到*.d.ts 文件 加上以下代码即可:


interface Window {
  Jim: any; //注意这里如果不写any那么用window.jim是可以的,但是用window.jim.hu 就会报错
}  

同样的比如用了JQuery的扩展方法:


$.fn.extend({
    cvOffSet() {
        // target in here should be js obj
        const _this: any = this;
        let top = 0;
        let left = 0;
        let target = _this[0];

        // when target is body it offsetParent will be null,so can match cvWindowTarget
        while (target.offsetParent) {
            top += target.offsetTop;
            left += target.offsetLeft;
            target = target.offsetParent;
        }

        return {
            top,
            left,
        };
    }
});  

那么在ts中使用:


$("#ele").cvOffSet().top  

同样要在项目中找到*.d.ts 文件 加上以下代码:


interface JQuery {
  cvOffSet(): any; //注意这样同样要用any,不然cvOffSet().top后的.top会报错
}  

 如果我们想定义一个有意义的接口,不想使用any,那么可以按如下定义:


interface JQuery {
  cvOffSet: () => IcvOffSet; //这里的cvOffSet是方法,所以要这样写 () => 
}

interface IcvOffSet {
  top: number,
  left: number
}  

注意:

在项目的 tslint.json 中有这样的规则 


"interface-name": [true, "always-prefix"]  
具体可见: https://palantir.github.io/tslint/rules/interface-name/

如react的typescript项目在*.tsx文件中定义 interface要义大写I开头(否则会抱错):


interface IAsyncState{ }  

但是在上面的 *.d.ts 文件中定义 interface Window, interface JQuery 却不能加I是因为typescript 和@types/jquery已经帮我们定义好了对应的默认接口。加了I反而匹配不上了!

而 interface IcvOffSet 却可以不用加I这是因为 tslint.json 中的验证不会包含 *.d.ts 文件,但是为了统一我们自己写的interface还是都以I开头吧。

 

转载于:https://www.cnblogs.com/jimaww/p/10563298.html

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在TypeScript中如何在window上定义对象 的相关文章

  • 装饰器中间件模式的 Typescript 类型

    我正在考虑节点中间件 在各种框架中 通常 中间件会向请求或响应对象添加一个属性 然后该属性可供在其之后注册的任何中间件使用 此模型的一个问题是您无法进行有效的打字 为了进行演示 这里有一个此类框架的高度简化的模型 在这种情况下 一切都是同步
  • 如何跨多个 React Redux 组件使用 requestAnimationFrame 实现游戏循环?

    努力思考最好的解决办法 我可以使用递归调用requestAnimationFrame有一个游戏循环 export interface Props name string points number onIncrement gt void o
  • 如何在 Angular 2 项目中使用 Bower 组件

    我是 Angular 2 的初学者 Angular 2 项目使用 npm 包 我们可以通过简单地导入来在 Angular 2 项目中使用它们 如下所示 import FormsModule from angular forms 另外 我们可
  • 使用带有十六进制字符串的 CryptoJS

    我想连接到蓝牙设备 仅通过十六进制字符串进行通信 我需要编码一个 16 字节值 因此我也期望一个 16 字节的值 在我的实现中 CryptoJS 总是返回更长的结果 根据文档 不需要 IV 所有 16 字节数据必须使用当前存储在设备中的客户
  • 在 Typescript 中导出函数的返回类型

    我有一个构建对象的函数 如下所示 function toast return a a b b 我可以将函数的类型定义为 type ToastFunctionType typeof toast 这种类型将是 gt a string b str
  • 如何识别当前打开的每个单独的浏览器窗口?

    如何使用 javascript 唯一地识别当前为所有主要浏览器打开的每个单独的浏览器窗口 让我解释一下我需要了解的内容 并考虑以下场景 我有 3 个当前打开的浏览器窗口 任何现代浏览器 即 Chrome Firefox 等 每个窗口都包含多
  • Typescript:如何在 Redux 中输入 Dispatch

    例如我想删除dispatch any here export const fetchAllAssets gt dispatch any gt dispatch actionGetAllAssets return fetchAll getPr
  • 使用 TypeScript API 查找 TypeReference 类型

    我试图找到一个类型 类 接口 类型别名 枚举 TypeReference 我有这个 const anode node as ts TypeReferenceNode const symbol this typechecker getSymb
  • 确定矩形在窗口内是否可见

    我想确定窗口内的矩形是否完全可见 我找到了 RectVisible 但该函数确定矩形的任何部分是否可见 我想知道整个矩形是否可见 有没有这方面的功能 首先通过使用将系统剪切区域 窗口的可见区域 变成一个区域GetRandomRgn http
  • 带有 angular-cli 的 SVG 图标系统

    我有一个 Angular2 项目 它是通过 Angular CLI 创建的 在 webpack 中 有一个加载器来加载 svg sprite 并从 svgs 列表生成该 sprite 但是 当 angular cli 不允许我更改 webp
  • Typescript + Jquery Ajax + 这个

    我正在将一些 javascript 代码移植到 typescript 中 但遇到了一个问题 我有一个 ajax 调用 它将一个对象作为上下文传递 该对象包含一些回调和一些其他信息 这些信息由成功或错误回调读出 指示成功调用应重定向到的位置
  • RouteComponentProps 与 useHistory

    使用React功能组件和Typescript 使用useHistory钩子与RouteComponentProps react router v5 1 之间有什么区别吗 使用 RouteComponentProps 的示例 import R
  • 如何获取相对于根目录的文件?

    与正常node您可以设置 JavaScriptNODE PATH并需要本地模块 例如给出 project node modules src library index js 您可以设置NODE PATH src and require li
  • 使用 karma-jasmine 和 istanbul 的 Typescript 代码覆盖率

    我正在尝试使用伊斯坦布尔在业力框架中获取我的打字稿代码的代码覆盖率 在 karma conf 中包含 typescript 文件 通过 karma typescript preprocessor 我们能够对 typescript 代码进行单
  • Typescript 数组文字语法的差异

    Typescript 允许使用以下任一语法定义数组 var myStrArry1 string or var myStrArry1 Array
  • ionic 2 google 图表未捕获类型错误:(void 0) 不是函数

    error 我想添加谷歌图表并按照这个https www npmjs com package angular2 google chart https www npmjs com package angular2 google chart 但
  • 修改对象实例的 TypeScript 类装饰器

    我正在为 Aurelia 制作一个插件 需要一个类装饰器 将属性添加到新对象实例 并且 使用新对象作为参数调用外部函数 我已经查看了示例 到目前为止我已经将它们放在一起 伪 代码 return function addAndCall tar
  • 使用 System.js 导入 Typescript 编译的模块时出错

    我最近正在学习使用 system js 导入由 Typescript 编译的模块 这些模块之前是为 require js 编译的 并且工作正常 但是合并到system js时 应用时无法导入模块系统生产 js 控制台说 Uncaught i
  • 为什么 TypeScript 在接口被重写时不发出警告

    interface ClockInterface setTime d Date class Clock implements ClockInterface I would expect this to raise a compile err
  • 角度分割列表

    我有一个看起来像这样的列表 A B C 是否有任何简单的方法 而无需创建一个函数 将其展平为一个看起来像这样的数组 A B C 我搜索了 SO 但没有找到任何带有打字稿方法的内容 Thanks 编辑 A B C 是相同类型 看来您正在寻找的

随机推荐

  • 基于深度学习的图像识别,实现APP自动打麻将

    互联网改变了我们的生活 xff0c 现在连打麻将都在网上打了 进几年发现身边的很多朋友都在网上玩一款四川麻将APP 平时没事的时候我也玩玩 xff0c 我是一个写了几年程序的码龙 xff0c 突然有一天我有个想法我能不能用我的专业来解放我的
  • PHP常用设计模式

    单例模式 单例模式顾名思义 xff0c 就是只有一个实例 作为对象的创建模式 xff0c 单例模式确保某一个类只有一个实例 xff0c 而且自行实例化并向整个系统提供这个实例 单例模式的特点 xff1a 三私一共 xff1a 1 私有的静态
  • 飞行控制器固件项目-对比介绍(Ardupilot、PX4、LibrePilot、OpenPilot)

    ArduPilot与Pixhawk什么关系 https zhuanlan zhihu com p 109639638 无人机开源项目 8个开源无人机项目 https blog csdn net cuml0912 article detail
  • 各种控制方法在抗干扰方面的区别

    一 由来 自适应控制 AdaptiveControl AC xff1a AC旨在处理由结构参数扰动引起的不良影响 AC的思想是首先在线识别受控系统的模型参数 xff0c 然后根据识别的模型参数调整控制参数以获得良好的性能 AC在处理模型参数
  • 【深入理解】export和module.export的区别

    内部原理 exports 61 module exports 61 exports 是module exports的引用 xff0c 怎么理解这句话呢 xff1f 大概就是 var a 61 var b 61 a a 和 b 之间的区别吧
  • 如何保证Service在后台不被杀死?

    一 前期基础知识储备 xff08 1 xff09 为什么要保证后台Service不被杀死 xff1f 提高应用存在感 对于大厂的应用来说 xff0c 其程序 活着 不是问题 xff0c 但是为了带来更好的用户体验 xff0c 提高用户粘性
  • mybatis generator时碰到的错误及解决办法

    这篇博客简单记录下自己使用mybatis generator时碰到的错误及解决办法 本人是在macOS下进行的下列操作 问题1 mybatis generator Cannot connect to database 解决办法 xff1a
  • C# 编写 WinForm 窗体应用程序(第一期)

    C 编写 WinForm 窗体应用程序 第一期 文章目录 C 编写 WinForm 窗体应用程序 第一期 WinForm窗体应用程序简述C 创建WinForm窗体应用程序C 窗体属性 1 创建一个名为 TestForm 的窗体 2 设置 T
  • npm删除项目所有依赖和清缓存

    清缓存的办法 xff0c 一个是 npm cache verify 还有一个方法npm cache clean force 删除项目所有依赖 npm uninstall 转载于 https www cnblogs com jimaww p
  • 【我的前端】CSS在Windows下实现Mac浏览器滚动条

    Windows实现Mac浏览器滚动条 文章目录 Windows实现Mac浏览器滚动条一 自定义滚动条外观二 滑块与滚动容器之间的间距三 将滚动条悬浮在内容之上四 滚动时才出现五 完整代码六 总结说明 x1f496 x1f496 x1f496
  • python经典案例:抓交通肇事者

    抓交通肇事者 x1f496 x1f496 x1f496 x1f495 x1f495 x1f495 欢迎来到本博客 x1f495 x1f495 x1f495 x1f496 x1f496 x1f496 x1f381 支持 xff1a 如果觉得博
  • 【Python初级人工智能精讲】用Paddlehub给一段没有标点符号的文字加上合适的标点符号

    Python初级人工智能精讲 文章目录 Python初级人工智能精讲一 写在前面二 七步精讲三 模型介绍四 进入实战1 源代码2 运行效果 1 cmd方面 2 txt文件运行前后对比 五 休吃霸王餐六 每日一句 一 写在前面 今天给分享的程
  • 深度解读互联网新时代:Web3.0

    文章目录 深度解读互联网新时代 Web3 0一 Web3 中心化网络的新兴名词二 Web3 全家福 三 Web3 是互联网的货币层四 Web3 是互联网的身份层五 Web3 通过售卖数据来牟利的反击六 Web3 还拥有平台本身的一种方式七
  • 《疫情下的编程岁月》第二章:选择学习语言

    文章目录 第二章 选择学习语言 2 1 常见的编程语言介绍 C语言 C Java Python JavaScript 2 2 选择适合自己的语言 考虑自己的兴趣和目标 了解各种语言的特点 尝试不同的语言 2 3 学习路线的规划 找到适合自己
  • 每日一练c++题目日刊 | 第十期

    文章目录 第一题 xff1a 二维矩阵中的最短路径题目描述输入格式输出格式数据范围输入样例输出样例解题思路 amp C 43 43 题解算法状态转移方程 第二题 xff1a 01 串的满足条件的个数题目描述输入格式输出格式数据范围输入样例输
  • 每日一练c++题目日刊 | 第八期

    文章目录 第一题 xff1a 夏洛克侦案题目描述输入格式输出格式输入样例输出样例解题思路 amp C 43 43 题解 第一题 xff1a 夏洛克侦案 题目描述 福尔摩斯接到了一个任务 xff0c 需要帮助一位富有的英国贵族解决一件谋杀案
  • 00后少年的心力之作(已开源) | heartt(心力算法)

    00后少年的心力之作 已开源 综合性极强的文本摘要算法 heartt 大家好 xff0c 我是 heartt 算法的作者 xff0c 一名热爱编程的学习者 今天 xff0c 我要向大家介绍我的新算法 xff1a heartt 文章目录 一
  • 初读《编程之美》就想秀一下,结果还翻车了

    文章目录 一 前言 二 我的思路 三 Code 四 翻车现场 五 后续问题 一 前言 如何写一个短小的程序 xff0c 让 Windows 的任务管理器显示CPU的占用率为50 这道有趣的面试题我是这两天从 编程之美 电子版中看到的 xff
  • 每日一练c++题目日刊 | 第十二期

    文章目录 第一题题目背景故事题目描述输入描述输出描述输入样例输出样例解题思路C 43 43 参考程序 第二题题目背景故事题目描述输入描述输出描述输入样例输出样例解题思路C 43 43 参考程序 第三题题目背景故事输入描述输出描述输入样例输出
  • 在TypeScript中如何在window上定义对象

    比如我们要在window上定义 Jim 最简单的方法就是将window强制类型转换成any xff0c 但是不推荐 xff01 window as any Jim 61 233 推荐方法 xff1a 在项目中找到 d ts 文件 加上以下代