如何解决Legend State、React Native与TypeScript的类型问题

你的代码存在两个核心问题导致类型错误，以下是具体修正方案：

问题1：Context类型与传入值的键名不匹配 #

你定义的StevenContextType要求属性名为store，但在Provider中传入的是store$，键名不一致直接触发了类型校验错误。

问题2：Legend State的类型引用错误 #

@legendapp/state v3版本对类型系统做了重构，针对不同类型的值提供了专属的Observable类型：

• 对象类型对应ObservableObject<T>
• 数组类型对应ObservableArray<T>
• 基本类型（string/number/boolean等）对应Observable<T>

你直接用Observable<Store>（Store是对象类型），导致类型不匹配。

修正后的代码示例 #

import { useObservable, ObservableObject } from '@legendapp/state';
import React from 'react';

type Store = {
  stuff: string;
}

// 针对对象类型使用ObservableObject
export type StevenContextType = {
  store: ObservableObject<Store>;
};

const store$ = useObservable({
  stuff: "yo"
});

export const StevenContext = React.createContext<StevenContextType | null>(null);

// 修正键名：传入属性名与ContextType保持一致
<StevenContext.Provider value={{ store: store$ }}>
  {/* 子组件内容 */}
</StevenContext.Provider>

更简洁的推导方式 #

如果不想手动维护类型，可以直接让TypeScript自动推导：

import { useObservable } from '@legendapp/state';
import React from 'react';

type Store = {
  stuff: string;
}

const store$ = useObservable({
  stuff: "yo"
});

// 直接通过typeof推导Context类型
type StevenContextType = {
  store: typeof store$;
};

export const StevenContext = React.createContext<StevenContextType | null>(null);

<StevenContext.Provider value={{ store: store$ }}>
  {/* 子组件内容 */}
</StevenContext.Provider>

内容的提问来源于stack exchange，提问作者TddOrBust