如何在 TypeScript 中实现具有条件类型的接口

Question

On a personal project I am facing an issue with TypeScript conditional types. I have basic understanding of conditional types from the TypeScript docs. I would expect the setup below to work but it gives a type error.

Basicaly I am trying to define an interface for a tree node which is loaded from the disk. This means that some of the nodes may not be correctly loaded because of missing files etc. So any node implementation either contains Content or Error .

interface Content {
  data: number;
}

interface Error {
  code: string;
}

export interface TreeNode<T extends Content | Error> {
  getValue(): T extends Content ? number : string;
}

class ValueNode<ValueType extends Content> implements TreeNode<ValueType> {
  private readonly value: number;
  public constructor(value: number) {
    this.value = value;
  }
 
  public getValue(): number {
    return this.value;
  }
}

I would expect that the implementation of the getValue method would be allowed to return string since the interface is implemented with type extending Content . But I get this type error intead:

• Property getValue in type ValueNode<ValueType> is not assignable to the same property in base type TreeNode<ValueType> .
  • Type () => number is not assignable to type () => ValueType extends Content? number: string () => ValueType extends Content? number: string .
    • Type number is not assignable to type ValueType extends Content? number: string ValueType extends Content? number: string

Cleary, I am doing it the wrong way. What would be the correct way to achieve my goal?

Answer 1

As @Dai pointed out , it's better not to shadow the built-in Error type (so that you can use it in your module).

Here are two alternatives:

TS Playground link

interface ContentValue {
  data: number;
}

interface ErrorValue {
  code: string;
}

export interface ValueGetter<T> {
  getValue(): T;
}

class ValueNode<T extends ContentValue> implements ValueGetter<ContentValue['data']> {
  public constructor(private readonly value: T) {}
 
  public getValue(): number {
    return this.value.data;
  }
}

// or
class SimpleValueNode<T extends ContentValue> {
  public constructor(private readonly value: T) {}
 
  public getValue(): number {
    return this.value.data;
  }
}