Typescript: Property 'name' does not exist on type 'Employee[]'-CodePudding

I am completely new to typescript, and I'm stumped by this error message: Property 'name' does not exist on type 'Employee[]' Could someone please point out where I'm not applying the "name" type within the Employee array? Thanks.

interface Employee {
  id: number;
  name: string;
  title: string;
}

var employees: Employee[] = [
  { id: 0, name: "Franklin", title: "Software Enginner" },
  { id: 1, name: "Jamie", title: "Human Resources" },
  { id: 2, name: "Henry", title: "Application Designer" },
  { id: 3, name: "Lauren" title: "Software Enginner" },
  { id: 4, name: "Daniel" title: "Software Enginner 2" },
];

function fetchEmployeeName(id : number) {
  var employee = employees.filter(
    (employee) => employee.id === id
  );

// The error occurs when I try to return a "name" under an employee that matched by id.
  return employee.name;
}

console.log("Got Employee: "), fetchEmployeeName(3));

CodePudding user response：

filter returns a new array containing all matching items:

[1, 2, 3].filter(i => i === 4)

The above will return an empty array.

What you want to use is find, which will return a single matching item or undefined.

Modify the fetchEmployeeName function to use find:

function fetchEmployeeName(id : number): string | null {
  var employee = employees.find(
    (employee) => employee.id === id
  );

  if (employee === undefined) return null;

  return employee.name;
}

CodePudding user response：

Try using find instead of filter. Filter returns an array. Find returns a single object. Next time, if using vscode, hover over employee on the first line of fetchEmployeeName, and check its type. Intellisense in vscode will point out to you that employee is clearly an array.

CodePudding user response：

I highly recommend you to use find instead of filter, but if you really want to stick to your approach, you will have to access the only member in the employees array though its index (filter returns an array filled with the elements that meet the specified condition). E.G.:

return employee[0].name

Again, you can solve this particular issue by using filter, since it returns a single element you access without the need of an index (this will allow you to leave the return statement as it is).

CodePudding user response：

there you have it, so what happened, your filter is returning to a new "Employee" that is not defined as an object,my advise is to always try to use pure functions and understand what your return is

interface Employee {
    id: number;
    name: string;
    title: string;
  }
  
  var employees: Employee[] = [
    { id: 0, name: "Franklin", title: "Software Enginner" },
    { id: 1, name: "Jamie", title: "Human Resources" },
    { id: 2, name: "Henry", title: "Application Designer" },
    { id: 3, name: "Lauren", title: "Software Enginner" },
    { id: 4, name: "Daniel", title: "Software Enginner 2" },
  ];
  

  function fetchEmployeeName (id:number, employees: Employee[]){
      let employee = null
      for (let i = 0, j = employees.length ; i < j; i  ) {
          if (employees[i].id === id) {
              employee = employees[i].name 
          }
      }
      return employee
  }

  console.log(`Got employee 3: ${fetchEmployeeName(3,employees)}`);