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

如何扩展并重新导出导入的TypeScript命名空间?

TypeScript中无法扩展导入的命名空间?试试这些替代方案

你提到的结论是对的:TypeScript无法直接扩展从其他模块导入的命名空间。命名空间合并仅支持同文件内的重复声明,或是全局作用域下的声明合并,跨模块导入的命名空间无法与本地命名空间合并,这也是你遇到Import declaration conflicts with local declaration of 'Colors'报错的原因。

下面是几种可行的替代方案,覆盖不同场景需求:

方案1:保留对象扩展模式(最贴近原JS写法)

继续使用const对象配合as const,既保留熟悉的扩展逻辑,又能获得精准的TypeScript类型支持:

库代码(theme-library/colors.ts)

export const Colors = {
  error: '#f00',
  info: '#00f',
  success: '#0f0',

  axes: {
    x: '#f44',
    y: '#4f4',
    z: '#06f',
  } as const,
} as const;

// 导出类型方便后续复用
export type ColorsType = typeof Colors;

应用代码(app/colors.ts)

import { Colors as BaseColors } from 'theme-library/colors';

export const Colors = {
  ...BaseColors,
  done: '#0f8',
  selected: '#fc0',
} as const;

// 导出扩展后的类型
export type ExtendedColorsType = typeof Colors;

as const会让所有颜色值被推导为字面量类型,使用时能获得精确的代码提示。

方案2:用ES模块替代命名空间(官方推荐)

TypeScript官方更推荐使用ES模块组织代码,而非命名空间。通过重新导出模块成员,可以轻松实现扩展:

库代码(theme-library/colors.ts)

export const error = '#f00';
export const info = '#00f';
export const success = '#0f0';

export const axes = {
  x: '#f44',
  y: '#4f4',
  z: '#06f',
} as const;

应用代码(app/colors.ts)

// 重新导出所有基础颜色
export * from 'theme-library/colors';

// 添加自定义扩展颜色
export const done = '#0f8';
export const selected = '#fc0';

使用时直接导入整个模块即可:

import * as Colors from './app/colors';
console.log(Colors.error, Colors.done);

方案3:接口+常量对象(强类型契约场景)

如果需要明确的类型约束,可以先定义颜色接口,再实现扩展:

库代码(theme-library/colors.ts)

export interface BaseColors {
  error: string;
  info: string;
  success: string;
  axes: {
    x: string;
    y: string;
    z: string;
  };
}

export const Colors: BaseColors = {
  error: '#f00',
  info: '#00f',
  success: '#0f0',
  axes: {
    x: '#f44',
    y: '#4f4',
    z: '#06f',
  },
};

应用代码(app/colors.ts)

import { Colors as BaseColors, BaseColors } from 'theme-library/colors';

// 扩展基础接口
export interface ExtendedColors extends BaseColors {
  done: string;
  selected: string;
}

// 实现扩展后的颜色对象
export const Colors: ExtendedColors = {
  ...BaseColors,
  done: '#0f8',
  selected: '#fc0',
};

这种方式强制扩展必须符合接口定义,适合需要严格类型契约的大型项目。


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

相关产品推荐
方舟 Agent Plan

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

最近更新时间:2026.07.17 11:37:40