在TypeScript中存储动态获取的数据并保留类型提示

TypeScript作为静态类型语言，全局变量的类型在编译时固定，但可以通过泛型、类型断言结合类型推导实现动态类型的智能提示，无需预先定义所有可能的类型集合。以下是针对你场景的几种可行方案：

方案1：泛型函数封装读写操作（推荐） #

通过封装set/get函数，利用泛型自动捕获数据类型，既保证类型安全，又保留智能提示：

// A.ts
// 内部用unknown存储，避免any的不安全
let _fetchedData: unknown = null;

// 泛型set函数，自动推导传入数据的类型
export function setFetchedData<T>(data: T) {
  _fetchedData = data;
}

// 泛型get函数，使用时指定类型为API返回值的类型
export function getFetchedData<T>(): T {
  return _fetchedData as T;
}

// B.ts
import { setFetchedData, getFetchedData } from "./A";

// API返回的类型已知（比如{id: string, posts: number}）
const data = await fetchData("api-endpoint");
setFetchedData(data);

// 用typeof data直接推导类型，无需手动定义
const typedData = getFetchedData<typeof data>();
// 此时typedData会有完整的智能提示，包括嵌套对象字段
console.log(typedData.id, typedData.posts);

方案2：unknown类型+类型断言 #

如果不想封装函数，用unknown替代any（更安全），使用时通过类型断言缩小类型范围：

// A.ts
export const someContext = { fetchedData: null as unknown };

// B.ts
import { someContext } from "./A";

const data = await fetchData("api-endpoint");
someContext.fetchedData = data;

// 断言为API返回值的类型，获得智能提示
const typedData = someContext.fetchedData as typeof data;

方案3：React上下文场景适配 #

针对你的React场景，结合泛型自定义Hook和上下文，实现类型安全的全局状态管理：

// FetchedDataContext.tsx
import { createContext, useContext, useState, ReactNode } from "react";

type FetchedDataContextType = {
  fetchedData: unknown;
  setFetchedData: <T>(data: T) => void;
};

const FetchedDataContext = createContext<FetchedDataContextType>({
  fetchedData: null,
  setFetchedData: () => {},
});

export function FetchedDataProvider({ children }: { children: ReactNode }) {
  const [fetchedData, setFetchedData] = useState<unknown>(null);

  return (
    <FetchedDataContext.Provider value={{ fetchedData, setFetchedData }}>
      {children}
    </FetchedDataContext.Provider>
  );
}

// 泛型Hook，用于获取类型化的数据
export function useFetchedData<T>(): T {
  const { fetchedData } = useContext(FetchedDataContext);
  return fetchedData as T;
}

// 使用组件
import { useFetchedData, FetchedDataContext } from "./FetchedDataContext";

async function fetchData() {
  return { id: "123", lastLogin: new Date() } as const;
}

function MyComponent() {
  const { setFetchedData } = useContext(FetchedDataContext);

  useEffect(() => {
    const loadData = async () => {
      const result = await fetchData();
      setFetchedData(result);
    };
    loadData();
  }, [setFetchedData]);

  // 用ReturnType<typeof fetchData>推导API返回类型
  const typedData = useFetchedData<ReturnType<typeof fetchData>>();
  return <div>Last login: {typedData?.lastLogin.toLocaleString()}</div>;
}

方案优势 #

• 避开any类型的安全隐患，同时利用TypeScript的自动类型推导能力
• 无需预先维护所有可能的字段类型，数据类型完全由API返回值决定，随数据库结构自动更新
• 支持嵌套对象的类型提示，typeof会递归推导所有嵌套字段的类型

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