How to Implement an interface with conditional types in 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.

Type number is not assignable to type ValueType extends Content ? number : string

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

Given that ValueType is a type-parameter, why aren't you using it at all inside ValueNode<...>? — Dai
– Dai, Commented Dec 11, 2021 at 15:00
BTW, Error is a built-in type, so you should give your interface Error a distinct name, like interface MyError or so. — Dai
– Dai, Commented Dec 11, 2021 at 15:14
Typescript is great for making JavaScript into c#. And, that can be useful with node. JavaScript doesn't have "types" in the same way. @dai edited the error to make it more transparent. — wahwahwah
– wahwahwah, Commented Dec 11, 2021 at 15:14
@wahwahwah Pardon? None of what you said has any relevance to the problem at-hand. — Dai
– Dai, Commented Dec 11, 2021 at 15:16
Looks like class ValueNode implements TreeNode<Content> is what you're looking for.. — Aleksey L.
– Aleksey L., Commented Dec 11, 2021 at 15:19

jsejcksn · Accepted Answer · 2021-12-11 16:58:56Z

2

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;
  }
}

edited Dec 11, 2021 at 16:58

answered Dec 11, 2021 at 15:23

jsejcksn

34.6k5 gold badges55 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Dai Over a year ago

I think the OP still intends for ValueNode to be an open generic type though...

jsejcksn Over a year ago

@Dai You mean like this?

Dai Over a year ago

Almost, but your class ValueNode needs to constrain T to ContentValue and disallow ErrorValue.

lishaak Over a year ago

@jsejcksn Yes! I have a typo in the original question. The value inside TreeNode should be generic. Your example works and makes sense. But I don't understand why is does not work, when it looks like this

jsejcksn Over a year ago

@lishaak I've updated my answer. (It's not clear to me why the TreeNode interface is needed if the single method implementation is going to be annotated anyway.) Do one of those variations work for you?

Collectives™ on Stack Overflow

How to Implement an interface with conditional types in TypeScript

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related