You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何在TypeScript声明文件中导入所有默认类型?

问题描述

简化场景

目前我在声明文件里只能重复从默认导入中单独提取类型:

type OneCtrl = import("some-package").default.OneCtrl
type TwoCtrl = import("some-package").default.TwoCtrl

declare module "my-package" {
    export function useUtils(options: OneCtrl): TwoCtrl
}

我不得不反复从默认导入中单独导入各个类型。

尝试过的无效方案:

  • 使用<reference>指令无效
  • 尝试用type g = import("some-package").default,再通过g.OneCtrl调用也没用

约束条件:

  • 要导入的是带命名空间的包
  • 直接用ES6导入会让声明文件不再是环境声明,项目会报错
  • 环境:Vite + Vue 3 + TS项目

细节更新

我正在给外部包vue-grapesjs-composables添加类型,这个包基于自带类型的grapesjs包。

我试过在声明文件里用ES6导入:

import type grapes from 'grapesjs'

declare module "vue-grapesjs-composables" {
    export function useGrapes(editorConfig: grapes.EditorConfig): grapes.Editor;
}

这段声明本身是有效的,但在组件里导入vue-grapesjs-composables时会报错:
Could not find a declaration file for module 'vue-grapesjs-composables'

解决方案

方法1:模块声明内部导入类型

把import type放在目标模块的声明内部,既可以复用grapesjs的类型,又能让TypeScript正确识别这个声明文件:

declare module "vue-grapesjs-composables" {
  import type grapes from 'grapesjs';
  export function useGrapes(editorConfig: grapes.EditorConfig): grapes.Editor;
}

同时需要:

  • 将声明文件命名为vue-grapesjs-composables.d.ts
  • 把文件放在src/types目录下
  • 在tsconfig.json的include字段中添加该目录:
{
  "include": ["src/**/*", "src/types/**/*.d.ts"]
}

方法2:用类型别名简化重复引用

通过类型别名提取整个grapesjs的默认导出类型,避免重复写长路径:

type GrapesJS = import('grapesjs').default;

declare module "vue-grapesjs-composables" {
  export function useGrapes(editorConfig: GrapesJS.EditorConfig): GrapesJS.Editor;
}

如果之前这个写法无效,检查.d.ts文件是否被tsconfig正确包含,或者文件路径是否符合TypeScript的识别规则。

关键注意事项

  • 带import/export的.d.ts文件会成为模块级声明,不再是全局环境声明,但只要是针对目标包的模块扩展,TypeScript依然会正常识别。报错Could not find a declaration file大多是因为声明文件未被tsconfig包含,或者文件名/位置不对。
  • 确认grapesjs的类型已正确安装(该包通常自带类型定义,无需额外安装@types包)。

内容的提问来源于stack exchange,提问作者Neelansh Mathur

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.06 04:31:32