[Typescript] Generics in Type Arguments

Here we have a Component class that can be passed in TProps.

Inside of the constructor it assigns props to this, and provides a getProps method that can be called that will extract those props out:

export class Component<TProps> { private props: TProps; constructor(props: TProps) { this.props = props; } getProps = () => this.props; }

export class Component<TProps> {
  private props: TProps;

  constructor(props: TProps) {
    this.props = props;
  }

  getProps = () => this.props;
}

This generic class works as expected.

The problem comes when we try to clone the component using the cloneComponent function:

const cloneComponent = (component: unknown) => { return new Component(component.getProps()); };

const cloneComponent = (component: unknown) => {
  return new Component(component.getProps());
};

When creating a clonedComponent by passing a Component instance, the type is being returned as an any type:

const component = new Component({ a: 1, b: 2, c: 3 }); // hovering shows `const: clonedComponent: Component<any> const clonedComponent = cloneComponent(component);

const component = new Component({ a: 1, b: 2, c: 3 });

// hovering shows `const: clonedComponent: Component<any>
const clonedComponent = cloneComponent(component);

Notice also that there is an error inside of cloneComponent that "Object is of type 'unknown'".

 

Solution:

const cloneComponent = <T>(component: Component<T>) => {
  return new Component(component.getProps());
};

const component = new Component({ a: 1, b: 2, c: 3 });
//     ^?  Component<{ a: number; b: number; c: number; }>
const clonedComponent = cloneComponent(component);
//     ^?  Component<{ a: number; b: number; c: number; }>
const result = clonedComponent.getProps();
//     ^? const result: { a: number; b: number; c: number; }