类型“{}”缺少类型中的以下属性 - TS 错误答案

【问题标题】：Type '{}' is missing the following properties from type - TS error类型“{}”缺少类型中的以下属性 - TS 错误
【发布时间】：2021-06-13 20:04:31
【问题描述】：

在useUser() 函数的返回中，我不断收到此打字稿错误。

类型“{}”缺少类型“IUseUser”的以下属性：userState、dispatchUserContext

import { useReducer, useContext, createContext, FunctionComponent } from 'react';

export interface EditProfileFields {
  phone: string;
  city: string;
  description: string;
  startDate: string;
  endDate: string;
  priceRate: string;
}

export interface IUserContext extends EditProfileFields {
  coverImg: string;
  profileImg: string;
  isDogSitter: boolean;
  isAvailable: boolean;
}

type Action =
  | { type: 'UPLOAD_PROFILE'; profileImg: string }
  | { type: 'UPLOAD_BACKGROUND'; coverImg: string }
  | { type: 'EMPTY_IMAGES' }
  | { type: 'SET_IS_DOG_SITTER' }
  | { type: 'UPDATE_EDIT_PROFILE_FIELDS'; fields: EditProfileFields };

type Dispatch = (action: Action) => void;

export interface IUseUser {
  userState: IUserContext;
  dispatchUserContext: Dispatch;
}

const userReducer = (state: IUserContext, action: Action) => {
  switch (action.type) {
    case 'UPLOAD_PROFILE':
      return { ...state, profileImg: action.profileImg };
    case 'UPLOAD_BACKGROUND':
      return { ...state, coverImg: action.coverImg };
    case 'EMPTY_IMAGES':
      return { ...state, coverImg: '', profileImg: '' };
    case 'SET_IS_DOG_SITTER':
      return { ...state, isDogSitter: true };
    case 'UPDATE_EDIT_PROFILE_FIELDS':
      const { startDate, endDate, ...otherFields } = action.fields;
      return {
        ...state,
        startDate: startDate !== null ? startDate.substring(0, 10) : '',
        endDate: endDate !== null ? endDate.substring(0, 10) : '',
        ...otherFields,
      };
    default:
      throw new Error();
  }
};

const UserContext = createContext({});

const UserProvider: FunctionComponent = ({ children }): JSX.Element => {
  const [userState, dispatchUserContext] = useReducer(userReducer, {
    coverImg: '',
    profileImg: '',
    isDogSitter: false,
    isAvailable: false,
    phone: '',
    city: '',
    description: '',
    startDate: '',
    endDate: '',
    priceRate: '',
  });
  return <UserContext.Provider value={{ userState, dispatchUserContext }}>{children}</UserContext.Provider>;
};

function useUser(): IUseUser {
  const context = useContext(UserContext);
  if (context === undefined) {
    throw new Error('useUser must be used within a UserProvider');
  }
  return context;
}

export { UserProvider, useUser };

【问题讨论】：

标签： reactjs typescript

【解决方案1】：

使IUseUser 的键成为可选的简单解决方案。

export interface IUseUser {
  userState?: IUserContext;
  dispatchUserContext?: Dispatch;
}

但是为什么它说的是空的{}？答案是您正在创建一个具有空对象值的上下文。因此，您的默认值是一个空对象。您需要为该上下文提供默认值。那么你就不需要提供可选的键了。

const UserContext = createContext<IUseUser>({
  userState: {
    coverImg: '',
    profileImg: '',
    isDogSitter: false,
    isAvailable: false,
    phone: '',
    city: '',
    description: '',
    startDate: '',
    endDate: '',
    priceRate: '',
  },
  dispatchUserContext: (action: Action) => {},
});

不要将空对象作为默认值传递给您的上下文。您可以传递 undefined 或 value。

根据react的官方文档，

"defaultValue 参数仅在组件树中没有匹配的 Provider 时使用。这有助于在不包装组件的情况下单独测试组件。注意：将 undefined 作为 Provider 值传递不会导致消耗要使用 defaultValue 的组件。”

如果你想为你的上下文赋予未定义的值，那么在打字稿中你可以创建一个这样的上下文，

const UserContext = createContext<IUseUser | undefined>(undefined);

【讨论】：