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
的属性?我可以看到我可以导入导出的接口,例如:
// 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
ed并且使用时没有大惊小怪,但如果这不可能,我还有什么好的选择吗? ?我可以检查真实库对象的属性,并为定义文件添加一个接口,该接口包含所有这些属性及其类型,但是必须修改DT接受并由其他人使用的半规范源定义文件错误。我希望能够导入定义文件的导出形状,并从中创建一个接口而不修改原始文件,但这可能是不可能的。
是否有更优雅的解决方案,或者我碰巧遇到的定义文件根本不适合我的目标,因此必须进行修改?
如果模块具有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
添加与库类型相同类型的属性(相信在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 [email protected]
这意味着您只需访问模块导出而无需使用窗口。如果全局导出与我期望的浏览器兼容,这将起作用。
你在做什么
当库将自己分配给窗口的属性时
这被称为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
或使用通配符(*
)导入导入整个命名空间。脚本和模块之间有什么区别?
脚本将是在HTML文档中的<script />
标记内运行的一段JavaScript。它可以从文件内联或加载。这就是JavaScript一直在浏览器中使用的方式。
模块是一个JavaScript(TypeScript)文件,至少有一个import
或export
语句。它们是ECMAScript标准的一部分,并不是所有地方都支持。通常,您在项目中创建模块,让像Webpack这样的捆绑器为您的应用程序创建一个捆绑包。
使用UMD包
通过访问全局Foo
命名空间(就像jQuery和$
)使用脚本,变量和类型:
const bar = Foo.bar;
const meaningOfLife: Foo.MeaningOfLife = 42;
一个脚本,使用导入类型语法导入bar
的类型:
const baz: typeof import ('foo').bar = 'hello';
一个模块,使用命名导入导入bar
变量。
import { bar } from 'foo';
bar.toUpperCase();
一个模块,整个包作为命名空间导入:
import * as foo from 'foo';
foo.bar.toUpperCase();
全局范围与窗口
如果正确输入了这样的库,那么您作为消费者不必做任何事情来使其工作。它将自动在您的全局范围内提供,并且不需要增加Window
。
但是,如果您想明确地将库的内容附加到window
,您也可以这样做:
declare global {
interface Window {
Foo: typeof import('foo');
}
}
window.Foo.bar;