TypeScript 模块类型声明方案解析 Cannot use namespace xxx as a type.

问题背景

在 Vue + TypeScript 项目中导入 Three.js 扩展模块时出现类型错误：

Vue: Cannot use namespace OrbitControls as a type.

方案对比

方案一：类型别名声明

declare type OrbitControls = import("three/examples/jsm/controls/OrbitControls").OrbitControls

特点：

1. 创建类型别名
2. 使用 import() 语法动态引入类型
3. 适用于简单类型引用
4. 潜在问题：当模块同时包含值和类型时，可能导致类型系统混淆

方案二：模块声明补全

declare module 'three/examples/jsm/controls/OrbitControls' {
    export { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
}

特点：

1. 声明完整的模块结构
2. 明确导出具体内容
3. 保持模块的完整类型定义
4. 更符合 TypeScript 模块解析规则

方案三：模块路径重定向

实现方式

// 使用路径重定向
import { OrbitControls } from "three/controls";

// 在声明文件中添加
declare module 'three/controls' {
    export { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
}

// https://vite.dev/config/
export default defineConfig({
  plugins: [vue(), tailwindcss()],
  resolve: {
    alias: {
      "@": resolve(__dirname, "./src"),
      'three/examples': 'three/examples/jsm/controls/OrbitControls'
    }
  }
})

特点：

1. 创建模块路径别名
2. 结合构建工具的路径映射
3. 保持代码简洁性
4. 需要工程化配置支持