TypeScript类型解构方法及嵌套模块引用路径过长优化方案问询

下面针对你的场景，给出三种可落地的实现方案，均兼容类型解构需求：

方案1：重构导出逻辑，扁平化暴露所有成员 #

这是最推荐的方案，不需要调整原有业务代码的实现，只修改各层index.ts的导出规则即可：

1. 先调整repository/index.ts，在保留原有聚合导出的同时，新增单个成员的直接导出：

import { CachePlugin } from "./plugins/cache-plugin";
import { EsPlugin } from "./plugins/es-plugin";
// 保留原有聚合对象，兼容旧代码调用逻辑
const plugin = { EsPlugin, CachePlugin };
export { FindResultPageNext, plugin };
// 新增单个成员导出
export { CachePlugin, EsPlugin };
// 如果有更深层级的模块，直接在这里转发导出即可，比如：
// export { a } from "./xxx/xxx/a";

2. 调整外层index.ts，直接全量导出repository的所有成员：

export * from "./repository";
// 不需要再单独导出repository对象，有需要的场景可以保留：
// export * as repository from "./repository";

调整后使用方式直接导入即可，不需要嵌套访问：

// test.ts
import { EsPlugin, a, FindResultPageNext } from "你的模块根路径";
class A extends EsPlugin {}

方案2：导入时解构+局部别名 #

如果不想调整公共导出逻辑，也可以在导入时直接做解构，值和类型都支持该操作：

// test.ts
// 解构值成员
import { repository } from "你的模块根路径";
const { EsPlugin, CachePlugin } = repository.plugin;
// 深层嵌套成员解构
const { a } = repository.xxx.xxx;
// 类型别名定义
type FindResultPageNextType = typeof repository.FindResultPageNext;
class A extends EsPlugin {}

方案3：配置TS路径别名缩短导入路径 #

如果不想做全局的扁平化导出，可以通过tsconfig.json配置路径别名，简化深层文件的导入路径：

// tsconfig.json
{
  "compilerOptions": {
    "baseUrl": "./src", // 改成你项目src对应的相对路径
    "paths": {
      "@/repo/*": ["repository/*"],
      "@/plugins/*": ["repository/plugins/*"]
    }
  }
}

配置后可以直接通过别名导入任意深层文件，不需要写长路径：

import { EsPlugin } from "@/plugins/es-plugin";
import { a } from "@/repo/xxx/xxx/a";

注意：如果是生产环境打包的项目，需要同时在打包工具（Webpack/Vite/Rollup）里配置对应的别名规则，避免打包时路径报错。

内容的提问来源于stack exchange，提问作者ajie