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

Question

DefinitelyTyped 有许多库的类型定义，但当 Javascript 实现与 Typescript 分离时，我常常找不到使用它们的好方法，比如当库通过 a 将自己分配给窗口的属性时

<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() 和 window.myLib.doThing2() 来使用 myLib。我如何导入整个 window.myLib 对象的形状，以便我可以将其声明为 window 的属性？我可以看到我可以导入导出的接口(interface)，例如:

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

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

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

然后 myLib 标识符变成了一个命名空间，我可以从中引用导出的接口(interface)，但就像上面一样，我仍然无法访问 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
  }
}

一些定义文件包含库对象的接口(interface)，例如 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 }，但是许多最初不是为浏览器使用而创建的库不提供这样的接口(interface)。

如前所述，最好的解决方案是将库的实现与 TS 项目集成，从而允许库及其类型被导入并轻松使用，但是如果这不可能，我还有什么好的选择吗？我可以检查真实库对象的属性并向定义文件添加一个接口(interface)，其中包括所有这些属性及其类型，但是必须修改 DT 接受并被其他人使用的半规范源定义文件感觉错误的。我希望能够导入定义文件导出的形状，并在不修改原始文件的情况下从中创建界面，但这可能是不可能的。

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

Answer 1

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

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)

您可以使用导入类型(相信在 2.9 中添加)向 Window 添加一个与库类型相同类型的属性

// 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下一个版本的 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

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