Typescript how to assign generics to generic variable field

Question

How do I correctly assign a generic class field to a generic local field?

For example I have this generic interface implemented in a generic class

export interface TableBoxProps<T> {
   getDataSource: <T> () => T[];
}

class Container<T> extends React.Component<TableBoxProps<T>, any>{ ... }

and somewhere I have a function where I want to get an entry from the datasource e.g. like this

 private onCellClick = (row: number, column: number) => {
      let entity:T = this.props.getDataSource()[row]; // error
   }

I get the error with the above

[ts] Type '{}' is not assignable to type 'T'

What do I have to change that I can use let entity:T? It works fine with the type any, but I don't want to do that.

amik · Accepted Answer · 2020-06-02 11:17:40Z

2

Your definition of TableBoxProps<T> is wrong. In getDataSource: <T> () => T[];, the <T> shouldn't be here as it declares another generic type T that shadows the TableBoxProps<T>. You actually declared a generic function in a generic interface.

What you have written is equal to:

export interface TableBoxProps<T1> {
   getDataSource: <T2> () => T2[];
}

And correct solution should be

export interface TableBoxProps<T> {
   getDataSource: () => T[];
}

edited Jun 2, 2020 at 11:17

answered Aug 7, 2019 at 18:08

amik

6,0005 gold badges41 silver badges65 bronze badges

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

2 Comments

Arel Sapir Over a year ago

is this expression export interface TableBoxProps<T1> { getDataSource<T2>: () => T2[]; } equal to this expression? export interface TableBoxProps<T1> { getDataSource: <T2> () => T2[]; }

amik Over a year ago

@ArelSapir nope, the first one is not even valid code. Interface members cannot be generic, they may only contain a generic function.

James Monger · Accepted Answer · 2017-03-29 23:01:00Z

1

This is caused because this.props.getDataSource()[row] is of type {}. You need to cast it to T:

let entity: T = (this.props.getDataSource()[row] as T);

You need to use as T rather than <T> because you are using React with JSX.

edited Mar 29, 2017 at 23:01

answered Feb 17, 2017 at 13:31

James Monger

10.8k9 gold badges65 silver badges99 bronze badges

8 Comments

Murat Karagöz Over a year ago

Thx. Since I am using ReactJs I had to cast it with this.props.getDataSource()[row] as T.

Murat Karagöz Over a year ago

But can you explain why I have to cast it to T when I am in the generic class anyways?

James Monger Over a year ago

Please show your class definition - it may be in there

amik Over a year ago

This is actually only a workaround that hides the actual problem which I've described in stackoverflow.com/a/57400076/1660584 .

NullVoxPopuli Over a year ago

but, if T is defined in a class it would be. nevermind

|

Collectives™ on Stack Overflow

Typescript how to assign generics to generic variable field

2 Answers 2

2 Comments

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related