TypeScript中类型与常量同名为何无Lint警告却报错？

我编写了如下代码：

import type { SomeType } from '../../types/Project';
// import { SomeType } from '../../types/Project'; 也试过这种写法

const SomeType = ({ s }: { s: SomeType }): JSX.Element => {
  return <>${s}</>;
};

在Project.ts中的定义：

export type SomeType = JSX.Element;

为什么TypeScript linter没给出警告，却抛出错误：Identifier 'SomeType' has already been declared.？我原本以为类型和变量可以同名共存？

原因与解决方案 #

• 核心原因：TypeScript的作用域规则中，类型标识符和值标识符（比如变量、函数、组件）共享同一个作用域命名空间，哪怕类型会在编译阶段被擦除，静态检查时依然会检测到重名冲突。

• import type也触发的原因：import type虽然只导入类型，但会在当前作用域创建一个类型标识符，这个标识符和你后续声明的const SomeType（值标识符）重名，因此触发报错。

• 可行解决办法：

  • 直接重命名：给组件或类型换个不冲突的名字，比如把组件改成SomeTypeComponent，或者把类型调整为SomeTypeProps（根据实际语义修改）。
  • 重命名导入：利用类型别名的导入重命名，避免作用域内重名：

    import type { SomeType as SomeTypeAlias } from '../../types/Project';
    
    const SomeType = ({ s }: { s: SomeTypeAlias }): JSX.Element => {
      return <>${s}</>;
    };
    

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