How to get property of generic type?

Question

I have an abstract class, in the method of which I am passing an item of a generic type. Next, I need to get the property of this item, how to do it correctly?

export abstract class BaseService<T> {
    ...
    public saveItem(item: T) {
        ...
        if (item.id <=== here I got error ) {
        }
        ...
    }

    export class ClusterItem {
        id: number;
        ...
     }

    export class ClustersService extends BaseService<ClusterItem> {
        ...
    }

You could use [Type Guards](https://www.typescriptlang.org/docs/handbook/advanced-types.html) to check for a type prior to attempting to accessing certain properties or accessing via bracket notation `item['id']` — Alexander Staroselsky, Sep 07 '17 at 16:00
Perhaps `T extends { id: number }`, to constrain the generic type to things that have that property. — jonrsharpe, Sep 07 '17 at 16:07

score 32 · Accepted Answer · edited Jan 28 '20 at 20:55

Your code assumes that every type T used with your class may have an id property.

As pointed out by Jon Sharpe in his comment on your question, the correct approach, both in terms of type safety and expressiveness, is to declare this assumption as a type constraint, making it explicit and known to the type checker.

The way to do this is to use the type constraint syntax on your generic type parameter.

For example, you could write

export interface MayHaveId {
  id?: number; // you can use any type, number is just an example
}

export abstract class BaseService<T extends MayHaveId> {
  saveItem(item: T) {
    if (item.id !== undefined) {
      console.log(item.id);
    }
  }
}

Here we've defined an interface to make the code more readable, but a type literal would work as well.

Note that the id property is declared optional since your logic does not require it to have a value.

If you only intend for the base class to be used with type arguments which do have an id then you should make the property required. This will make the code easier to understand and will catch more errors at compile time by ensuring that it is only used with such types in the first place.

Shahbaaz asked about dynamic properties in a comment.

We can define a type with a dynamic property by using a parametric generic type

type WithProperty<K extends string, V = {}> = {
  [P in K]: V
}

We can consume this type

function withProperty<T, K extends string, V> (x: T, properties: WithProperty<K, V>) {
  return Object.assign(x, properties);
}

What if the the requirement is that the property name will be sent along with the object i.e, the property name is dynamic — Shahbaaz, Mar 14 '18 at 05:21

Surender Khairwa · Answer 2 · 2022-07-11T12:35:50.083

0

EDITED

For Typescript you can use:

if("id" in item) {
  ...
 }

Ref: Why does Typescript treat `object.hasOwnProperty("key")` as essentially different from `"key" in object`

For JS you can use item.hasOwnProperty('id') before trying to fetch value.

Ref : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty

edited Jul 11 '22 at 12:35

answered Sep 07 '17 at 19:02

Surender Khairwa

601
4
17

This will not work with typescript. – DeltaTango Jul 03 '22 at 20:34
@DeltaTango it does work with TypeScript. It just solves a different problem which both JavaScript and TypeScript code also handles regularly. – Aluan Haddad Jul 05 '22 at 18:36
No, it does not. The error will continue to be there because the interface/type does not contain it. – DeltaTango Jul 05 '22 at 21:23

score 0 · Answer 3 · answered Nov 15 '22 at 10:52

Just extend the generic type parameter as (the same with methods):

const fn = <T extends { id: T['id']}>(items: T[]) => ...

And example usage:

const ids = <T extends { id: T['id']}>(items: T[]) => items.map((item) => item.id);

const numbers = ids([{ id: 1 }, { id: 2 }, { id: 3 }]);
const strings = ids([{ id: 'a' }, { id: 'b' }, { id: 'c' }]);

// type check error:
const typeError = ids<{ id: number }>([{ id: "46100709" }]);

How to get property of generic type?

3 Answers3