如何在TypeScript中排除类类型的特定子类？

问题描述 #

希望定义一个函数，参数接受某个父类类型，但明确排除该父类的特定子类，避免使用庞大的子类联合类型。尝试Exclude<Guardian, GrandParent>未生效——因TypeScript结构类型系统中，子类与父类结构兼容，Exclude无法直接区分。

基础场景代码 #

class Guardian {
    constructor(public name: string) {}
    /* ... */
}

class Father extends Guardian {
    constructor(name: string) { super(name); }
    /* ... */
}

class Mother extends Guardian {
    constructor(name: string) { super(name); }
    /* ... */
}

class GrandParent extends Guardian {
    constructor(name: string) { super(name); }
    /* ... */
}

function parentFunc(parent: Guardian) {
    /* ... */
}

parentFunc(new Father('Kyle')); // 允许
parentFunc(new Mother('Theresa')); // 允许
parentFunc(new GrandParent('Jace')); // 需要触发错误，但当前不会报错

自定义元素扩展场景 #

HTML

<div class="regular-elem">HELLO</div>
<cool-par class="cool-par"></cool-par>

TypeScript

export class CoolPar extends HTMLElement {
  bgColor = 'black';
  
  constructor() {
    super();
    const shadow = this.attachShadow({mode: 'open'});

    const htmlString = `
      <style>
        :host {
          font-size: 20px;
        }
        
        .container {
          background-color: ${this.bgColor};
          width: fit-content;
        }
        
        .paragraph {
          color: white;
        }
      </style>

      <div class="container">
        <p class="paragraph">WORLD</p>
      </div>
    `;

    const template = document.createElement('template');
    template.innerHTML = htmlString;
    const element = template.content.cloneNode(true);
    shadow.append(element);
  }
}

customElements.define('cool-par', CoolPar);

// 期望：允许传入普通Element，但禁止传入CoolPar
function elemFunc(elem: Element | null) {
  if (!elem) { throw Error('Target element not found'); }
  console.log(elem);
}

elemFunc(document.querySelector('.regular-elem') as HTMLElement); // 允许
elemFunc(document.querySelector('.cool-par') as CoolPar); // 需要触发错误，但当前不会报错

解决方案 #

核心思路：给需要排除的子类添加唯一类型标记，人为制造结构差异，让TypeScript能区分目标子类与父类/其他子类，再通过类型约束实现排除效果。

方法1：添加只读公开标记属性 #

给要排除的子类添加独特的只读属性，再定义排除该属性的父类衍生类型。

基础场景改造

class Guardian {
    constructor(public name: string) {}
    /* ... */
}

class Father extends Guardian {
    constructor(name: string) { super(name); }
    /* ... */
}

class Mother extends Guardian {
    constructor(name: string) { super(name); }
    /* ... */
}

// 给GrandParent添加唯一标记属性
class GrandParent extends Guardian {
    readonly isGrandParent = true;
    constructor(name: string) { super(name); }
    /* ... */
}

// 约束：要求isGrandParent属性不存在（或为never）
type GuardianExceptGrandParent = Guardian & { isGrandParent?: never };

function parentFunc(parent: GuardianExceptGrandParent) {
    /* ... */
}

parentFunc(new Father('Kyle')); // ✅ 正常通过
parentFunc(new Mother('Theresa')); // ✅ 正常通过
parentFunc(new GrandParent('Jace')); // ❌ 类型错误：属性"isGrandParent"不兼容

自定义元素场景改造

export class CoolPar extends HTMLElement {
  readonly isCoolPar = true; // 添加唯一标记
  bgColor = 'black';
  
  constructor() {
    super();
    // ... 原有代码不变
  }
}

customElements.define('cool-par', CoolPar);

// 约束：要求isCoolPar属性不存在（或为never）
type ElementExceptCoolPar = Element & { isCoolPar?: never };

function elemFunc(elem: ElementExceptCoolPar | null) {
  if (!elem) { throw Error('Target element not found'); }
  console.log(elem);
}

elemFunc(document.querySelector('.regular-elem') as HTMLElement); // ✅ 正常通过
elemFunc(document.querySelector('.cool-par') as CoolPar); // ❌ 类型错误：属性"isCoolPar"不兼容

方法2：使用私有属性/唯一符号 #

若不想暴露公开标记，可使用私有属性或唯一符号实现无侵入的结构区分：

const excludeSymbol = Symbol('exclude-grandparent');

class GrandParent extends Guardian {
    private [excludeSymbol] = true; // 私有符号属性，外部不可访问
    constructor(name: string) { super(name); }
    /* ... */
}

type GuardianExceptGrandParent = Guardian & { [excludeSymbol]?: never };

function parentFunc(parent: GuardianExceptGrandParent) {
    /* ... */
}

parentFunc(new GrandParent('Jace')); // ❌ 类型错误

原理说明 #

TypeScript采用结构类型系统，结构兼容的类型会被视为同一类型。通过给排除的子类添加唯一属性，人为制造结构差异，让TypeScript能够区分目标子类与父类/其他子类。结合& { 标记属性?: never }的类型约束，即可确保函数参数不会接受带有该标记的子类实例。

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