[Angular][TS][エラー]期待する戻り値の型の不一致「Type 'X' is not assignable to type'Y'」

やりたいこと

オブジェクトのプロパティに値を代入したい。

エラー内容

文字列を、AppData型のurlプロパティに代入したいが、下記のように型エラーとなった。

export interface AppData{
  url: string;
}

private appUrl: AppData = { url: '' };

setApi(): Observable<AppData> {
  return this.httpClient.get<AppData>('XXXXXX').pipe(
    map(res => this.appUrl.url = res.url), //エラー
  )
}

Type 'Observable<string>' is not assignable to type 'Observable<AppData>'.
  Type 'string' is not assignable to type 'AppData'.

原因

setApi()メソッドの期待する戻り値(Observable<AppData>)と、実際の戻り値の型が異なっていたため。

mapオペレータのアロー関数の戻り値はstring型です。

res => this.appUrl.url = res.url

しかし、setApi()メソッドの期待する戻り値はObservable<AppData>で、

戻り値の型が異なっていたため、コンパイルエラーとなっていました。

解決策

mapオペレータのアロー関数を編集します。

下記のように、戻り値の型が、AppDat型になるようにします。

export interface AppData{
  url: string;
}

private appUrl: AppData = { url: '' };

setApi(): Observable<AppData> {
  return this.httpClient.get<AppData>('XXXXXX').pipe(
    map(res => {
      this.appUrl.url = res.url;
      return this.appUrl;
    }),
  )
}

TypeScriptの型の取り扱いの基本的な部分が抜けてたため、解決に少々苦労しましたが、問題は至ってシンプルでした。

未だにTypeScriptの型の取り扱いに慣れません(-_-;)