How to define interface for complex properties in typescript angular

Question

I have employees array of objects in my Angular App. I need to put type for it instead of any, so i have defined interface. But i get the error as below.

ERROR in src/app/newComp/employee/employee.component.ts(11,3): error TS2322: Type '{ empID: string; name: string; gender: string; salary: number; DOB: string; }[]' is not assignable to type 'Employees'. Property 'empID' is missing in type '{ empID: string; name: string; gender: string; salary: number; DOB: string; }[]'. src/app/newComp/employee/employee.component.ts(20,7): error TS2322: Type '{ empID: string; name: string; gender: string; salary: number; DOB: string; }[]' is not assignable to type 'Employees'. Property 'empID' is missing in type '{ empID: string; name: string; gender: string; salary: number; DOB: string; }[]'.

How to solve this? Here is my whole code.

export class EmployeeComponent {
employees: Employees;
constructor() {
this.employees = [
{ empID: 'empid101', name: 'Jhon', gender: 'male', salary: 1200, DOB: '12/24/2016' },
{ empID: 'empid102', name: 'Nancy', gender: 'female', salary: 2445.23, DOB: '4/2/2016' },
{ empID: 'empid103', name: 'Julie', gender: 'female', salary: 5000.23, DOB: '4/14/2016' },
{ empID: 'empid104', name: 'Brito', gender: 'male', salary: 4352, DOB: '5/12/2016' }
];
}
/* tslint:disable */
refreshTheData(): void {
  this.employees = [
    { empID: 'empid101', name: 'Jhon', gender: 'male', salary: 1200, DOB: '12/24/2016' },
    { empID: 'empid102', name: 'Nancy', gender: 'female', salary: 2445.23, DOB: '4/2/2016' },
    { empID: 'empid103', name: 'Julie', gender: 'female', salary: 5000.23, DOB: '4/14/2016' },
    { empID: 'empid104', name: 'Brito', gender: 'male', salary: 4352, DOB: '5/12/2016' },
    { empID: 'empid105', name: 'Clark', gender: 'male', salary: 7543, DOB: '2/15/1990' }   ];    }



 interface Employees{
  empID: string,
  name: string,
  gender: string,
  salary: number,
  DOB: Date
}
interface Employees extends Array<Employees>{}

Tibin Thomas · Accepted Answer · 2018-10-24 10:34:15Z

1

Change line number 2.

employees: Employees; to employees: Employees[];

See this for sample code

import { Component } from '@angular/core';

 interface Employees {
  empID: string;
  name: string;
  gender: string;
  salary: number;
  DOB: Date
}

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
name = 'Angular';
employees: Employees[];
constructor() {

this.employees = [
{ empID: 'empid101', name: 'Jhon', gender: 'male', salary: 1200, DOB: new Date('12/24/2016') }
];

  }
}

edited Oct 24, 2018 at 10:34

answered Oct 24, 2018 at 10:10

Tibin Thomas

7826 silver badges12 bronze badges

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

3 Comments

Daniel Habenicht Over a year ago

To avoid further confusion, you should also consider renaming the interface Employees to Employee as the interface describes only one Employee.

L.A Over a year ago

the clearest way for me to do is have an Employee interface and than a type like type Employees = Employee[]

student18 Over a year ago

renaiming to Employee can be seen as a bad practise too as for example in .NET the best practise for modelName would be Employees

Collectives™ on Stack Overflow

How to define interface for complex properties in typescript angular

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related