How to select the type of an object from an array typescript

Question

I have a generated type like this : (I can't manipulate it)

type Users = Array<
| {
  typename: "personal";
  firstName: string;
  lastName: string;
}
| {
  typename: "socialMedia";
  userName: string;
  email: string;
}
>;

Now i want to write a new type that refers to Users > typename socialMedia

{
  typename: "socialMedia";
  userName: string;
  email: string;
}

I want the new type to be the code above

type userSocialMediaInfo = ?????

is this possible?

Your question is a bit unclear. You want a type that corresponds to an element with typename: "socialMedial" What is wrong with the type you have given as an example? Does it not work for some reason? — Matt Morgan
– Matt Morgan, Commented Oct 8, 2022 at 12:16
@MattMorgan I want the new type to refer to the original type and I don't want to manually write the new type because the original type may change in the future and I don't want to change it again every time the original type changes. — Sina
– Sina, Commented Oct 8, 2022 at 12:25

Abdellah Hariti · Accepted Answer · 2022-10-08 12:33:40Z

3

It would be better to construct the Users type from two different types, this way you have access to the types without deriving, for example:

type Personal = {
  typename: "personal";
  firstName: string;
  lastName: string;
};

type SocialMedia = {
  typename: "socialMedia";
  userName: string;
  email: string;
};

type Users = Array<Personal| SocialMedia>;

Otherwise if you can't control the Users type, you can access its underlying variants by indexing it with number, and then intersecting the type with the relevant discriminator (playground):

type Users = Array<
| {
  typename: "personal";
  firstName: string;
  lastName: string;
}
| {
  typename: "socialMedia";
  userName: string;
  email: string;
}
>;

type userSocialMediaInfo = Users[number] & {  typename: "socialMedia";};

answered Oct 8, 2022 at 12:33

Abdellah Hariti

8175 silver badges10 bronze badges

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

Comments

k.tten · Accepted Answer · 2022-10-08 13:10:30Z

0

This is possible with the Extract built-in type. First, you want to "unwrap" the array into the union. That's possible by indexing into it with number:

Users[number]

I'm using number in case the type could be at tuple. After we get the union, we can then use Extract. Here is what Extract does:

Constructs a type by extracting from Type all union members that are assignable to Union.

That should mean if we use:

Extract<Users[number], { typename: "socialMedia" }>

we'll get only the members of the union that have a type name of "socialMedia", since those are the only members that are assignable to { typename: "socialMedia" }.

Playground

answered Oct 8, 2022 at 13:10

k.tten

26.8k4 gold badges34 silver badges63 bronze badges

Comments

gloccck18 · Accepted Answer · 2022-10-08 12:40:19Z

0

Short answer

type UserSocialMediaInfo = Extract<Users[0], { typename: "socialMedia" }>

Explanation

Users[0] - Take the first type from array.

Extract<...> - Extract type from union which is assignable to { typename: "socialMedia" }.

Better alternative

It would be more correct to adjust type generation logic to generate types separately.

type PersonelInfo = {
    typename: "personal";
    firstName: string;
    lastName: string;
}

type SocialMediaInfo = {
    typename: "socialMedia";
    userName: string;
    email: string;
}

type Users = Array<PersonelInfo | SocialMediaInfo>;

answered Oct 8, 2022 at 12:40

gloccck18

1161 silver badge6 bronze badges

3 Comments

k.tten Over a year ago

Users[number] would be better in case the type is a tuple.

gloccck18 Over a year ago

In this particular case it is a multi type array and there is no any difference between T[0] and T[number].

k.tten Over a year ago

In case the type changes and it's a tuple. I'm just being safe. There is no difference anyways, so might as well use the one that doesn't need changing if the type changes, right :)

Collectives™ on Stack Overflow

How to select the type of an object from an array typescript

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related