ค้นหาเว็บไซต์

angular - ชนิดค่าที่ส่งกลับของ Typescript สำหรับ Observables ใน getter และ setter


ฉันกำลังสร้างแอปโดยใช้ Angular 2 กับ Typescript ค่าประเภทการคืนค่าของ 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: ประเภท 'User' ไม่สามารถกำหนดค่าให้กับประเภท 'Observable' ได้

ข้อผิดพลาด TS2322: ประเภท 'User' ไม่สามารถกำหนดค่าให้กับประเภท

'Observable'. คุณสมบัติ '_isScalar' หายไปในชนิด 'User'.

คำตอบ #1

ฉันคิดว่าคุณเกือบจะถึงจุดนั้นแล้ว แต่ฉันสงสัยเกี่ยวกับการใช้ setter อย่างน้อยในโค้ดที่คุณได้ให้มา เมื่อคุณดูโค้ดภายใน setter ของคุณ คุณแท้จริงแล้วไม่ได้ตั้งค่าอะไรให้กับ _user$

ฉันคิดว่านี่คือสิ่งที่ทำให้คุณสับสน ฉันไม่คิดว่าคุณควรจะใช้ setter ที่นี่ ตามสิ่งที่โค้ดทำภายใน setter ของคุณ นี่ควรจะเป็นแค่ฟังก์ชันสาธารณะ นี่คือสิ่งที่ฉันคิดว่ามันควรจะเป็น

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();
}

จากนั้นคอมโพเนนต์ของคุณที่กำลังใช้งาน Service จะเรียก UserService.setUser(userObj)

คำตอบ #2

เมื่อคุณทำตามข้อความแสดงข้อผิดพลาด คุณจะมีเพียงสองคู่ของตัวตั้งค่าและตัวดึงค่า:

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

และ

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

จริงๆ นั่นคือการรวมกันที่อนุญาตเพียงเท่านั้น

บทความที่เกี่ยวข้อง