文档章节

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

o
 osc_fmg49rzg
发布于 2019/03/20 10:28
字数 419
阅读 14
收藏 0

精选30+云产品,助力企业轻松上云!>>>

比如我们要在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"]

如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开头吧。

 

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

SnailSVN Pro for mac(SVN客户端) v1.9.9

macw为您带来SnailSVN Pro for mac ,SnailSVN Mac版是一款类似于 TortoiseSVN 的 Apache Subversion(SVN)客户端,与 Finder 紧密集成。SnailSVN Mac版允许你从 Finder 的上下文菜单中快速...

单手绕月
35分钟前
13
0
python网络编程(进程与多线程)

multiprocessing模块   由于GIL的存在,python中的多线程其实并不是真正的多线程,如果想要充分地使用多核CPU的资源,在python中大部分情况需要使用多进程。   multiprocessing包是Pytho...

osc_ky74f26k
36分钟前
5
0
CentOS7 redis5.0高可用部署

概述 Redis Sentinel为Redis提供高可用性。Redis Sentinel是一个分布式系统,Sentinel本身设计为在有多个Sentinel进程协同合作的配置中运行。具有多个Sentinel进程进行协作的优点如下: 1、当...

紅顏為君笑
36分钟前
12
0
Ocelot简易教程(四)之请求聚合以及服务发现

上篇文章给大家讲解了Ocelot的一些特性并对路由进行了详细的介绍,今天呢就大家一起来学习下Ocelot的请求聚合以及服务发现功能。希望能对大家有所帮助。 作者:依乐祝 原文地址:https://www...

osc_zo0djpuu
37分钟前
14
0
leetcode63(不同路径 II)--Java语言实现

求: 一个机器人位于一个 m x n 网格的左上角 (起始点在下图中标记为“Start” )。 机器人每次只能向下或者向右移动一步。机器人试图达到网格的右下角(在下图中标记为“Finish”)。 现在...

拓拔北海
37分钟前
15
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部