reactjs - Giá trị mặc định của interface TypeScript khi một thuộc tính là kiểu hàm cho useContext hooks

Tôi vừa mới bắt đầu với Typescript. Tôi đã xem nhiều ví dụ và câu hỏi về custom hooks, nhưng tôi vẫn không thể hiểu vì cấu trúc file của tôi khác với ví dụ khác.

Bối cảnh:

Tôi có một tệp này tên là useAuth.tsx có cấu trúc như sau:

const defaultValue = { // Here I make this temporary 1st 
  
};

const AuthContext = createContext(defaultValue)

const AuthContextProvider = (props: AuthContextProviderProps) => {
  const auth = useFirebaseAuth(); // this will use value from the hook below

  return (
    <AuthContext.Provider value={auth}>{props.children}</AuthContext.Provider>
  );
};

export default function useFirebaseAuth() {
  const [user, setUser] = useState<UserDetails | null>(null);
  const [errorMessage, setErrorMessage] = useState<string | null>(null);
  const [isLoading, setIsLoading] = useState(true);

  const loginWithEmailPassword = (email: string, password: string) => {
    //... stuff
  }

  const signUpWithEmailPassword = (email: string, password: string) => {
    //... stuff
  }

  return {
    user,
    isLoading,
    errorMessage,
    loginWithEmailPassword,
    signUpWithEmailPassword,
  };

}

**Problems:** 

Vì vậy khi tôi sử dụng hook useAuth() này trong một file khác, có tên là Login.tsx như sau:

const { user } = useAuth(); 

Tôi sẽ nhận được lỗi này:

Property 'user' does not exist on type '{}'.ts(2339)

Các Nỗ Lực Của Tôi:

Theo hiểu biết của tôi, vấn đề là do user không được định nghĩa trong useAuth(), vì vậy TypeScript không biết rằng user tồn tại bên trong useAuth

Đây là những gì tôi đã thử:

interface UserData {
 id: ... //etc 

}

// here define an interface for all the return value 
interface AuthContextInterface {  
  user: UserData | null;
  loginWithEmailPassword: (email: string, password: string )=> void;
  signUpWithEmailPassword: (email: string, password: string )=> void;
  isLoading: boolean;
  errorMessage: string | null;
}


// then use it here as  a type of createContext 
const AuthContext = createContext<AuthContextInterface>(defaultValue)

Tại thời điểm này tôi sẽ gặp vấn đề này tại defaultValue :

Type '{}' is missing the following properties from type 'AuthContextInterface': user, loginWithEmailPassword, signUpWithEmailPassword, isLoading, errorMessage

Vậy tôi cũng phải định nghĩa giá trị bên trong defaultValue:

const defaultValue = {
  
  user:null,
  isLoading: false,
  errorMessage: null,
  
  loginWithEmailPassword:() => void, // this is the problem, what should I put here as default value 
  signUpWithEmailPassword: () => void, 
};

Giá trị khác không phải vấn đề, nhưng loginWithEmailPassword và signUpWithEmailPassword là một hàm, vậy với giá trị mặc định tôi nên khai báo gì, vì nó chưa tồn tại?

Làm ơn cho một vài lời khuyên. Cảm ơn

Câu trả lời #1

hãy thử định nghĩa một đối tượng rỗng cho defaultValue:

const defaultValue = {};

và tạo bối cảnh buộc TypeScript hiểu defaultvalue như giao diện

const AuthContext = createContext<AuthContextInterface>(defaultValue as AuthContextInterface);

nếu bạn không sử dụng eslint, bạn cũng có thể làm điều này

const AuthContext = createContext<AuthContextInterface>(defaultValue as any);