javascript - 如果库的实现没有集成到 TS 项目中，如何使用 d.ts 文件导出的 const 类型？

DefinitelyTyped 为许多库提供了类型定义，但在 Javascript 实现与 Typescript 分离时，我常常找不到好的使用方法，比如当一个库通过 window 的属性给自己赋值时。

<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 的一个属性？我看到我可以导入导出的接口，例如：

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

这可以用，但我想访问实际库对象的结构及其属性值（函数、字符串等），而不仅仅是接口。如果我这样做

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

那么 myLib 标识符就变成了一个命名空间，我可以从中引用导出的接口，但就像上面一样，我仍然无法访问 my-lib.d.ts 中的 export const 和 export function 类型。（当然，尝试使用导入的命名空间来声明库对象是行不通的：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 接受并被其他人使用的半官方源定义文件感觉不对。我更希望能够导入定义文件导出的类型，并从中创建接口而不修改原始文件，但这可能行不通。

是否有更优雅的解决方案，或者我偶然遇到的定义文件只是对于我的目标不够适用，因此必须修改？

答案＃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)

你可以向 Window 添加一个属性，其类型与库的类型相同，使用 import type（我记得是在 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 中看到的，下一版本的 TypeScript 将包含一个 allowUmdGlobalAccess 标志。设置这个标志后，将允许从模块中访问 UMD 模块的全局变量。将此标志设置为 true 时，这段代码将是有效的：

export {} // module now
let a:myLib.AnInterface; // Types are still ok without the import
let b =  myLib.doThing1(); // ok, on [email

这意味着你可以直接访问模块导出，而无需使用 window。如果全局导出与浏览器兼容，这将可以工作，我预计它是兼容的。

答案＃2

你在处理什么

当一个库将自己分配给 window 的属性时

这叫做UMD包。这些是通过在文档中的<script />标签内添加链接来使用的，它们会附加到全局作用域。

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，或者使用通配符(*)导入来导入整个命名空间。

脚本（script）和模块（module）有什么区别？

一个脚本是在你的HTML文档中的<script />标签内运行的JavaScript代码。它可以是内联的，也可以从文件中加载。这就是JavaScript在浏览器中一直以来的使用方式。

一个模块是一个至少包含一个import或export语句的JavaScript（TypeScript）文件。它们是ECMAScript标准的一部分，并不是所有地方都支持。通常，你会在项目中创建模块，然后让像Webpack这样的打包工具为你的应用创建一个包以供使用。

使用 UMD 包

可以通过访问全局 Foo 命名空间使用脚本、变量和类型（就像 jQuery 和 $ 一样）:

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

一个脚本，使用 import type 语法导入 bar 的类型：

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

一个模块，bar 变量使用命名导入被导入。

import { bar } from 'foo';

bar.toUpperCase();

一个模块，整个包作为命名空间被导入：

import * as foo from 'foo';

foo.bar.toUpperCase();

全局作用域 vs. window

如果这样的库类型正确，作为使用者的你无需做任何操作即可使其工作。它会自动在全局范围中可用，而且无需对 Window 进行任何扩展。

然而，如果你想将库的内容显式附加到 window，你也可以这样做：

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

window.Foo.bar;

javascript - 如果库的实现没有集成到 TS 项目中，如何使用 d.ts 文件导出的 const 类型？

答案＃1

答案＃2

相关文章