Как набирать пользовательские ловушки React, созданные в JS и используемые в файле TSX?

Question

У меня есть пользовательский хук, который, к сожалению, написан на чистом JS, который я использую в файле TypeScript .tsx.

Я называю его как

const [toggleDictation, dictationResults] = useDictation()

  useEffect(() => {

    //start recognizing
    toggleDictation();

  }, []);

Я получаюошибка в компиляторе, которая говорит:

This expression is not callable.
  Not all constituents of type 'string | boolean | never[] | (() => Promise<void>)' are callable.
    Type 'string' has no call signatures.ts(2349)

функция toggleDictation в пользовательском хуке JS записывается так:введите правильно, чтобы удалить ошибку?

Answer 1

Настоящая проблема здесь связана с функцией useDictation. По умолчанию даже в машинописном тексте функция, возвращающая массив, является массивом, а не типом кортежа.

const toggleDictation = async () => { }
const useDictation = () => { // returns Array<(() => Promise<void>) | never[]>
    return [toggleDictation, []]
}

const [tg, arr] = useDictation(); // tg is (() => Promise<void>) | never[] so uncallable

Playground Link

В ts вы можете добавить as const или явную аннотацию типа, чтобы исправить это:

const toggleDictation = async () => { }
const useDictation = () => { // returns Array<(() => Promise<void>) | never[]>
    return [toggleDictation, []] as const
}

const [tg, arr] = useDictation(); // tg is now () => Promise<void>
tg() // ok

Playground Link

Для JS у нас есть несколько вариантов, если вы управляете js, вы можете добавить типы jsdoc, и они будут подхвачены TS:

const toggleDictation = async () => { }

/**
 * @returns {[()=> Promise<void>, string[])]}
 */
const useDictation = () => {
    return [toggleDictation, []]
}

let [tg, d] = useDictation(); // tg is ()=> Promise<void>
tg() // ok in ts as well 

Playground Link

Или вы можете добавить файл декларации, но это действительно зависит от ваших настроек. Если вы создадите объявление для модуля, вы больше не получите вывод от js. Вы можете сгенерировать d.ts из файлов js (доступно с версии 3.7 PR ) и исправить любые объявления (например, тип возврата useDictation)

declare const useDictation : () => [()=> Promise<void>, string[]]

let [tg, d] = useDictation(); // tg is ()=> Promise<void>
tg() // ok 

Детская площадка Link

Answer 2

Печатание этого не должно влиять на скомпилированный результат. Конечно, если это работает в простом файле JS, то, что я говорю, ложно, но проблема, похоже, заключается в реализации, а не в отсутствии типизации.