如果库的实现未与TS项目集成，如何使用d.ts文件的导出const类型？

Question

DefinitelyTyped具有许多库的类型定义，但是当Javascript实现与Typescript分开时，例如当库通过一个库将其自身分配给窗口的属性时，常常我找不到一种使用它们的好方法

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

标签，并且当我管理的JS包位于另一个单独的脚本中时。（尽管将包括库在内的所有内容捆绑在一起是标准且可靠的方法，但出于这个问题，假设我没有选择将库正确导入到我的TS项目中的选择。）例如，说我看上去很漂亮库的定义文件myLib：

// my-lib.d.ts
export const doThing1: () => number;
export const doThing2: () => string;
export const version: string;
export interface AnInterface {
  foo: string;
}
export as namespace myLib;

在JS中，我可以通过调用window.myLib.doThing1()和来使用myLib window.myLib.doThing2()。如何导入整个window.myLib对象的形状，以便可以将其声明为属性window？我看到可以导入导出的接口，例如：

// index.ts
import { AnInterface } from './my-lib';
const something: AnInterface = { foo: 'foo' };
console.log(something.foo);

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

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

然后myLib标识符变成一个命名空间，我可以从中引用导出的接口，但是就像上面一样，我仍然无法访问的export const和export function形状my-lib.d.ts。（而且，当然，尝试使用导入的名称空间声明库对象是行不通的：Cannot use namespace 'myLib' as a type.即使我可以这样做，也不一定安全，因为为浏览器打包的库的结构可能稍有不同来自库的Node导出对象）

如果我手动将的部分内容复制并粘贴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

然后一切都很好-我可以使用interface Window { $: jQuery }，但是许多最初不是为浏览器使用而创建的库没有提供这样的接口。

如前所述，最好的解决方案是将库的实现与TS项目集成在一起，允许对库及其类型进行import编辑和使用而不必大惊小怪，但是，如果这不可能的话，我还有什么好的选择吗？？我可以检查真实库对象上的属性，并向包含所有此类属性及其类型的定义文件添加接口，但必须修改DT接受并被其他人认为的半规范源定义文件错误。我希望能够导入定义文件导出的形状，并在不修改原始文件的情况下从它们创建接口，但这可能是不可能的。

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

Answer 1

如果模块具有export as namespace myLibthen模块，则该模块已经将库导出为全局对象。因此，您可以将库用作：

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

只要您正在使用该库的文件本身不是模块本身（即，它不包含且不包含import任何export语句），就可以实现。

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)

您可以Window使用导入类型（该属性在2.9中添加）添加与库类型相同的属性。

// 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

编辑

显然，Typescript团队实际上已经针对此问题进行了一些工作。如您在本PR中所读，打字稿的下一版本将包含一个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

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