处理本地类型与全局原生类型的命名冲突

当然可以实现，下面是几种实用的方案：

方案1：用命名空间包裹自定义类型 #

把你的自定义Node、ChildNode接口放在命名空间里，原生类型直接使用，自定义类型通过命名空间访问，二者互不干扰：

namespace CustomDOM {
  export interface Node {
    customMethod(): void;
    // 可添加自定义属性/方法
  }

  export interface ChildNode {
    customChildMethod(): void;
  }
}

// 直接使用原生DOM类型
const nativeDiv: Node = document.createElement('div');
console.log(nativeDiv.nodeType); // 原生方法正常生效

// 通过命名空间访问自定义类型
const customNode: CustomDOM.Node = {} as CustomDOM.Node;
customNode.customMethod();

方案2：模块导入+别名 #

将自定义类型放在单独的模块文件中，导入时用别名区分，原生类型保持全局可用：

1. 创建自定义类型文件custom-dom.d.ts：

export interface Node {
  customMethod(): void;
}

export interface ChildNode {
  customChildMethod(): void;
}

2. 在使用文件中导入并使用：

import * as CustomDOM from './custom-dom';

// 原生类型直接调用
const nativeSpan: Node = document.createElement('span');

// 自定义类型通过别名访问
const customChildNode: CustomDOM.ChildNode = {} as CustomDOM.ChildNode;
customChildNode.customChildMethod();

方案3：缓存原生类型别名（适合已覆盖全局的场景） #

如果已经覆盖了全局类型，可以先在覆盖前给原生类型起别名，后续用别名访问原生类型，自定义类型直接用全局的：

// 先缓存原生类型的引用
type NativeNode = Node;
type NativeChildNode = ChildNode;

// 覆盖全局DOM类型
declare global {
  interface Node {
    customMethod(): void;
  }

  interface ChildNode {
    customChildMethod(): void;
  }
}

// 用别名访问原生类型
const nativeNode: NativeNode = document.createElement('div');

// 直接使用自定义后的全局类型
const customNode: Node = {} as Node;
customNode.customMethod();

这几种方案都能满足你同时使用原生和自定义DOM类型的需求，可根据项目结构选择最适配的方式。

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