Angular2 Error 'Argument of type '{}' is not assignable...'

Question

I'm trying to practice this example plnkr this example works well but in trying to do something similar in the code below

and I'm getting this error:

Argument of type '{}' is not assignable to parameter of type 'string'. (parameter) term: {}

This code is not equal to 100% of plunker, but not if it does not work because I'm doing something wrong when used in the code below, or something changed in Angular2, or some part of angular2.

If anyone can guide me.

---

app.component.ts

import { Component } from 'angular2/core';
import { NgFor } from 'angular2/common';

//inicio test Servicios ect
import {Control} from 'angular2/common';
import {JSONP_PROVIDERS} from 'angular2/http';
import {WikipediaService} from './servicioWiki';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
import 'rxjs/add/operator/switchMap';
//fin test Servicios ect

@Component({

    selector: "appinit",
    directives:[NgFor,WikipediaService, JSONP_PROVIDERS],
    template: `<div *ngFor="#movie of movies">
                   <h1> {{ movie }} Hello Angular 2</h1>
               </div>
               <div>
                <h2>Wikipedia Search</h2>
                    <input type="text" [ngFormControl]="term"/>
                    <ul>
                        <li *ngFor="#item of items | async">{{item}}</li>
                    </ul>
               </div>`   
})

export class AppComponent {

    movies: Array<any>;
    items: Observable<Array<string>>;
    term = new Control();

    constructor(private wikipediaService: WikipediaService){
        this.movies = ["movie1"];

        this.items = this.term.valueChanges
                     .debounceTime(400)
                     .distinctUntilChanged()
                     .switchMap(term => this.wikipediaService.search(term));
    }    
}

servicioWiki.ts

import {Injectable} from 'angular2/core';
import {URLSearchParams, Jsonp} from 'angular2/http';

@Injectable()
export class WikipediaService {
  constructor(private jsonp: Jsonp) {}

  search (term: string) {
    var search = new URLSearchParams()
    search.set('action', 'opensearch');
    search.set('search', term);
    search.set('format', 'json');
    return this.jsonp
                .get('http://en.wikipedia.org/w/api.php?callback=JSONP_CALLBACK', { search })
                .map((request) => request.json()[1]);
  }
}

package.json info

..//
"license": "ISC",
  "dependencies": {
    "angular2": "2.0.0-beta.7",
    "systemjs": "0.19.22",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.2",
    "zone.js": "0.5.15"
  },
  ..//

---

in this line of code, in file app.component.ts, -> .switchMap(term => this.wikipediaService.search(term));

term ->

Argument of type '{}' is not assignable to parameter of type 'string'. (parameter) term: {}

Answer 1

In fact, you need to specify of type for the parameter of the callback you provide to the switchMap operator:

constructor(private wikipediaService: WikipediaService) {
  this.movies = ["movie1"];

  this.items = this.term.valueChanges
        .debounceTime(400)
        .distinctUntilChanged()
        .switchMap((term:string) => this.wikipediaService.search(term)); // <------
}

This will remove the error at compilation time.