Next JS and React for Telegram Mini Apps
Answered
Brown bear posted this in #help-forum
Brown bearOP
Hello! I have a problem. I've set up a basic NextJS and React project. I've included the script from the telegram API (
<script src="https://telegram.org/js/telegram-web-app.js?57"></script>, but instead of script I used <Script />). The thing is, IntelliSense highlights window.Telegram as wrong. No matter what attributes I access, it highlights it. Any help appreciated.Answered by Anay-208 | Ping in replies
You’ll have to add the types to a typescript declaration file
40 Replies
You’ll have to add the types to a typescript declaration file
Answer
Brown bearOP
I haven't tested if it works yet
So you say that my code is perfectly fine, it's just IntelliSense that doesn't know the type?
Yes, it happens with me also, some people usually just do this
to suppress the error
(window as any).Telegramto suppress the error
Brown bearOP
Oh
Cause in videos with Vue it was fine
And in videos with React too
@Brown bear And in videos with React too
Can I know which video you are referring to
Brown bearOP
I thought it's a problem specific to my config
React doesn't know if something is actually there, in window.Telegram. You can manually add the types in ts declaration file
@Anay-208 | Ping in replies Can I know which video you are referring to
Brown bearOP
Forgot it, sorry, but there are many of them, and in no video I saw red underlining of
window.TelegramI thought the script from telegram would add it for me
@Brown bear Forgot it, sorry, but there are many of them, and in no video I saw red underlining of `window.Telegram`
He might not be having eslint installed
or he might be using js
Brown bearOP
So how do I add it manually?
@Anay-208 | Ping in replies He might not be having eslint installed
Brown bearOP
I have VSCode extension ESLint 7+
@Brown bear I have VSCode extension ESLint 7+
Yes, he might not be having it
Brown bearOP
Oh
So if I'll disable it, it would be fine?
no, instead, you can just declare window as any if you want, or add types.
Don't disable eslint
Don't disable eslint
Brown bearOP
Okay
@Brown bear So how do I add it manually?
You can find guide online, or use any Ai
Brown bearOP
Adding types sounds more convenient to me
Isn't
(window as any) some kind of trick to fool ESLint?its basically to tell it can be anything
Brown bearOP
Oh
Cause my knowledge of JS is steep
I use it only as a tool for part of my tasks
Brown bearOP
Thanks very much
Brown bearOP
Btw. isn't there any
#define thing it TS?Like to use
(window as any) by just typing winUmm, I'm not really sure.
But you can also define
But you can also define
window as any in TS file.Brown bearOP
Btw. is using TS for mini app a good thing or JS might be easier?
@Brown bear Btw. is using TS for mini app a good thing or JS might be easier?
TS is good for everything, I personally use it for every app I build