TS 错误：“null”类型的参数不可分配给“错误”类型的参数 | 承诺喜欢<error | undefined> | 未定义'.ts(2345)</error>

Question

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?

Answer 1

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

Answer 2

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