如何递归使用Typescript泛型？

Question

I am having an issue using recursive generics.

I created an interface using generics. The idea is a branch can have many child branches which are also generics. This is my code ( I cut it down for posting)

import Contact from 'Business/Models/Contact';
import Office from 'Business/Models/Office';

export interface BranchInterface<T> {
    children: Array<BranchInterface<T>>;
    record: T;
}

export class Branch<T> implements BranchInterface<T> {

    public children: Array<BranchInterface<T>> = [];

    constructor(public record: T) {}
}


const newOffice = new Office();

const rootBranch = new Branch<Office>(newOffice);

rootBranch.children = Array<Branch<Contact>>(); << is the issue

The issue is that when I construct an Office branch, the children array is being constructed as Office type.

This means when I try to assign an array of Contact branches as the children of the Office branch typescript throws the following error;

Type 'Branch<Contact>[]' is not assignable to type 'Branch<Office>[]'...

The reason for doing this is because the type of branches are unknown and I don't really want to use any either if I can avoid it.

So, How would I resolve this?

Answer 1

It seems like you may be using Generics where simple inheritance would do. If all you need is for an office or a contact branch to have a list of branch children, then the following code works using only a generic Array.

export class Branch {
  children: Array<Branch>;
  constructor(){
    this.children = new Array<Branch>();
  }
}

class Office extends Branch {}
class Contact extends Branch {}

const newOffice = new Office();
newOffice.children.push(new Contact());

However if you are intent on using generics, you need 2 generic types in your Branch class to decouple the record and children types, like such:

export class Branch<T, U> {

  public children: U[];

  constructor(public record: T) {
    this.children = [];
  }
}

class Office {};
class Contact {};

const newOffice = new Office();

const rootBranch = new Branch<Office, Contact>(newOffice);

rootBranch.children = new Array<Contact>();

Answer 2

So, if you really want to strongly type Branch , you need to give it a type corresponding to all the nested levels of children . That would look like a list or tuple of types. Since TypeScript 3.0 introduced tuple types in rest/spread expressions , you can kind of express this, but I don't know if it's worth it to you.

First, let's define the type functions Head and Tail which split a tuple type into its first element and a tuple of the rest of the elements:

type HeadTail<L extends any[]> = 
  ((...args: L) => void) extends ((x: infer H, ...args: infer T) => void) ? [H,T] : never
type Head<L extends any[]> = HeadTail<L>[0];
// e.g., Head<[string, number, boolean]> is string
type Tail<L extends any[]> = HeadTail<L>[1]; 
// e.g., Tail<[string, number, boolean]> is [number, boolean]

Now we can define BranchInterface or Branch to take a tuple of types like this:

export interface BranchInterface<T extends any[]> {
  children: Array<BranchInterface<Tail<T>>>
  record: Head<T>;
}

export class Branch<T extends any[]> {
  public children: Array<BranchInterface<Tail<T>>> = [];
  constructor(public record: Head<T>) { }
}

Assuming you know that you want the top level to be an Office and the next level down to be a Contact , then you can define your list of types as [Office, Contact] and see if it works:

const rootBranch = new Branch<[Office, Contact]>(newOffice);
const anOffice = rootBranch.record; // Office
const aContact = rootBranch.children[0].record; // Contact

Of course if you traverse past that, you find out what Head<[]> is (that implementation gives {} , I guess):

const whoKnows = rootBranch.children[0].children[0].record; // {}

If you want to make the layers below Contact be something like never instead (because you will never traverse down that far), you can use a rest tuple like this:

const rootBranch = new Branch<[Office, Contact, ...never[]]>(newOffice);
const anOffice = rootBranch.record; // Office
const aContact = rootBranch.children[0].record; // Contact
const aNever = rootBranch.children[0].children[0].record; // never
const anotherNever = rootBranch.children[0].children[0].children[0].record; // never

Note that this requires you to explicitly specify the type parameter T when constructing a Branch , since the compiler cannot infer the type from the argument:

const oops = new Branch(newOffice); 
oops.record; // any, not Office

Well, it works. Up to you if you want to go that way. Hope that helps; good luck!