Как сообщить компилятору о window.Cypress в файлах .tsx?
Я создаю приложение с Cypress и TypeScript.
У меня есть следующий код, который немного изменяет поведение Magic SDK в зависимости от того, работает ли он внутри тестов E2E или нет:
const magic = new Magic(window.ENV.MAGIC_PUBLISHABLE_KEY, {
testMode: Boolean(window.Cypress),
});
TypeScript жалуется на window.Cypress и говорит:
Property 'Cypress' does not exist on type 'Window & typeof globalThis'.
Как я могу рассказать TypeScript о Cypress? В основном мне нужно что-то вроде этого:
type Window = {
Cypress?: Cypress; // Where Cypress is the Cypress namespace
}
Я нашел этот ответ (среди прочих) в Google, но не понял, как это решит эту конкретную проблему.
Обновлено:
Вопрос, на который Тобиас ссылается в комментарии, отличается, потому что если вы это сделаете:
declare global {
Cypress: Cypress;
}
TypeScript жалуется, что:
Unexpected labeled statement.
И когда вы делаете:
declare global {
var Cypress: Cypress;
}
TypeScript жалуется, что:
Cannot augment module 'Cypress' with value exports because it resolves to a non-module entity.
Я не смог найти код на Github, но в моем node_modules он живет здесь:
Таким образом, решения из предложенного ответа не будут работать, потому что Cypress - это пространство имен, а не тип - хотя для решения этого вопроса вам, вероятно, нужно, чтобы он был типом.
Обновлено еще раз:
Ответ Фоди тоже не работает.
Если приведенный выше вопрос / ответ не помогает, не могли бы вы указать, почему это не помогает, или какие-либо проблемы с реализацией решений?
@catgirlkelly Я только что сделал! :) Спасибо за любую помощь.
Ответы 3
Схема, которую использовал Глеб Бахмутов в своих слайдах:
interface Window {
Cypress? : any // don't really need strict type here
}
if (window.Cypress) {
...
}
Спасибо за помощь! Безопасность типов была бы потрясающей, я имею в виду, зачем использовать TypeScript в противном случае? Но в любом случае, это не работает. Скриншот приложу к вопросу :)
Я не понимаю - похоже, это связано с ошибкой выше на Window. Что это за ошибка?
Назначьте пространство имен объявленной константе и экспортируйте его:
declare global {
export declare const Cypress: Cypress;
}
Не уверен на 100%, работает ли это, вещи с объявлениями окружающего типа всегда немного сложны.
Спасибо за помощь! К сожалению, это дает три ошибки: A 'declare' modifier cannot be used in an already ambient context., Cannot augment module 'Cypress' with value exports because it resolves to a non-module entity. и Cannot use namespace 'Cypress' as a type..
О, это пространство имен... Совершенно пропустил это.
После некоторой игры кажется, что работает следующее:
declare global {
interface Window {
Cypress?: Cypress.Cypress;
}
}
if (window.Cypress) {
// ...
}
Отвечает ли это на ваш вопрос? Как вы явно устанавливаете новое свойство для `window` в TypeScript?