在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"]

具体可见： 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