Javascript 如何使用d.ts文件&x27；如果库'；s的实施未与TS项目整合？

DefinitelyTyped对许多库都有类型定义，但当Javascript实现与Typescript分离时（比如库通过

<script src="https://example.com/library.js">

在JS中，我可以通过调用

window.myLib.doThing1（）

和

window.myLib.doThing2（）

来使用myLib。如何导入整个

window.myLib

对象的形状，以便将其声明为

window

的属性？我可以看到我可以导入导出的接口，例如：

这是可行的，但我希望访问实际库对象的形状及其属性值（函数和字符串等），而不仅仅是接口。如果我这样做

import * as myLib from './my-lib';

然后

myLib

标识符变成了一个名称空间，我可以从中引用导出的接口，但就像上面一样，我仍然无法从

my lib.d.ts

访问

export const

和

export function

形状。（当然，尝试使用导入的命名空间来声明库对象是行不通的：

不能使用命名空间“myLib”作为类型。

即使我可以这样做，也不一定是安全的，因为为浏览器打包的库的结构可能与库的节点导出对象略有不同）

如果我手动将

d.ts

的一部分复制并粘贴到我自己的脚本中，我可以将一些有用的东西拼凑起来：

// index.ts
declare global {
  interface Window {
    myLib: {
      doThing1: () => number;
      doThing2: () => string;
      version: string;
    };
  }
}

但这样做既麻烦又耗时，而且肯定不是正确的方式。当我遇到这种情况时，我希望能够做一些简短而优雅的事情，比如：

// index.ts
import myLibObjectInterface from './my-lib.d.ts'; // this line is not correct
declare global {
  interface Window {
    myLib: myLibObjectInterface
  }
}

某些定义文件包括库对象的接口，如jQuery，它执行以下操作：

// index.d.ts
/// <reference path="JQuery.d.ts" />

// jQuery.d.ts
interface JQuery<TElement = HTMLElement> extends Iterable<TElement> {
  // lots and lots of definitions

//index.d.ts
/// 
//jQuery.d.ts
接口JQuery扩展了Iterable{
//很多很多定义

然后一切都很好-我可以使用

界面窗口{$:jQuery}

，但许多最初不是为浏览器使用而创建的库不提供这样的界面

如前所述，最好的解决方案是将库的实现与TS项目集成，允许对库及其类型进行

import

ed和使用，而无需大惊小怪，但是如果这不可能，我还有什么好的选择吗？我可以检查真实库对象的属性并添加一个定义文件的接口，其中包括所有此类属性及其类型，但必须修改半规范源定义文件被DT接受并被其他人使用的感觉是错误的。我更希望能够导入定义文件导出的形状，并在不修改原始文件的情况下从这些形状创建接口，但这可能是不可能的

---

是否有更优雅的解决方案，或者我碰巧遇到的定义文件根本不适合我的目标，因此必须进行修改？

如果模块有

导出为命名空间myLib

，则模块已将库导出为全局对象。因此，您可以将库用作：

let a:myLib.AnInterface;
let b =  myLib.doThing1();

只要您在其中使用库的文件本身不是模块（即它不包含

import

和

export

语句），这是正确的

您可以向

窗口添加与使用导入类型的库类型相同的属性（在2.9中添加）

编辑

显然，Typescript团队实际上一直在为这个问题做一些工作。正如您在本文中所看到的，Typescript的下一个版本将包含一个
allowUmdGlobalAccess
标志。该标志将允许从模块访问UMD模块全局。当该标志设置为true时，该代码将有效：

export {} // module now
let a:myLib.AnInterface; // Types are still ok without the import
let b =  myLib.doThing1(); // ok, on typescript@3.5.0-dev.20190425

这意味着您无需使用窗口即可访问模块导出。如果全局导出与我期望的浏览器兼容，这将起作用。
您在处理什么

当库将自身指定给窗口的属性时

这称为UMD包。它们是通过在文档中的
标记内添加链接而使用的包，它们将自身附加到全局范围

UMD包不必以这种方式使用-它们也可以作为模块使用，使用
import
（或
require
）语句

TypeScript支持这两种用法

应如何键入UMD软件包

declare namespace Foo {
  export const bar: string;
  export type MeaningOfLife = number;
}

export as namespace Foo;
export = Foo;

此定义告诉TypeScript：


如果消费文件是脚本，则在全局范围中有一个名为
bar
的变量
如果使用文件是一个模块，则可以使用命名导入导入
bar
，或者使用通配符（
*
）导入整个命名空间

脚本和模块有什么区别？

脚本是运行在HTML文档中的
标记内的一段JavaScript。它可以内联或从文件加载。这就是JavaScript在浏览器中的使用方式

模块是一个JavaScript（TypeScript）文件，其中至少有一条
导入
或
导出
语句。它们是ECMAScript标准的一部分，并非所有地方都支持。通常，您在项目中创建模块，并让类似捆绑包的Web包创建一个捆绑包供应用程序使用

使用UMD软件包

通过访问全局
Foo
名称空间使用脚本、变量和类型（就像jQuery和
$
）：

对于脚本，
bar
的类型使用导入类型语法导入：

在模块中，
bar
变量使用n
export {} // module now
let a:myLib.AnInterface; // Types are still ok without the import
let b =  myLib.doThing1(); // Expressions are not ok, ERR: 'myLib' refers to a UMD global, but the current file is a module. Consider adding an import instead.ts(2686)

// myLibGlobal.d.ts
// must not be a module, must not contain import/ export 
interface Window {
    myLib: typeof import('./myLib') // lib name here
}


//usage.ts
export {} // module
let a:myLib.AnInterface; // Types are still ok without the import (if we have the export as namespace
let b =  window.myLib.doThing1(); // acces through window ok now

export {} // module now
let a:myLib.AnInterface; // Types are still ok without the import
let b =  myLib.doThing1(); // ok, on typescript@3.5.0-dev.20190425

declare namespace Foo {
  export const bar: string;
  export type MeaningOfLife = number;
}

export as namespace Foo;
export = Foo;

const bar = Foo.bar;
const meaningOfLife: Foo.MeaningOfLife = 42;

const baz: typeof import ('foo').bar = 'hello';

import { bar } from 'foo';

bar.toUpperCase();

import * as foo from 'foo';

foo.bar.toUpperCase();

declare global {
  interface Window {
    Foo: typeof import('foo');
  }
}

window.Foo.bar;