Popper.js Typings

Popper 带有 Flow 和 TypeScript 的类型定义。

该项目由 Flow 进行类型检查,TypeScript 的类型定义是从其源代码自动生成的。

请注意,类型定义并不严格遵循 SemVer,因为任何类型更改都可能是破坏性更改,但类型系统发展非常迅速,并且需要不断进行调整以跟上它们。


Common (Flow and TypeScript)

本节涵盖适用于 Flow 和 TypeScript 的常识,为了简单起见,示例是用 Flow 编写的,但在删除 // @flow 标头后,它们应该按原样工作。

修饰符类型检查

默认情况下,createPopper 在松散类型模式下工作,这意味着修饰符没有经过严格的类型检查。

如果您想选择加入严格模式,您可以执行以下操作:

// @flow
import { createPopper } from '@popperjs/core';
import type { StrictModifiers } from '@popperjs/core';

createPopper<StrictModifiers>(referenceElement, popperElement, options);

如果您想定义自定义修饰符,则需要将它们添加到列表中:

// @flow
import { createPopper } from '@popperjs/core';
import type { StrictModifiers, Modifier } from '@popperjs/core';

type CustomModifier = Modifier<'custom', { customOption: boolean }>;
type ExtendedModifiers = StrictModifiers | $Shape<CustomModifier>;

createPopper<ExtendedModifiers>(referenceElement, popperElement, options);

Flow

我们不是导出有限的类型定义,而是从dist/umd文件夹链接到 Flow-typed 源文件。

Flow 将自动读取公开的类型,因此您无需更改项目中的任何配置即可从 Popper 类型中受益。

你也可以决定从库中导入一个特定的模块,通过这样做,模块类型将被自动导入:

import hideModifier from '@popperjs/core/lib/modifiers/hide';

尽管建议将以下行添加到您的.flowconfig文件中,以指示 Flow 不要报告源自您的node_modules文件夹的类型错误。 模块公开的类型定义仍将被使用,但它们的错误(如果有)将被忽略。

[declarations]
<PROJECT_ROOT>/node_modules

***

TypeScript

从 Flow 生成 TypeScript 类型定义可以使用更严格的规则对项目进行类型检查,同时为其他类型系统的用户提供类型定义。

两种类型系统的类型定义接口本质上是相同的,但由于 Flow 和 TypeScript 之间的内在差异,我们不能保证 TypeScript 定义的类型覆盖范围相同。

TypeScript .d.ts 文件与对应的 JavaScript 模块一起位于 lib/ 文件夹中,位于存储库根目录的 index.d.ts 文件允许 TypeScript 编译器定位它们,无需额外配置即可使用 typings。

你也可以决定从库中导入一个特定的模块,通过这样做,模块类型将被自动导入:

import hideModifier from '@popperjs/core/lib/modifiers/hide';

查看笔记

扫码一下
查看教程更方便