【问题标题】:Typescript return type for Observables in getter and settergetter 和 setter 中 Observables 的 Typescript 返回类型
【发布时间】:2016-12-05 10:53:53
【问题描述】:

我正在使用带有 Typescript 的 Angular 2 构建一个应用程序。我的 setter 和 getter 应该有什么返回类型?

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Events, SqlStorage, Storage } from 'ionic-angular';
import { Subject } from 'rxjs/Subject';


export interface User {
  name?: string,
  email?: string,
  gender?: string,
  picture?: Object
}

export interface DataStore {
  user: User
}

@Injectable()
export class UserService {
  
  private storage: Storage;
  private _user$: Subject<User>;
  private dataStore: DataStore;

  constructor(
    private http: Http
  ) {
    this.storage = new Storage(SqlStorage);
    this._user$ = new Subject();
    this.dataStore = { user: {} };
  }

  set user$(user: User) {
    this.storage.set('user', JSON.stringify(user));
    this.dataStore.user = user;
    this._user$.next(this.dataStore.user);
  }

  get user$() {
    const subject = this._user$;
    const source = subject.asObservable();
    return source;
  }

}

我试过这个:

set user$(user: User): void {}
get user$(): Observable<User> {}

但是抛出这些错误:

错误 TS2380:“get”和“set”访问器必须具有相同的类型。错误

TS1095:“set”访问器不能有返回类型注释。错误

TS2380:“get”和“set”访问器必须具有相同的类型。错误

TS2322:“用户”类型不可分配给“可观察”类型。

错误 TS2322:类型“用户”不可分配给类型

'可观察的'。 “用户”类型中缺少属性“_isScalar”。

【问题讨论】:

    标签: angular typescript rxjs observable getter-setter


    【解决方案1】:

    当您关注错误消息时,您将只有两对 setter 和 getter:

    get var(): User {}
    set var(user: User) {}
    

    还有

    get var(): Observable<User> {}
    set var(user$: Observable<User>) {}
    

    实际上这是唯一允许的组合。

    【讨论】:

      【解决方案2】:

      我想你快到了,但我质疑使用 setter,至少在你提供的代码中。当您查看 setter 中的代码时,您实际上并没有为 _user$ 设置任何内容。

      我认为这是绊倒你的原因,我认为你不应该在这里使用二传手。根据代码在您的设置器中所做的事情,这应该只是一个公共函数。我觉得应该是这个样子

      constructor(private http: Http) {
        this.storage = new Storage(SqlStorage);
        this._user$ = new Subject();
        this.dataStore = { user: {} };
      }
      
      setUser(user: User) {
        this.storage.set('user', JSON.stringify(user));
        this.dataStore.user = user;
        this._user$.next(this.dataStore.user);
      }
      
      get user$() {
        return this._user$.asObservable();
      }
      

      然后您使用服务的组件将调用 UserService.setUser(userObj)。

      【讨论】:

      • 谢谢,有道理!我看到了其他类似的不使用 setter 的例子。
      • 这不是一个好习惯,因为asObservable() 每次调用时都会围绕主题创建一个新的可观察对象。理想情况下,Getter 应该像属性一样在每次访问时返回相同的对象引用。更健壮的解决方案是将 observable 分配给构造函数中的公共成员,或使用惰性 getter。
      猜你喜欢
      • 2020-05-14
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2016-09-14
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多