Preferences Trouble

[l5barth]

Hi,
since updating my environment my project seems to be completey broken, and I dont know if I ever get my project working again. I used e.g. a simple storage class, but now I get errors.

Error: src/app/services/storage.service.ts:17:5 - error TS2322: Type 'GetResult' is not assignable to type '{ value: string; }'.
  Types of property 'value' are incompatible.
    Type 'string | null' is not assignable to type 'string'.
      Type 'null' is not assignable to type 'string'.

17     return (await Preferences.get({ key }));
       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


Error: src/app/services/storage.service.ts:26:23 - error TS2345: Argument of type 'string | null' is not assignable to parameter of type 'string'.
  Type 'null' is not assignable to type 'string'.

26     return JSON.parse(ret.value);

import { Injectable } from '@angular/core';
import { Preferences } from '@capacitor/preferences';

@Injectable({
  providedIn: 'root'
})
export class StorageService {

  constructor() { }

    async setString(key: string, value: string) {
        await Preferences.set({ key, value });
    }

    async getString(key: string): Promise<{ value: string }> {
        return (await Preferences.get({ key }));
    }

    async setObject(key: string, value: any) {
        await Preferences.set({ key, value: JSON.stringify(value) });
    }

    async getObject(key: string): Promise<{ value: any }> {
        const ret = await Preferences.get({ key });
        return JSON.parse(ret.value);
    }

    async removeItem(key: string) {
        await Preferences.remove({ key });
    }

    async clear() {
        await Preferences.clear();
    }
}

Why doesnt it work any more? How do I have to code it now?

[l5barth]

I tried this in a new testapp:

  callMyMethods() {
    this.setString('msg', 'Hello Test-App');
    const value = this.getString('msg');
    console.log(`msg = ${value}`);
  }

  async setString(k: string, v: string) {
    await Preferences.set({ key: k, value: v});
  }

  async getString(k: string): Promise<string> {
    const ret = await Preferences.get({ key: k });
    return (ret.value || '');
  }

console.log shows

msg = [object Promise]

Why not “Hello Test-App”?

[jonz94]

Hi,

The issue is that the type of the value return from this.getString('msg') is actually a Promise.

So, you need to use async/await or .then() in order to get the actual value inside the Promise.

Option 1. use async/await

  async callMyMethods() {
    this.setString('msg', 'Hello Test-App');
    const value = await this.getString('msg');
    console.log(`msg = ${value}`);
  }

Option 2. use .then()

  callMyMethods() {
    this.setString('msg', 'Hello Test-App');
    this.getString('msg').then((value) => {
      console.log(`msg = ${value}`);
    );
  }

[l5barth]

In my real app I actually use option 2, but what confused me is the GetResult.value: string hint, and thought I was getting a string back here directly.

I must admit that I have not yet fully understood this Promise issue.