如何在Typescript中将浏览器窗口属性表示为特定类型

在我的Angular应用程序的索引中。html中,有一个脚本标记,其中包含一个JavaScript文件,该文件带有第三方代码,当页面加载时,该代码将向窗口对象附加一个全局属性。

我想在Angular服务中将此属性作为强类型模块引用。

我可以像这样进入这处房产。

const foo: any = (window as any).foo;

然而,变量的类型是“any”,我想将其表示为一个特定的类型“foo”。

我有一个“foo”打字文件,我把它放在Angular项目的下面路径中。

src/@types/foo/index.d.ts

我修改了tsconfig。json包含@types位置。

  "typeRoots": [
    "node_modules/@types",
    "src/@types"
  ],

打字文件导出一个 foo 像这样的模块:

declare module 'foo' { /* etc. */ }

正是在这一点上,我被困住了。我一定是想错了,因为我找不到这种情况的任何例子。

我试着用 /// <reference path="../../@types/foo/index.d.ts" /> 将类型定义引入服务,但我不确定这能给我带来什么。

我尝试创建一个单独的模块,像这样导出foo模块 export const foo = (window as any).foo; ,但Typescript没有检测到它与打字文件之间的连接。

我尝试重新命名变量,使其看起来像这样 const baz: foo = (window as any).foo; ,但它不起作用。

编辑:2019-12-05 以下是我最终在我的角度服务中所做的。

import * as foons from 'foo'; //foo namespace
type WindowWithFoo = Window & { foo: typeof foons};
const foo = (window as any as WindowWithFoo).foo;