MobX에서`useLocalObservable`을 사용하여 TypeScript로 작업 할 때 TypeError?

deadcoder0904

기본적으로 MobX v6을 사용하도록 내 앱을 변환 하기 위해이 저장소가리키는 이 비디오따르고 있습니다. 내가 사용하고 있습니다 MobX 버전 6에서 더 이상 사용되지 않습니다.useLocalObservableuseLocalStore

내가 얻는 오류는 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에서 빨간색 구불 구불 한 선으로 표시됩니다.

VSCode Mobx TypeScript 오류

그것을 고치는 방법을 알고 싶습니까?

types.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 NotesProvider = ({ children }: { children: React.ReactChild }) => {
  const frameItStore = useLocalObservable(FrameItStore)

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

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

팔로우하는 저장소 는에 사용되는 객체반환합니다 . 코드에서 동등한 것은 .NET 용 클래스 의 인스턴스를 사용하는 것 입니다 .useLocalStoreFrameItStoreuseLocalObservable

또한에 제공된 함수에서이 인스턴스를 반환 useLocalObservable하여 구성 요소의 첫 번째 렌더링시 한 번만 단일 인스턴스를 만들 수 있습니다.

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

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

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

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

Github 작업을 사용하여 워크 플로를 설정할 때`pull_request` 이벤트에 대해 어떤 분기가 필터링됩니까?

분류에서Dev

로컬 명령을 사용하여 ansible 작업에서 사용할 여러 변수를 설정하는 방법

분류에서Dev

다른 결과 유형으로 작업 할 때 dotnet Core에서 Task.WhenAll 작업을위한 모범 사례

분류에서Dev

VueJS에서 Typescript를 사용할 때 TypeError

분류에서Dev

CreateUploadSesssion을 사용하여 파일을 업로드 할 때 서버에서 코드 : InternalServerError를 반환합니다.

분류에서Dev

다운로드 작업에 백그라운드 URLSession을 사용하려고 할 때 '잘못된 인수'발생

분류에서Dev

TypeError : cartopy에서 사용할 때 문자열 인덱스는 정수 여야하지만 일반 인쇄는 정상적으로 작동합니다.

분류에서Dev

TypeError : 'NoneType'object is not callable : openpyxl을 사용하여 Python에서 Excel 파일로 작업하려고 할 때 나타납니다.

분류에서Dev

Pandas : Groupby를 사용하여 매우 많은 열로 작업 할 때 메모리 사용량

분류에서Dev

fastapi 및 pydantic을 사용하여 POST API를 빌드 할 때 TypeError : Object of type is not JSON serializable

분류에서Dev

SharePoint "경로를 사용하여 파일 콘텐츠 가져 오기"작업을 사용할 때 "파일 콘텐츠"의 JSON에서 $ content 값 추출

분류에서Dev

setState ()를 사용하여 배열을 업데이트 할 때 React / TypeScript 오류

분류에서Dev

jquery clone 문을 사용하여 div 태그를 복제하고 새로 복제 된 div로 작업 할 때 js가 잘못 수행합니다.

분류에서Dev

작업 스케줄러를 사용하여 시작할 때 AutoHotkey가 ClickOnce 앱을 시작할 수 없습니다.

분류에서Dev

Android 4.3의 Phonegap에서 FileTransfer를 사용하여 S3에 파일을 업로드 할 때 코드 3

분류에서Dev

Fine Uloader를 사용하여 확장 된 파일을 업로드 할 때 이상한 동작

분류에서Dev

SMTP 설정을 사용하여 보내려고 할 때 Gmail 작업 버튼이 작동하지 않습니다.

분류에서Dev

openpyxl을 사용하여 통합 문서를 열려고 할 때 TypeError

분류에서Dev

Android : Parse로 작업 할 때 서버 측 사용

분류에서Dev

mongoose, gridfs-stream 및 multer를 사용하여 파일을 업로드 할 때 MongoError

분류에서Dev

Makefile 프로젝트- "-j"인수를 통해 여러 작업을 사용할 때 빌드 실패 방지

분류에서Dev

C #에서 Unity를 사용하여 다시 시작할 때 응용 프로그램 다시 시작

분류에서Dev

노드로 작업 할 때 클라이언트 측에서 ajax 사용

분류에서Dev

Flask를 사용하여 파일을 디렉터리에 업로드 할 때 내부 서버 오류 코드 500

분류에서Dev

numba를 사용하여 numpy 배열을 인덱싱 할 때 TypeError

분류에서Dev

CRUD 작업에 리소스를 사용할 때 Laravel 5.2 경로가 작동하지 않습니다.

분류에서Dev

스레드 풀을 사용하여 작업을 실행할 때 RejectedExecutionException : JAVA

분류에서Dev

LINQ에서 일반 작업을 사용할 때 NotSupportedException

분류에서Dev

XMonad를 사용하여 시작할 때 특정 작업 공간에서 프로그램을 생성하는 방법은 무엇입니까?

Related 관련 기사

  1. 1

    Github 작업을 사용하여 워크 플로를 설정할 때`pull_request` 이벤트에 대해 어떤 분기가 필터링됩니까?

  2. 2

    로컬 명령을 사용하여 ansible 작업에서 사용할 여러 변수를 설정하는 방법

  3. 3

    다른 결과 유형으로 작업 할 때 dotnet Core에서 Task.WhenAll 작업을위한 모범 사례

  4. 4

    VueJS에서 Typescript를 사용할 때 TypeError

  5. 5

    CreateUploadSesssion을 사용하여 파일을 업로드 할 때 서버에서 코드 : InternalServerError를 반환합니다.

  6. 6

    다운로드 작업에 백그라운드 URLSession을 사용하려고 할 때 '잘못된 인수'발생

  7. 7

    TypeError : cartopy에서 사용할 때 문자열 인덱스는 정수 여야하지만 일반 인쇄는 정상적으로 작동합니다.

  8. 8

    TypeError : 'NoneType'object is not callable : openpyxl을 사용하여 Python에서 Excel 파일로 작업하려고 할 때 나타납니다.

  9. 9

    Pandas : Groupby를 사용하여 매우 많은 열로 작업 할 때 메모리 사용량

  10. 10

    fastapi 및 pydantic을 사용하여 POST API를 빌드 할 때 TypeError : Object of type is not JSON serializable

  11. 11

    SharePoint "경로를 사용하여 파일 콘텐츠 가져 오기"작업을 사용할 때 "파일 콘텐츠"의 JSON에서 $ content 값 추출

  12. 12

    setState ()를 사용하여 배열을 업데이트 할 때 React / TypeScript 오류

  13. 13

    jquery clone 문을 사용하여 div 태그를 복제하고 새로 복제 된 div로 작업 할 때 js가 잘못 수행합니다.

  14. 14

    작업 스케줄러를 사용하여 시작할 때 AutoHotkey가 ClickOnce 앱을 시작할 수 없습니다.

  15. 15

    Android 4.3의 Phonegap에서 FileTransfer를 사용하여 S3에 파일을 업로드 할 때 코드 3

  16. 16

    Fine Uloader를 사용하여 확장 된 파일을 업로드 할 때 이상한 동작

  17. 17

    SMTP 설정을 사용하여 보내려고 할 때 Gmail 작업 버튼이 작동하지 않습니다.

  18. 18

    openpyxl을 사용하여 통합 문서를 열려고 할 때 TypeError

  19. 19

    Android : Parse로 작업 할 때 서버 측 사용

  20. 20

    mongoose, gridfs-stream 및 multer를 사용하여 파일을 업로드 할 때 MongoError

  21. 21

    Makefile 프로젝트- "-j"인수를 통해 여러 작업을 사용할 때 빌드 실패 방지

  22. 22

    C #에서 Unity를 사용하여 다시 시작할 때 응용 프로그램 다시 시작

  23. 23

    노드로 작업 할 때 클라이언트 측에서 ajax 사용

  24. 24

    Flask를 사용하여 파일을 디렉터리에 업로드 할 때 내부 서버 오류 코드 500

  25. 25

    numba를 사용하여 numpy 배열을 인덱싱 할 때 TypeError

  26. 26

    CRUD 작업에 리소스를 사용할 때 Laravel 5.2 경로가 작동하지 않습니다.

  27. 27

    스레드 풀을 사용하여 작업을 실행할 때 RejectedExecutionException : JAVA

  28. 28

    LINQ에서 일반 작업을 사용할 때 NotSupportedException

  29. 29

    XMonad를 사용하여 시작할 때 특정 작업 공간에서 프로그램을 생성하는 방법은 무엇입니까?

뜨겁다태그

보관