自定義鈎子的 React 道具類型

Question

我有一個返回 object（顏色主題對象）的組件，它具有某些 styles 的嵌套對象。

let colorPalette = {
 bgColors: {
  main: 'red',
  default: 'pink',
  ...
 },
 textColors: {
  main: 'black',
  default: 'red',
  ...
 }  
}

這個 colorPalette object 存儲在上下文中，可以通過以下方式訪問：

context.providerValue.colorPalette

因此，由於我經常使用 colorPalette，因此通過這種方式訪問 colorPalette 來使用顏色對我來說沒有意義，因此我創建了一個自定義掛鈎。 看起來像這樣：

const useGetColors = () => {
  let context = useContext(CustomContext)
   return context.providerValue.color
}

用法看起來像這樣：

let colors  = useGetColors()
backgroundColor: colors.bg.main

我正在嘗試做的是在我這樣做時出現可用值

colors.
or colors.bg.

所以出現了可用的選項，但考慮到這不是一個組件，不確定如何去做......

Answer 1

如果您只需要自動完成 IDE，您可以使用JSDoc 類型注釋。 WebStorm 或 Visual Studio Code 都可以理解類型注釋，並隨后提供建議。

/**
 * @typedef {{
 *   bg: {
 *    main: string;
 *    default: string;
 *   },
 *   text: {
 *    main: string;
 *    default: string;
 *   }
 * }} ColorTheme
 * 
 * Returns colors theme
 * @returns {ColorTheme}
 */
function useGetColors() {
 ...
}