Typescript：在初始化之前无法访问“createResettable”

Question

我有几个使用 Zustand 和 NextJS 的简单组件。

由于某种原因，我收到以下错误：“在初始化之前无法访问‘createResettable’”。我正在定义该函数并正确导入它吗？不知道为什么我会得到这个？

./quoteStore.ts

import { createResettable } from "../_hooks/hooks"; // verified import is correct
import { type Customer } from "./types";

type QuoteStore = {
  id: string | null;
  date: string | null;
  customer: Customer | null;
  subTotal: string;
  tax: string;
  total: string;
  taxRate: number;

  //Setters
  setCustomer: (customer: Customer | null) => void;
  setQuoteDefaults: (
    input: Pick<
      QuoteStore,
      "id" | "date" | "customer" | "subTotal" | "tax" | "total" | "taxRate"
    >,
  ) => void;
  setTotals: (subTotal: string, tax: string, total: string) => void;
};

export const useQuoteStore = createResettable<QuoteStore>((set) => ({ // This is where the error happens
  id: null,
  date: null,
  customer: null,
  subTotal: "0",
  tax: "0",
  total: "0",
  taxRate: 0,

  setCustomer: (customer) => set({ customer }),
  setQuoteDefaults: (input) => set(input),
  setTotals: (subTotal, tax, total) => set({ subTotal, tax, total }),
}));

._hooks/hooks.ts

import { useEffect } from "react";
import { vanillaApi } from "@/trpc/react";
import { DateTime } from "luxon";
import Decimal from "decimal.js";
import { nanoid } from "nanoid";
import { create } from "zustand";
import type { StateCreator } from "zustand";
import { useQuoteStore } from "../\_stores/quoteStore";

export const createResettable = \<T\>(stateCreator: StateCreator\<T\>) =\> {
const store = create(stateCreator);

const initialState = store.getState();
storeResetFns.add(() =\> {
store.setState(initialState, true);
});
return store;
};

最初我将 createResettable 导出为 create，我认为这些类型可能与 Zustand 发生冲突。我将其重命名为 createResettable。问题依然存在。

Answer 1

注意，您可以在导入中进行循环引用...但您必须注意，因为它并非在所有情况下都有效。您不能使用 （在顶层） 来自另一个的东西 （在顶层） 正在使用导入它的文件中的某些内容（在大多数情况下这几乎是不可知的）。需要等待文件完全加载并填充解释器上下文中的引用。

这是工作循环导入的示例：

module1.mjs

import m2 from './module2.mjs';
// or
// import { m2 } from './module2.mjs';

// m2 is a Promise until fulfilled then is the default
// export from `module2.mjs`.

// Does not produce error.
const m1 = { m2 };

export default m1;

// TEST:

// Does not produce error as it awaits for m2 to be fulfilled.
console.log(m2())
// Outputs: { m2: [Function: m2] }
// The output above is the default `{ m2 }` above
// which is a circular reference.

// Does not produce error as it awaits for m2 to be fulfilled.
console.log(m2().m2);
// Outputs: [Function: m2]

// This file does use m2 from the top level.

module2.mjs

import m1 from './module1.mjs';

// m1 is a Promise until fulfilled then is the default
// export from `module1.mjs`.

// Does not produce error.
const m2 = () => m1;

export default m2;

// This file does not use m1 from the top level.

但是，如果您尝试这样做，就会遇到问题

module2.mjs

:

import m1 from './module1.mjs';

// m1 is a Promise until fulfilled then is the default
// export from `module1.mjs`.

// Does not produce error.
export const m2 = () => m1;
// m1 is not at top level above.

// This produces an Error because m1 was not fulfilled.
// export const m3 = m1.m2;
export const m3 = m1.m2;
// m1 is at top level above.

export default m2;

// This file does use the m1 from the top level.