typescript: How to write an arrow function with type declaration?

Question

I'm trying to do the equivalent of the following JavaScript code in typescript:

  users.map( item => (
    { name: item.name,
      email: item.email,
      ...item.user
    }
  ));

So, users is like:

users = [
  {
    name: "John",
    email: "john@msn"
    user: {
            age: 56,
            gender: "Male", 
            address: "...", 
            sport: "basketball"
          }
  }, 
  ...
  
]

I'm trying to convert it to:

users = [
  {
    name: "John",
    email: "john@msn",
    age: 56,
    gender: "Male", 
    address: "...", 
    sport: "basketball"
  }, 

  ...
  
]

I thought I was supposed to declare the type of the parameter directly after the parameter and the type of the return value before the arrow:

  users.map( (item:object):object => (
    { name: item.name,
      email: item.email,
      ...item.user
    }
  ));

But this does not work.

Any hints?

Alireza Ahmadi · Accepted Answer · 2021-08-04 04:59:36Z

2

You can use map in typescript without any type like in JavaScript But if you want to use type, you need to create an interface. Note that object does not have property name , email and other properties, so if you use object the ts compiler raise an error:

Try this one:

interface personlaInfo{
age: number,
gender: string, 
address: string, 
sport: string
}

interface user{
  name:string,
  email: string
  personlaInfo:personlaInfo;
}

var users : Array<user> = [
  {
    name: "John",
    email: "john@msn",
    personlaInfo: {
            age: 56,
            gender: "Male", 
            address: "...", 
            sport: "basketball"
          }
  }  
]

 var f = users.map( (item:user) => (
    { name: item.name,
      email: item.email,
      ...item.personlaInfo
    }
  ));

PlaygroundLink

answered Aug 4, 2021 at 4:59

Alireza Ahmadi

10.2k8 gold badges28 silver badges65 bronze badges

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

Comments

otto-null · Accepted Answer · 2021-08-04 04:57:19Z

1

You don't need the second object, in this case TypeScript can infer it, like this:

  users.map((item:object) => (
    { name: item.name,
      email: item.email,
      ...item.user
    }
  ));

answered Aug 4, 2021 at 4:57

otto-null

7725 silver badges19 bronze badges

Comments

kup · Accepted Answer · 2021-08-04 05:09:31Z

You need to define interfaces for your data type and use them in map like below:

interface MyUser {
    name: string;
    email: string;
    age: number;
    gender: string;
    address: string;
    sport: string;
}

interface UserInfo {
    age: number;
    gender: string;
    address: string;
    sport: string;
}


interface User {
    name: string;
    email: string;
    user: UserInfo
}


const users:Array<User> = [
    {
      name: "John",
      email: "john@msn",
      user: {
              age: 56,
              gender: "Male", 
              address: "...", 
              sport: "basketball"
            }
    }, 
    {
        name: "John1",
        email: "john1@msn",
        user: {
                age: 26,
                gender: "Male", 
                address: "...", 
                sport: "basketball"
              }
      }, 
  ];

const my_users = users.map( (item:User):MyUser => (
    { name: item.name,
      email: item.email,
      ...item.user
    }
  ));

  console.log(my_users)

Collectives™ on Stack Overflow

typescript: How to write an arrow function with type declaration?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related