TypeScriptのエラーについて

Question

こんにちは。
TypeScriptをUdemyで学習中の初心者です。
こんな下記のエラーが発生しました。

直訳してみて、プロパティの'unregister'はタイプ'UseDescendantsReturn'に存在しませんという意味だと捉えました。
「TS2339　エラー」でググってみましたが、エラーを解消するヒントは得られませんでした。
'unregister'なんて記述はした覚えが全くないので困っています。
解決へのアプローチをお教え頂けないでしょうか？

unregisterの記載場所と詳細

node_modules/@chakra-ui/descendant/src/use-descendant.tsに記述があるとのことです。

実際にそのファイルは以下のようになっております。
エラー箇所のような記述を私は見つけることができませんでした。

import { createContext, mergeRefs } from "@chakra-ui/react-utils"
import { RefCallback, useRef, useState } from "react"
import { DescendantsManager, DescendantOptions } from "./descendant"
import { useSafeLayoutEffect, cast } from "./utils"

/**
 * @internal
 * React hook that initializes the DescendantsManager
 */
function useDescendants<T extends HTMLElement = HTMLElement, K = {}>() {
  const descendants = useRef(new DescendantsManager<T, K>())
  useSafeLayoutEffect(() => {
    return () => descendants.current.destroy()
  })
  return descendants.current
}

export interface UseDescendantsReturn
  extends ReturnType<typeof useDescendants> {}

/* -------------------------------------------------------------------------------------------------
 * Descendants context to be used in component-land.
  - Mount the `DescendantsContextProvider` at the root of the component
  - Call `useDescendantsContext` anywhere you need access to the descendants information

  NB:  I recommend using `createDescendantContext` below
 * -----------------------------------------------------------------------------------------------*/

const [
  DescendantsContextProvider,
  useDescendantsContext,
] = createContext<UseDescendantsReturn>({
  name: "DescendantsProvider",
  errorMessage: "useDescendantsContext must be used within DescendantsProvider",
})

/**
 * @internal
 * This hook provides information a descendant such as:
 * - Its index compared to other descendants
 * - ref callback to register the descendant
 * - Its enabled index compared to other enabled descendants
 */
function useDescendant<T extends HTMLElement = HTMLElement, K = {}>(
  options?: DescendantOptions<K>,
) {
  const descendants = useDescendantsContext()
  const [index, setIndex] = useState(-1)
  const ref = useRef<T>(null)

  useSafeLayoutEffect(() => {
    return () => {
      if (!ref.current) return
      descendants.unregister(ref.current)
    }
  }, [])

  useSafeLayoutEffect(() => {
    if (!ref.current) return
    const dataIndex = Number(ref.current.dataset.index)
    if (index != dataIndex && !Number.isNaN(dataIndex)) {
      setIndex(dataIndex)
    }
  })

  const refCallback = options
    ? cast<RefCallback<T>>(descendants.register(options))
    : cast<RefCallback<T>>(descendants.register)

  return {
    descendants,
    index,
    enabledIndex: descendants.enabledIndexOf(ref.current),
    register: mergeRefs(refCallback, ref),
  }
}

/* -------------------------------------------------------------------------------------------------
 * Function that provides strongly typed versions of the context provider and hooks above.
   To be used in component-land
 * -----------------------------------------------------------------------------------------------*/

export function createDescendantContext<
  T extends HTMLElement = HTMLElement,
  K = {}
>() {
  type ContextProviderType = React.Provider<DescendantsManager<T, K>>
  const ContextProvider = cast<ContextProviderType>(DescendantsContextProvider)

  const _useDescendantsContext = () =>
    cast<DescendantsManager<T, K>>(useDescendantsContext())

  const _useDescendant = (options?: DescendantOptions<K>) =>
    useDescendant<T, K>(options)

  const _useDescendants = () => useDescendants<T, K>()

  return [
    // context provider
    ContextProvider,
    // call this when you need to read from context
    _useDescendantsContext,
    // descendants state information, to be called and passed to `ContextProvider`
    _useDescendants,
    // descendant index information
    _useDescendant,
  ] as const
}

Comments

[maisumakun]

> 'unregister'なんて記述はした覚えが全くないので困っています。

提示のコードは、どのファイルに書かれているものでしょうか？

[hayatoganbaru]

早い返信ありがとうございます。
質問を編集して追加しました。
ご確認いただければ幸いです。

Answer 1

functionuseDescendantのスコープ内に以下の記述が見受けられるのですが、エラー箇所はこれではないでしょうか？

 useSafeLayoutEffect(() => {
    return () => {
      if (!ref.current) return
      descendants.unregister(ref.current)       // <- method unregister()
    }
  }, [])

行数もエラー箇所の54あたりなので間違ってはないと思うのですが。