TypeScript中实现仅继承接口属性而非静态属性的类型模式

要在TypeScript里实现「实例层面兼容、静态方法完全独立」的需求，核心是把实例必须遵守的类型契约和静态方法的实现彻底分开——毕竟TypeScript类的继承会同时继承实例和静态成员，这正是你第二次尝试出现问题的原因。

思路拆解 #

1. 用接口定义实例契约：Bar<T>接口规定所有实现它的类型必须拥有的属性/方法，这样FooBar<T>只要符合这个接口，就会被类型系统认定为Bar<T>的子类型。
2. 独立实现静态方法：不给类本身挂载静态方法，而是用命名空间（namespace）或者直接给构造函数挂载静态方法，让Bar和FooBar的静态逻辑完全隔离，互不影响。
3. 保持实例层面的继承/兼容：通过原型链继承（或者类的继承）保证FooBar<T>的实例符合Bar<T>的接口，同时自动继承实例方法。

方案一：贴近TypeScript类风格的实现 #

这种方案用内部类实现实例逻辑，命名空间承载静态方法，既符合TypeScript的语法习惯，又能满足你的需求：

// 1. 定义实例层面的契约：所有Bar<T>类型必须遵守的规则
interface Bar<T> {
  readonly x: T;
  getX(): T;
}

// 2. 内部类实现Bar接口的实例逻辑（对外不暴露）
class _Bar<T> implements Bar<T> {
  constructor(public readonly x: T) {}
  getX(): T {
    return this.x;
  }
}

// 3. 用命名空间承载Bar的静态方法，对外暴露为Bar
namespace Bar {
  export function create<T>(x: T): Bar<T> {
    return new _Bar(x);
  }
}

// ------------------------------
// 处理FooBar<T>
// ------------------------------

// 1. FooBar<T>继承Bar<T>的实例契约
interface FooBar<T> extends Bar<T> {
  readonly y: T;
  getY(): T;
}

// 2. 内部类继承_Bar<T>，实现FooBar<T>的实例逻辑
class _FooBar<T> extends _Bar<T> implements FooBar<T> {
  constructor(x: T, public readonly y: T) {
    super(x);
  }
  getY(): T {
    return this.y;
  }
}

// 3. 独立的命名空间承载FooBar的静态方法
namespace FooBar {
  export function create<T>(x: T, y: T): FooBar<T> {
    return new _FooBar(x, y);
  }
}

这样做的好处：

• 类型系统会自动识别FooBar<T>是Bar<T>的子类型，比如你可以把FooBar<string>实例赋值给Bar<string>类型的变量；
• Bar.create和FooBar.create完全独立，不会互相继承或冲突；
• 当你给Bar<T>接口添加新属性时，_Bar<T>和_FooBar<T>都会被TypeScript强制要求实现该属性，保证一致性；
• 不存在不必要的静态成员继承（比如FooBar不会拿到Bar的其他静态方法）。

方案二：贴近原生JavaScript的实现 #

如果你想完全复刻你给出的原生JS写法，TypeScript也能通过构造函数+接口+声明空间实现：

// 1. 定义Bar<T>的实例契约
interface Bar<T> {
  readonly x: T;
  getX(): T;
}

// 2. 实现Bar的构造函数和原型方法
function Bar<T>(this: Bar<T>, x: T) {
  this.x = x;
}
Bar.prototype.getX = function<T>(this: Bar<T>): T {
  return this.x;
};

// 3. 声明Bar的静态方法类型，然后挂载实现
declare namespace Bar {
  export function create<T>(x: T): Bar<T>;
}
Bar.create = function<T>(x: T): Bar<T> {
  return new (Bar as any)(x);
};

// ------------------------------
// 处理FooBar<T>
// ------------------------------

// 1. FooBar<T>继承Bar<T>的实例契约
interface FooBar<T> extends Bar<T> {
  readonly y: T;
  getY(): T;
}

// 2. 实现FooBar的构造函数，通过call调用Bar的构造函数
function FooBar<T>(this: FooBar<T>, x: T, y: T) {
  Bar.call(this, x);
  this.y = y;
}

// 3. 原型链继承，保证实例方法的复用
FooBar.prototype = Object.create(Bar.prototype);

// 4. 添加FooBar自己的实例方法
FooBar.prototype.getY = function<T>(this: FooBar<T>): T {
  return this.y;
};

// 5. 声明并实现FooBar的静态方法
declare namespace FooBar {
  export function create<T>(x: T, y: T): FooBar<T>;
}
FooBar.create = function<T>(x: T, y: T): FooBar<T> {
  return new (FooBar as any)(x, y);
};

这种写法几乎和你的原生JS代码一一对应，同时通过TypeScript的接口和声明空间补上了强类型支持。

为什么你的前两次尝试失败？ #

• 第一次尝试：你同时定义了interface Bar<T>和class Bar，TypeScript会尝试合并这两个声明，但类的类型参数和接口的类型参数必须完全一致，所以抛出了类型参数不匹配的错误。
• 第二次尝试：TypeScript类的继承会同时继承实例和静态成员，所以FooBar的静态类会继承Bar的静态方法，导致create方法签名冲突，还继承了不需要的barOnly方法。

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