CODEWITHSUNDEEP
javascripttypescriptpromisemobxmobx-persist
deadcoder0904
deadcoder0904

Reputation: 8693

TS error: Argument of type 'null' is not assignable to parameter of type 'Error | PromiseLike<Error | undefined> | undefined'.ts(2345)

I am using Mobx Persist Store that saves MobX Store to Local Storage.

The docs doesn't have a TS version so I modified 2 lines (one in readStore & another in writeStore which you can compare with https://github.com/quarrant/mobx-persist-store#with-mobx-6) to solve TS errors but that caused another error:

import {
    persistence,
    useClear,
    useDisposers,
    isSynchronized,
    StorageAdapter,
} from 'mobx-persist-store'

import { FrameItStore } from '@/store/index'

function readStore(name: string) {
    return new Promise<string>((resolve) => {
        const data = localStorage.getItem(name) || '{}'
        resolve(JSON.parse(data))
    })
}

function writeStore(name: string, content: string) {
    return new Promise<Error | undefined>((resolve) => {
        localStorage.setItem(name, JSON.stringify(content))
        resolve(null)
    })
}

export default persistence({
    name: 'FrameItStore',
    properties: ['counter'],
    adapter: new StorageAdapter({
        read: readStore,
        write: writeStore,
    }),
    reactionOptions: {
        // optional
        delay: 2000,
    },
})(new FrameItStore())

I am getting an error on the null in resolve(null) inside of writeStore.

Here's the error:

Argument of type 'null' is not assignable to parameter of type 'Error | PromiseLike<Error | undefined> | undefined'.ts(2345)

How can I solve it?

Upvotes: 0

Views: 3489

Answers (2)

deadcoder0904
deadcoder0904

Reputation: 8693

I think I solved it as I see no errors now. I had to remove JSON.parse from readStore as well as use resolve(undefined) instead of resolve(null) in writeStore like:

import {
    persistence,
    useClear,
    useDisposers,
    isSynchronized,
    StorageAdapter,
} from 'mobx-persist-store'

import { FrameItStore } from '@/store/index'

function readStore(name: string) {
    return new Promise<string>((resolve) => {
        const data = localStorage.getItem(name) || '{}'
        resolve(data)
    })
}

function writeStore(name: string, content: string) {
    return new Promise<Error | undefined>((resolve) => {
        localStorage.setItem(name, JSON.stringify(content))
        resolve(undefined)
    })
}

export const PersistState = persistence({
    name: 'FrameItStore',
    properties: ['counter'],
    adapter: new StorageAdapter({
        read: readStore,
        write: writeStore,
    }),
    reactionOptions: {
        // optional
        delay: 2000,
    },
})(new FrameItStore())

Upvotes: 1

user1991252
user1991252

Reputation: 136

unknown is not compatible with string or undefined. I believe that JSON.parse is returning unknown. So rather than just resolving JSON.parse(data) you have to determine its type. You can do this by using conditional checks. Once you are sure it's a string you can resolve it, otherwise resolve undefined.

function readStore(name: string) {
    return new Promise((resolve) => {
        const data = localStorage.getItem(name) || '{}'
        const output = JSON.parse(data);
        if (typeof output === "string") resolve(output);
        resolve(undefined);
    })
}

Upvotes: 1

Related Questions