title: Angular 4: 'Property 'includes' is missing in type' for custom data type
body: <p>I'm seeing the error:</p>
  
  <pre><code>/root/simutronx/simutron-app/src/app/app.component.ts (45,5): Type
  'Promise&lt;OneDSlider[]&gt;' is not assignable to type 'OneDSlider[]'. Property
  'includes' is missing in type 'Promise&lt;OneDSlider[]&gt;'.
  </code></pre>
  
  <p>And this in the console:</p>
  
  <pre><code>/root/simutronx/simutron-app/src/app/mock-simutronx.ts (5,64): 
  Type '{ id:    number; name: string; value: number; quantity: number; }[]'
  is not assignable to type 'OneDSlider[]'.
  Type '{ id: number; name: string; value: number; quantity: number; }' is
  not assignable to type 'OneDSlider'.
  Object literal may only specify known properties, and 'quantity' does not
  exist in type 'OneDSlider'.  vendor.bundle.js:29679:4
  </code></pre>
  
  <p>After creating a data service. Model (simutronx.ts):</p>
  
  <pre><code>export class OneDSlider {
    id: number;
    name: string;
    value: number;
    quantity: number;
  }
  </code></pre>
  
  <p>As you can see above the quantity property is there on the data model. (This didn't contain a quantity property before it does now, and I have restarted the server process since).</p>
  
  <p>Data service (simutronx.service.ts):</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  
  import { OneDSlider, TwoDSlider, Switch, Output } from './simutronx';
  import { ONEDSLIDERS, TWODSLIDERS, SWITCHES, OUTPUTS } from './mock-simutronx';
  
  @Injectable()
  export class SimXService {
    getOneDSliders(): Promise&lt;OneDSlider[]&gt; {
      return Promise.resolve(ONEDSLIDERS);
    }
    getTwoDSliders(): Promise&lt;TwoDSlider[]&gt; {
      return Promise.resolve(TWODSLIDERS);
    }
    getSwitches(): Promise&lt;Switch[]&gt; {
      return Promise.resolve(SWITCHES);
    }
    getOutputs(): Promise&lt;Output[]&gt; {
      return Promise.resolve(OUTPUTS);
    }
  }
  </code></pre>
  
  <p>Mock data (mock-simutronx.ts):</p>
  
  <pre><code>import { UIConstructor, OneDSlider, TwoDSlider, Switch, Output } from './simutronx';
  
  export const ONEDSLIDERS: OneDSlider[] = [
    { id: 1, name: 'Shipping Container Purchase Cost', value: 7, quantity: 9 },
    { id: 2, name: 'Container Rental Costs', value: 99, quantity: 15 }
  ];
  
  export const TWODSLIDERS: TwoDSlider[] = [
    { id: 1, name: 'Available Shipping Containers', max_value: 99, min_value: 0, quantity: 3 },
    { id: 2, name: 'Purchasing Staff Available', max_value: 82, min_value: 0, quantity: 5 }
  ];
  
  export const SWITCHES: Switch[] = [
    { id: 1, name: 'Min/Max', state: true }
  ];
  
  export const OUTPUTS: Output[] = [
    { id: 1, name: 'Profit', value: 1000 }
  ];
  </code></pre>
  
  <p>And my app.component.ts:</p>
  
  <pre><code>import { Component } from '@angular/core';
  
  import { UIConstructor, OneDSlider, TwoDSlider, Switch, Output } from './simutronx';
  import { ONEDSLIDERS, TWODSLIDERS, SWITCHES, OUTPUTS } from './mock-simutronx';
  import { SimXService } from './simutronx.service';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    providers: [SimXService]
  })
  
  export class AppComponent {
    title = 'SimutronX';
    onedsliders = ONEDSLIDERS;
    twodsliders = TWODSLIDERS;
    switches = SWITCHES;
    outputs = OUTPUTS;
    valuesinput = false;
    simXcreated = false;
  
    constructor(private simXService: SimXService) { }
  
    coefficients: UIConstructor = {
      id: 1,
      title: 'coefficients',
      value: 2
    }
    constraints: UIConstructor = {
      id: 1,
      title: 'constraints',
      value: 2
    }
  
    inputNums(): void {
      this.valuesinput = true;
    }
  
    createSimX(): void {
      this.simXcreated = true;
    }
  
    getOneDSliders(): void {
      this.onedsliders = this.simXService.getOneDSliders();
    }
    getTwoDSliders(): void {
      this.twodsliders = this.simXService.getTwoDSliders();
    }
  
  }
  </code></pre>
  
  <p>I have searched and found this similar question: <a href="https://stackoverflow.com/questions/43483848/angular-4-error-property-includes-is-missing-in-type-any">Angular 4 Error : Property &#39;includes&#39; is missing in type &#39;() =&gt; any&#39;</a> but though the error message is similar, the cause of the problem does not appear to be the same. I have also double-checked the data types and it does seem that the model and the mock data are the same...</p>
  
  <p>What am I missing here?</p>