TypeScript中同名导入与本地声明冲突的解决方案咨询

当本地定义的组件与需导入的类名称完全一致时，会触发TypeScript冲突错误：

Import declaration conflicts with local declaration of 'RangeFilter'.typescript(2440)

无需修改原有名称，以下是几种实用的解决方式：

常用解决方案 #

1. 重命名导入（推荐） #

这是TypeScript中最直接简洁的方案，通过as关键字给导入成员重命名，精准规避冲突：

// 给导入的RangeFilter重命名为ImportedRangeFilter
import { RangeFilter as ImportedRangeFilter } from "./RangeFilter";

// 本地组件保留原名称
function RangeFilter() {
  // 直接用重命名后的标识引用导入的类
  let test: ImportedRangeFilter;
}

这种方式针对性强，代码可读性高，无需额外层级嵌套。

2. 命名空间导入（你找到的方案） #

将整个模块导入为命名空间，通过命名空间间接访问目标类：

import * as RangeFilterNS from "./RangeFilter";

function RangeFilter() {
  // 通过命名空间层级访问导入的类
  let test: RangeFilterNS.RangeFilter;
}

该方案适合需要导入模块中多个成员的场景，但仅需单个成员时，重命名导入会更轻便。

3. 默认导出结合重命名（若适用） #

如果目标类以默认导出形式存在，可直接在导入时重命名：

// 假设RangeFilter是默认导出
import ImportedRangeFilter from "./RangeFilter";

function RangeFilter() {
  let test: ImportedRangeFilter;
}

冲突代码示例 #

import { RangeFilter } from "./RangeFilter"; // 触发冲突错误
import * as x from "./RangeFilter";

function RangeFilter() {
  let test: RangeFilter; // 此处指向本地函数，而非导入的类
  let a: x.RangeFilter; // 临时规避方式
}

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