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

比如我们要在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开头吧。

 

posted @ 2019-03-20 10:28  jim520  阅读(6796)  评论(0编辑  收藏  举报