网站搜索

webpack - 如何在 TypeScript 的 .d.ts 模块中导入其他类型


我有一个用于外部模块的自定义 .d.ts 文件,看起来像

declare module 'vertices-bounding-box' {
  export default function boundingBox(positions: [number,number,number][]): [number, number]
}

我想使用来自另一个模块的类型,而不是 [number,number,number]:

import { vec3 } from 'gl-matrix';

declare module 'vertices-bounding-box' {
  export default function boundingBox(positions: vec3[]): [number, number]
}

当我为 vec3 添加导入语句时,TSC 会抱怨说:

Invalid module name in augmentation. Module 'vertices-bounding-box' resolves to an untyped
module at '/Users/kevzettler/code/hypeworks/node_modules/vertices-bounding-box/index.js', which cannot be augmented. [2665]

答案#1

你刚刚展示了 TypeScript 中导入类型的最常见用例:

模块可以导入在其他模块中声明的类型。但非模块的全局脚本无法访问在模块中声明的类型。引入导入类型。

换句话说,这个语言特性允许从项目 .d.ts 文件的 全局作用域 内像这样导入外部 模块 'gl-matrix' 的类型:

// ext-module.d.ts, important: don't use ES import statement here
declare module 'vertices-bounding-box' {
  export default function boundingBox(
    positions: Array<import("gl-matrix").vec3>): [number, number]
}

注意:没有 ES import/export 的文件是全局脚本,而不是模块。

'vertices-bounding-box' 没有自带类型,因此需要像上面所示在 全局脚本文件 中声明这些类型。对于希望扩展已经 存在 的类型(例如来自 DefinitelyTyped/@types 的类型)的情况,你需要保留顶层的 ES 导入

import { vec3 } from 'gl-matrix';
// ...

在此文件中,由于模块扩展需要一个模块。

相关文章