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

TypeScript中如何区分模块/命名空间与同名导出主类型?

解决TypeScript中类型与命名空间同名冲突的方案

以下是几种实用的解决思路,可根据你的场景选择:

方案一:类型单独导入 + 模块重命名导入

保持原模块的导出结构,在导入时将类型和工具函数模块分开:

task.ts

export type Task = {
  name: string
  description: string
  cost: number
  done: boolean
}

export function increaseCost(task: Task, percent: number) {
  return { ...task, cost: task.cost * (1 + percent / 100) }
}

export function anotherFunction(task: Task) {
  // 函数实现
}

export function yetAnotherFunction(task: Task) {
  // 函数实现
}

index.ts

// 仅导入类型
import type { Task } from "./task.ts";
// 将整个模块导入为工具命名空间
import * as TaskUtils from "./task.ts";

let task: Task = {
  name: "示例任务",
  description: "任务描述",
  cost: 100,
  done: false
};

// 通过工具命名空间调用函数
TaskUtils.increaseCost(task, 15);
TaskUtils.anotherFunction(task);
TaskUtils.yetAnotherFunction(task);

这种方式完全遵循TypeScript模块规范,没有冗余代码,类型和函数调用边界清晰。

方案二:类作为类型+命名空间(适合需要实例的场景)

如果你的Task需要运行时实例,可将其定义为类,静态方法自然成为"命名空间"下的函数:

task.ts

export class Task {
  name: string;
  description: string;
  cost: number;
  done: boolean;

  constructor(name: string, description: string, cost: number, done: boolean) {
    this.name = name;
    this.description = description;
    this.cost = cost;
    this.done = done;
  }

  static increaseCost(task: Task, percent: number) {
    return new Task(
      task.name,
      task.description,
      task.cost * (1 + percent / 100),
      task.done
    );
  }

  static anotherFunction(task: Task) {
    // 函数实现
  }

  static yetAnotherFunction(task: Task) {
    // 函数实现
  }
}

index.ts

import { Task } from "./task.ts";

// 创建类实例
let task = new Task("示例任务", "任务描述", 100, false);

// 直接通过类调用静态方法,完全符合你想要的写法
Task.increaseCost(task, 15);
Task.anotherFunction(task);
Task.yetAnotherFunction(task);

这里类本身既是类型,又是静态方法的容器,完美匹配你期望的Task.xxx调用方式,但要注意类会生成运行时代码,若仅需编译时类型则不适用。

方案三:命名空间+类型别名

通过命名空间组织函数,同时导出类型别名简化类型引用:

task.ts

export namespace TaskNS {
  export type Task = {
    name: string
    description: string
    cost: number
    done: boolean
  };

  export function increaseCost(task: Task, percent: number) {
    return { ...task, cost: task.cost * (1 + percent / 100) }
  }

  export function anotherFunction(task: Task) {
    // 函数实现
  }

  export function yetAnotherFunction(task: Task) {
    // 函数实现
  }
}

// 导出类型别名,避免使用TaskNS.Task的冗余写法
export type Task = TaskNS.Task;

index.ts

import { Task, TaskNS } from "./task.ts";

let task: Task = {
  name: "示例任务",
  description: "任务描述",
  cost: 100,
  done: false
};

// 通过命名空间调用函数
TaskNS.increaseCost(task, 15);
TaskNS.anotherFunction(task);
TaskNS.yetAnotherFunction(task);

这种方式保留了命名空间的结构,同时类型引用依然简洁。

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

相关产品推荐
方舟 Agent Plan

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

最近更新时间:2026.07.10 02:21:05