javascript - 使用 MobX 中的 `useLocalObservable` 来处理 TypeScript 时出现 TypeError？

Question

我基本上是在关注 this video指向 this repo将我的应用程序转换为使用 MobX v6。我正在使用 useLocalObservable如 useLocalStore在 MobX v6 中被弃用。
我得到的错误是 FrameItStore内部 useLocalObservable :

Argument of type 'typeof FrameItStore' is not assignable to parameter of type '() => Record<string, any>'.
  Type 'typeof FrameItStore' provides no match for the signature '(): Record<string, any>'.ts(2345)

然后整个 return 语句在 VSCode 中用红色波浪线表示。

想知道如何修复它？
类型.ts

export type Window = {
  width: number
  height: number
}

export type Point = {
  x: number
  y: number
}

export type TrafficSignal = {
  close: string
  minimize: string
  maximize: string
}

export type TrafficSignalPosition = {
  close: Point
  minimize: Point
  maximize: Point
}

export interface IFrameItStore {
  id: number
  trafficSignalColors: Array<TrafficSignal>
}

FrameItStore.ts

import { makeObservable, observable, action, computed } from 'mobx'

import type {
  TrafficSignal,
  Point,
  Window,
  TrafficSignalPosition,
  IFrameItStore,
} from '../types'

export class FrameItStore implements IFrameItStore {
  id = 0
  trafficSignalColors = [
    {
      close: '#EF4444',
      minimize: '#FBBE25',
      maximize: '#49DE80',
    },
    {
      close: 'black',
      minimize: 'blue',
      maximize: 'orange',
    },
  ]

  constructor() {
    makeObservable(this, {
      win: observable,
      box: observable,
      boxCenter: computed,
      trafficSignalPosition: computed,
      trafficSignalColors: observable,
      id: observable,
    })
  }

  win(): Window {
    return {
      width: window.innerWidth,
      height: window.innerHeight,
    }
  }

  box(): Window {
    return {
      width: 1024,
      height: 600,
    }
  }

  get boxCenter(): Point {
    return {
      x: (this.win().width - this.box().width) / 2,
      y: (this.win().height - this.box().height) / 2,
    }
  }

  get trafficSignalPosition(): TrafficSignalPosition {
    return {
      close: { x: this.boxCenter.x + 20, y: this.boxCenter.y + 20 },
      minimize: { x: this.boxCenter.x + 2 * 20, y: this.boxCenter.y + 20 },
      maximize: { x: this.boxCenter.x + 3 * 20, y: this.boxCenter.y + 20 },
    }
  }
}

export const config = new FrameItStore()

FrameItContext.tsx

import * as React from 'react'
import { useLocalObservable } from 'mobx-react'

import { FrameItStore } from './FrameItStore'

const FrameItContext = React.createContext(null)

export const FrameItProvider = ({ children }: { children: React.ReactChild }) => {
  const frameItStore = useLocalObservable(FrameItStore)

  return (
    <FrameItContext.Provider value={frameItStore}>
      {children}
    </FrameItContext.Provider>
  )
}

export const useFrameItStore = () => React.useContext(FrameItContext)

Answer 1

您关注的 repo returns an object即 used for useLocalStore .代码中的等效项是使用 FrameItStore 的实例。 useLocalObservable 的类(class).
您还可以从提供给 useLocalObservable 的函数中返回此实例。在组件的第一次渲染时只创建一个实例。

const FrameItContext = React.createContext<IFrameItStore | null>(null);

export const FrameItProvider = ({ children }: { children: React.ReactChild }) => {
  const frameItStore = useLocalObservable(() => new FrameItStore());

  return (
    <FrameItContext.Provider value={frameItStore}>
      {children}
    </FrameItContext.Provider>
  );
};