[Refactoring] Fix some TS typings, update some dependencies (#1702)

dev/localize/auto-localize.ts

@@ -1,4 +1,4 @@
-// @ts-ignore
+// @ts-nocheck
 const replaceInFile = require('replace-in-file');
 const langPackIOs = require('./en-ios.json');
 const langPackExtra = require('./en-extra.json');

dev/localize/auto-relocalize.ts

@@ -1,4 +1,4 @@
-// @ts-ignore
+// @ts-nocheck
 const replaceInFile = require('replace-in-file');
 const langPackAndroid = require('./en-android.json');
 const langPackIOs = require('./en-ios.json');

package.json

@@ -32,7 +32,7 @@
   "author": "Alexander Zinchuk (alexander@zinchuk.com)",
   "license": "GPL-3.0-or-later",
   "devDependencies": {
-    "@babel/core": "^7.16.12",
+    "@babel/core": "^7.17.0",
     "@babel/plugin-proposal-class-properties": "^7.16.7",
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.7",
     "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3",
@@ -40,27 +40,27 @@
     "@babel/preset-react": "^7.16.7",
     "@babel/preset-typescript": "^7.16.7",
     "@peculiar/webcrypto": "^1.2.3",
-    "@testing-library/jest-dom": "^5.16.1",
+    "@testing-library/jest-dom": "^5.16.2",
     "@types/croppie": "^2.6.1",
     "@types/css-font-loading-module": "0.0.7",
     "@types/dom-mediacapture-record": "^1.0.11",
     "@types/jest": "^27.4.0",
-    "@types/react": "^17.0.38",
+    "@types/react": "^17.0.39",
     "@types/react-dom": "^17.0.11",
-    "@types/resize-observer-browser": "^0.1.6",
+    "@types/resize-observer-browser": "^0.1.7",
     "@types/wicg-mediasession": "^1.1.3",
-    "@typescript-eslint/eslint-plugin": "^5.10.1",
+    "@typescript-eslint/eslint-plugin": "^5.11.0",
-    "@typescript-eslint/parser": "^5.10.1",
+    "@typescript-eslint/parser": "^5.11.0",
     "@webpack-cli/serve": "^1.6.1",
     "autoprefixer": "^10.4.2",
     "babel-loader": "^8.2.3",
     "browserlist": "^1.0.1",
     "buffer": "^6.0.3",
     "cross-env": "^7.0.3",
-    "css-loader": "^6.5.1",
+    "css-loader": "^6.6.0",
     "css-minimizer-webpack-plugin": "^3.4.1",
-    "dotenv": "^14.3.2",
+    "dotenv": "^16.0.0",
-    "eslint": "^8.7.0",
+    "eslint": "^8.8.0",
     "eslint-config-airbnb-typescript": "^16.1.0",
     "eslint-config-react-app": "^7.0.0",
     "eslint-import-resolver-webpack": "^0.13.2",
@@ -71,31 +71,25 @@
     "eslint-plugin-no-null": "^1.0.2",
     "eslint-plugin-react": "^7.28.0",
     "eslint-plugin-react-hooks": "^4.3.0",
-    "eslint-plugin-teactn": "github:korenskoy/eslint-plugin-teactn#8fbd2b9",
+    "eslint-plugin-teactn": "git+https://github.com/korenskoy/eslint-plugin-teactn#c2c39dd005d58c07c24c4361de804dce1c6261b5",
-    "file-loader": "^6.2.0",
     "html-webpack-plugin": "^5.5.0",
     "husky": "^7.0.4",
-    "jest": "^27.4.7",
+    "jest": "^27.5.0",
     "jest-raw-loader": "^1.0.1",
-    "lint-staged": "^12.3.2",
+    "lint-staged": "^12.3.3",
     "mini-css-extract-plugin": "^2.5.3",
     "postcss-loader": "^6.2.1",
     "postcss-modules": "^4.3.0",
-    "raw-loader": "^4.0.2",
     "react": "^17.0.2",
     "replace-in-file": "^6.3.2",
-    "sass": "^1.49.0",
+    "sass": "^1.49.7",
     "sass-loader": "^12.4.0",
     "style-loader": "^3.3.1",
-    "terser": "^5.10.0",
-    "terser-webpack-plugin": "^5.3.0",
-    "ts-node": "^10.4.0",
     "typescript": "^4.5.5",
-    "url-loader": "^4.1.1",
+    "webpack": "^5.68.0",
-    "webpack": "^5.67.0",
     "webpack-bundle-analyzer": "^4.5.0",
     "webpack-cli": "^4.9.2",
-    "webpack-dev-server": "^4.7.3",
+    "webpack-dev-server": "^4.7.4",
     "webpack-merge": "^5.8.0"
   },
   "dependencies": {

src/@types/global.d.ts

@@ -6,6 +6,9 @@ declare namespace React {
     teactFastList?: boolean;
   }
 
+  // Teact feature
+  interface CSSProperties extends String {}
+
   interface Attributes {
     // Optimization for DOM nodes reordering. Requires `teactFastList` for parent
     teactOrderKey?: number;
@@ -45,13 +48,35 @@ type EmojiWithSkins = Record<number, Emoji>;
 
 type AllEmojis = Record<string, Emoji | EmojiWithSkins>;
 
+// Declare supported for import formats as modules
 declare module '*.png';
+declare module '*.svg';
 declare module '*.tgs';
 
+declare module '*.txt' {
+  const content: string;
+  export default content;
+}
+
 declare module 'pako/dist/pako_inflate' {
   function inflate(...args: any[]): string;
 }
 
+declare module 'opus-recorder' {
+  export interface IOpusRecorder extends Omit<MediaRecorder, 'start' | 'ondataavailable'> {
+    new(options: AnyLiteral): IOpusRecorder;
+
+    start(stream?: MediaStreamAudioSourceNode): void;
+
+    sourceNode: MediaStreamAudioSourceNode;
+
+    ondataavailable: (typedArray: Uint8Array) => void;
+  }
+
+  const recorder: IOpusRecorder;
+  export default recorder;
+}
+
 interface TEncodedImage {
   result: Uint8ClampedArray;
   width: number;

src/components/auth/AuthPhoneNumber.tsx

@@ -1,6 +1,5 @@
 import { ChangeEvent } from 'react';
 
-// @ts-ignore
 import monkeyPath from '../../assets/monkey.svg';
 
 import React, {

src/components/calls/group/GroupCallParticipantStreams.tsx

@@ -61,7 +61,6 @@ const GroupCallParticipantStreams: FC<OwnProps & StateProps> = ({
           'videos',
           shouldSpanLastVideo && 'span-last-video',
         )}
-        // @ts-ignore teact feature
         style={`--column-count: ${selectedVideo ? 1 : columnCount}`}
       >
         {selectedVideo && (

src/components/common/AnimatedEmoji.tsx

@@ -75,7 +75,6 @@ const AnimatedEmoji: FC<OwnProps> = ({
     <div
       ref={ref}
       className={buildClassName('AnimatedEmoji media-inner', sticker.id === LIKE_STICKER_ID && 'like-sticker-thumb')}
-      // @ts-ignore teact feature
       style={style}
       onClick={handleClick}
     >

src/components/common/AnimatedSticker.tsx

@@ -223,7 +223,6 @@ const AnimatedSticker: FC<OwnProps> = ({
     <div
       ref={container}
       className={fullClassName}
-      // @ts-ignore
       style={style}
     />
   );

src/components/common/Audio.tsx

@@ -507,19 +507,16 @@ function renderSeekline(
     >
       <span className="seekline-buffered-progress">
         <i
-          // @ts-ignore
           style={`transform: translateX(${bufferedProgress * 100}%)`}
         />
       </span>
       <span className="seekline-play-progress">
         <i
-          // @ts-ignore
           style={`transform: translateX(${playProgress * 100}%)`}
         />
       </span>
       <span className="seekline-thumb">
         <i
-          // @ts-ignore
           style={`transform: translateX(${playProgress * 100}%)`}
         />
       </span>

src/components/common/GifButton.tsx

@@ -73,7 +73,6 @@ const GifButton: FC<OwnProps> = ({
           ref={thumbRef}
           className="thumbnail"
           // We need to always render to avoid blur re-calculation
-          // @ts-ignore
           style={isVideoReady ? 'display: none;' : undefined}
         />
       )}

src/components/common/LocalAnimatedEmoji.tsx

@@ -62,7 +62,6 @@ const LocalAnimatedEmoji: FC<OwnProps> = ({
     <div
       ref={ref}
       className="AnimatedEmoji media-inner"
-      // @ts-ignore teact feature
       style={style}
       onClick={handleClick}
     >

src/components/common/StickerButton.tsx

@@ -105,7 +105,6 @@ const StickerButton: FC<OwnProps> = ({
       ref={ref}
       className={fullClassName}
       title={title || (sticker?.emoji)}
-      // @ts-ignore
       style={style}
       data-sticker-id={sticker.id}
       onMouseDown={preventMessageInputBlurWithBubbling}

src/components/common/UiLoader.tsx

@@ -16,11 +16,8 @@ import buildClassName from '../../util/buildClassName';
 
 import './UiLoader.scss';
 
-// @ts-ignore
 import telegramLogoPath from '../../assets/telegram-logo.svg';
-// @ts-ignore
 import reactionThumbsPath from '../../assets/reaction-thumbs.png';
-// @ts-ignore
 import monkeyPath from '../../assets/monkey.svg';
 import { selectIsRightColumnShown, selectTheme } from '../../modules/selectors';
 
@@ -138,7 +135,6 @@ const UiLoader: FC<OwnProps & StateProps> = ({
             <>
               <div
                 className="left"
-                // @ts-ignore teact feature
                 style={leftColumnWidth ? `width: ${leftColumnWidth}px` : undefined}
               />
               <div

src/components/common/helpers/parseEmojiOnlyString.ts

@@ -1,4 +1,3 @@
-// @ts-ignore
 import twemojiRegex from '../../../lib/twemojiRegex';
 
 const DETECT_UP_TO = 3;

src/components/left/main/ChatList.tsx

@@ -122,7 +122,6 @@ const ChatList: FC<OwnProps> = ({
         folderId={folderId}
         animationType={getAnimationType(id)}
         orderDiff={orderDiffById[id]}
-        // @ts-ignore
         style={`top: ${(viewportOffset + i) * CHAT_HEIGHT_PX}px;`}
       />
     ));

src/components/left/settings/SettingsGeneralBackgroundColor.tsx

@@ -214,7 +214,6 @@ const SettingsGeneralBackground: FC<OwnProps & StateProps> = ({
           <canvas />
           <div
             className="handle"
-            // @ts-ignore
             style={`transform: translate(${colorPosition[0]}px, ${colorPosition[1]}px); background-color: #${hex};`}
           />
         </div>
@@ -222,7 +221,6 @@ const SettingsGeneralBackground: FC<OwnProps & StateProps> = ({
           <canvas />
           <div
             className="handle"
-            // @ts-ignore
             style={`transform: translateX(${huePosition}px); background-color: #${hueHex};`}
           />
         </div>
@@ -236,7 +234,6 @@ const SettingsGeneralBackground: FC<OwnProps & StateProps> = ({
           <div
             className={color === `#${hex}` ? 'active' : undefined}
             data-color={color}
-            // @ts-ignore
             style={`background-color: ${color};`}
             onClick={handlePredefinedColorClick}
           />

src/components/mediaViewer/MediaViewerContent.tsx

@@ -293,7 +293,6 @@ function renderPhoto(blobUrl?: string, imageSize?: ApiDimensions, canDrag?: bool
       <img
         src={blobUrl}
         alt=""
-        // @ts-ignore teact feature
         style={imageSize ? `width: ${imageSize.width}px` : ''}
         draggable={Boolean(canDrag)}
       />
@@ -301,7 +300,6 @@ function renderPhoto(blobUrl?: string, imageSize?: ApiDimensions, canDrag?: bool
     : (
       <div
         className="spinner-wrapper"
-        // @ts-ignore teact feature
         style={imageSize ? `width: ${imageSize.width}px` : ''}
       >
         <Spinner color="white" />
@@ -318,12 +316,10 @@ function renderVideoPreview(blobUrl?: string, imageSize?: ApiDimensions, canDrag
         className="VideoPlayer"
       >
         <div
-          // @ts-ignore
           style={wrapperStyle}
         >
           {/* eslint-disable-next-line jsx-a11y/media-has-caption */}
           <video
-            // @ts-ignore
             style={videoStyle}
             draggable={Boolean(canDrag)}
           />
@@ -333,7 +329,6 @@ function renderVideoPreview(blobUrl?: string, imageSize?: ApiDimensions, canDrag
     : (
       <div
         className="spinner-wrapper"
-        // @ts-ignore teact feature
         style={imageSize ? `width: ${imageSize.width}px` : ''}
       >
         <Spinner color="white" />

src/components/mediaViewer/MediaViewerSlides.tsx

@@ -506,7 +506,7 @@ const MediaViewerSlides: FC<OwnProps> = ({
 
   return (
     <div className="MediaViewerSlides" ref={containerRef}>
-      {previousMessageId && scale === 1 && /* @ts-ignore */ (
+      {previousMessageId && scale === 1 && (
         <div className="MediaViewerSlide" style={getAnimationStyle(-window.innerWidth + offsetX - SLIDES_GAP)}>
           {/* eslint-disable-next-line react/jsx-props-no-spreading */}
           <MediaViewerContent {...rest} messageId={previousMessageId} isFooterHidden={isFooterHidden} />
@@ -517,7 +517,6 @@ const MediaViewerSlides: FC<OwnProps> = ({
           className={`MediaViewerSlide ${isActive ? 'MediaViewerSlide--active' : ''}`}
           onClick={handleToggleFooterVisibility}
           ref={activeSlideRef}
-          /* @ts-ignore */
           style={getAnimationStyle(offsetX, offsetY, scale)}
         >
           <MediaViewerContent
@@ -529,7 +528,7 @@ const MediaViewerSlides: FC<OwnProps> = ({
           />
         </div>
       )}
-      {nextMessageId && scale === 1 && /* @ts-ignore */ (
+      {nextMessageId && scale === 1 && (
         <div className="MediaViewerSlide" style={getAnimationStyle(window.innerWidth + offsetX + SLIDES_GAP)}>
           {/* eslint-disable-next-line react/jsx-props-no-spreading */}
           <MediaViewerContent {...rest} messageId={nextMessageId} isFooterHidden={isFooterHidden} />

src/components/mediaViewer/VideoPlayer.tsx

@@ -157,7 +157,6 @@ const VideoPlayer: FC<OwnProps> = ({
       onMouseOut={!isGif && !IS_TOUCH_ENV ? handleMouseOut : undefined}
     >
       <div
-        // @ts-ignore
         style={wrapperStyle}
       >
         {/* eslint-disable-next-line jsx-a11y/media-has-caption */}
@@ -169,7 +168,6 @@ const VideoPlayer: FC<OwnProps> = ({
           // This is to force auto playing on mobiles
           muted={isGif}
           id="media-viewer-video"
-          // @ts-ignore
           style={videoStyle}
           onPlay={IS_IOS ? () => setIsPlayed(true) : undefined}
           onEnded={handleEnded}

src/components/mediaViewer/VideoPlayerControls.tsx

@@ -180,12 +180,10 @@ function renderSeekLine(
       <div className="player-seekline-track">
         <div
           className="player-seekline-buffered"
-          // @ts-ignore teact feature
           style={`width: ${percentageBuffered || 0}%`}
         />
         <div
           className="player-seekline-played"
-          // @ts-ignore teact feature
           style={`width: ${percentagePlayed || 0}%`}
         />
       </div>

src/components/mediaViewer/ZoomControls.tsx

@@ -102,7 +102,6 @@ const ZoomControls: FC<OwnProps> = ({ isShown, onChangeZoom }) => {
         <div className="seekline-track">
           <div
             className="seekline-played"
-            // @ts-ignore teact feature
             style={`width: ${(zoomLevel - 1) * ONE_STEP_PERCENT}%`}
           />
           <input

src/components/middle/EmojiInteractionAnimation.tsx

@@ -93,7 +93,6 @@ const EmojiInteractionAnimation: FC<OwnProps & StateProps> = ({
       className={buildClassName(
         'EmojiInteractionAnimation', isHiding && 'hiding', isPlaying && 'playing', isReversed && 'reversed',
       )}
-      // @ts-ignore teact feature
       style={`--scale: ${scale}; --start-x: ${emojiInteraction.x}px; --start-y: ${emojiInteraction.y}px;`}
     >
       <AnimatedSticker

src/components/middle/MessageList.tsx

@@ -339,8 +339,6 @@ const MessageList: FC<OwnProps & StateProps> = ({
   // Handles updated message list, takes care of scroll repositioning
   useLayoutEffectWithPrevDeps(([
     prevMessageIds, prevIsViewportNewest, prevContainerHeight,
-  ]: [
-    typeof messageIds, typeof isViewportNewest, typeof containerHeight,
   ]) => {
     const container = containerRef.current!;
     listItemElementsRef.current = Array.from(container.querySelectorAll<HTMLDivElement>('.message-list-item'));
@@ -463,7 +461,7 @@ const MessageList: FC<OwnProps & StateProps> = ({
       console.timeEnd('scrollTop');
     }
     // This should match deps for `useOnChange` above
-  }, [messageIds, isViewportNewest, containerHeight, hasTools]);
+  }, [messageIds, isViewportNewest, containerHeight, hasTools] as const);
 
   useEffectWithPrevDeps(([prevIsSelectModeActive]) => {
     if (prevIsSelectModeActive !== undefined) {

src/components/middle/MiddleColumn.tsx

@@ -363,7 +363,6 @@ const MiddleColumn: FC<StateProps> = ({
       id="MiddleColumn"
       className={className}
       onTransitionEnd={handleOpenEnd}
-      // @ts-ignore teact-feature
       style={`
         --composer-hidden-scale: ${composerHiddenScale};
         --toolbar-hidden-scale: ${toolbarHiddenScale};
@@ -379,7 +378,6 @@ const MiddleColumn: FC<StateProps> = ({
     >
       <div
         id="middle-column-bg"
-        // @ts-ignore
         style={customBackgroundValue ? `--custom-background: ${customBackgroundValue}` : undefined}
       />
       <div id="middle-column-portals" />

src/components/middle/PinnedMessageNavigation.tsx

@@ -84,7 +84,6 @@ const PinnedMessageNavigation: FC<OwnProps> = ({
       <div
         className="pinned-message-border-wrapper"
         ref={containerRef}
-        // @ts-ignore
         style={
           `clip-path: url("#${clipPathId}"); width: 2px;
           height: ${trackHeight}px; transform: translateY(-${trackTranslateY}px);`
@@ -93,7 +92,6 @@ const PinnedMessageNavigation: FC<OwnProps> = ({
         <span />
         <div
           className="pinned-message-border-mark"
-          // @ts-ignore
           style={`height: ${markHeight}px; transform: translateY(${markTranslateY}px);`}
         />
       </div>

src/components/middle/composer/EmojiCategory.tsx

@@ -52,7 +52,6 @@ const EmojiCategory: FC<OwnProps> = ({
       </p>
       <div
         className={buildClassName('symbol-set-container', transitionClassNames)}
-        // @ts-ignore
         style={`height: ${height}px;`}
         dir={lang.isRtl ? 'rtl' : undefined}
       >

src/components/middle/composer/StickerSet.tsx

@@ -56,7 +56,6 @@ const StickerSet: FC<OwnProps> = ({
       <p className="symbol-set-name">{stickerSet.title}</p>
       <div
         className={buildClassName('symbol-set-container', transitionClassNames)}
-        // @ts-ignore
         style={`height: ${height}px;`}
       >
         {shouldRender && stickerSet.stickers && stickerSet.stickers.map((sticker) => (

src/components/middle/composer/TextFormatter.tsx

@@ -406,7 +406,6 @@ const TextFormatter: FC<OwnProps> = ({
     <div
       ref={containerRef}
       className={className}
-      // @ts-ignore Teact feature
       style={style}
       onKeyDown={handleContainerKeyDown}
     >

src/components/middle/message/Album.tsx

@@ -122,7 +122,6 @@ const Album: FC<OwnProps & StateProps> = ({
   return (
     <div
       className="Album"
-      // @ts-ignore
       style={`width: ${containerWidth}px; height: ${containerHeight}px;`}
     >
       {album.messages.map(renderAlbumMessage)}

src/components/middle/message/Message.tsx

@@ -827,7 +827,6 @@ const Message: FC<OwnProps & StateProps> = ({
       ref={ref}
       id={`message${messageId}`}
       className={containerClassName}
-      // @ts-ignore teact feature
       style={metaSafeAuthorWidth ? `--meta-safe-author-width: ${metaSafeAuthorWidth}px` : undefined}
       data-message-id={messageId}
       onMouseDown={handleMouseDown}
@@ -867,7 +866,6 @@ const Message: FC<OwnProps & StateProps> = ({
         <div
           ref={contentRef}
           className={contentClassName}
-          // @ts-ignore
           style={style}
           dir="auto"
         >

src/components/middle/message/MessageContextMenu.tsx

@@ -216,7 +216,6 @@ const MessageContextMenu: FC<OwnProps> = ({
 
       <div
         className="scrollable-content custom-scroll"
-        // @ts-ignore teact feature
         style={menuStyle}
         ref={scrollableRef}
       >

src/components/middle/message/Photo.tsx

@@ -153,14 +153,12 @@ const Photo: FC<OwnProps> = ({
       id={id}
       ref={ref}
       className={className}
-      // @ts-ignore teact feature
       style={style}
       onClick={isUploading ? undefined : handleClick}
     >
       <canvas
         ref={thumbRef}
         className="thumbnail"
-        // @ts-ignore teact feature
         style={`width: ${width}px; height: ${height}px`}
       />
       <img

src/components/middle/message/PollOption.tsx

@@ -89,7 +89,6 @@ const PollOption: FC<OwnProps> = ({
           <div className="poll-option-corner" ref={lineRef} />
           <div
             className="poll-option-line"
-            // @ts-ignore
             style={lineStyle}
           />
         </div>

src/components/middle/message/ReactionSelectorReaction.tsx

@@ -59,7 +59,6 @@ const ReactionSelectorReaction: FC<OwnProps> = ({ reaction, previewIndex, onSend
             'static',
             isReady ? [staticClassNames] : undefined,
           )}
-          // @ts-ignore
           style={`background-position-x: ${previewIndex * -32}px;`}
         />
       )}

src/components/middle/message/RoundVideo.tsx

@@ -207,7 +207,6 @@ const RoundVideo: FC<OwnProps> = ({
         <canvas
           ref={thumbRef}
           className="thumbnail"
-          // @ts-ignore teact feature
           style={`width: ${ROUND_VIDEO_DIMENSIONS_PX}px; height: ${ROUND_VIDEO_DIMENSIONS_PX}px`}
         />
       </div>

src/components/middle/message/Video.tsx

@@ -159,20 +159,17 @@ const Video: FC<OwnProps> = ({
       ref={ref}
       id={id}
       className={className}
-      // @ts-ignore teact feature
       style={style}
       onClick={isUploading ? undefined : handleClick}
     >
       <canvas
         ref={thumbRef}
         className="thumbnail"
-        // @ts-ignore teact feature
         style={`width: ${width}px; height: ${height}px;`}
       />
       <img
         src={previewBlobUrl}
         className={buildClassName('thumbnail', previewClassNames)}
-        // @ts-ignore teact feature
         style={`width: ${width}px; height: ${height}px;`}
         alt=""
         draggable={!isProtected}

src/components/middle/message/hocs/withSelectControl.tsx

@@ -57,7 +57,6 @@ export default function withSelectControl(WrappedComponent: FC) {
     return (
       <div
         className={buildClassName('album-item-select-wrapper', isSelected && 'is-selected')}
-        // @ts-ignore
         style={dimensions ? `left: ${dimensions.x}px; top: ${dimensions.y}px;` : ''}
         onClick={isInSelectMode ? handleMessageSelect : undefined}
       >

src/components/payment/CardInput.tsx

@@ -10,9 +10,7 @@ import InputText from '../ui/InputText';
 
 import './CardInput.scss';
 
-// @ts-ignore
 import mastercardIconPath from '../../assets/mastercard.svg';
-// @ts-ignore
 import visaIconPath from '../../assets/visa.svg';
 
 const CARD_NUMBER_MAX_LENGTH = 23;

src/components/test/TestPortal.tsx

@@ -26,7 +26,6 @@ const TestPortal: FC = () => {
       </div>
       <Portal>
         <div
-          // @ts-ignore
           style={`position: absolute; top: ${position}px; left: ${position}px; width: 250px;`}
         >
           <h2>

src/components/ui/Button.tsx

@@ -153,7 +153,6 @@ const Button: FC<OwnProps> = ({
       title={ariaLabel}
       tabIndex={tabIndex}
       dir={isRtl ? 'rtl' : undefined}
-      // @ts-ignore
       style={backgroundImage ? `background-image: url(${backgroundImage})` : undefined}
     >
       {isLoading ? (

src/components/ui/InfiniteScroll.tsx

@@ -225,7 +225,6 @@ const InfiniteScroll: FC<OwnProps> = ({
       {withAbsolutePositioning && items?.length ? (
         <div
           teactFastList={!noFastList}
-          // @ts-ignore
           style={`position: relative;${IS_ANDROID ? ` height: ${maxHeight}px;` : undefined}`}
         >
           {children}

src/components/ui/ListItem.tsx

@@ -160,7 +160,6 @@ const ListItem: FC<OwnProps> = ({
       ref={containerRef}
       className={fullClassName}
       dir={lang.isRtl ? 'rtl' : undefined}
-      // @ts-ignore
       style={style}
       onMouseDown={onMouseDown}
     >

src/components/ui/Menu.tsx

@@ -114,7 +114,6 @@ const Menu: FC<OwnProps> = ({
       onKeyDown={isOpen ? handleKeyDown : undefined}
       onMouseEnter={onMouseEnter}
       onMouseLeave={isOpen ? onMouseLeave : undefined}
-      // @ts-ignore teact feature
       style={style}
     >
       {isOpen && (
@@ -124,7 +123,6 @@ const Menu: FC<OwnProps> = ({
       <div
         ref={menuRef}
         className={bubbleClassName}
-        // @ts-ignore teact feature
         style={`transform-origin: ${transformOriginXStyle || positionX} ${transformOriginYStyle || positionY};${
           bubbleStyle || ''}`}
         onClick={autoClose ? onClose : undefined}

src/components/ui/RangeSlider.tsx

@@ -63,7 +63,6 @@ const RangeSlider: FC<OwnProps> = ({
       <div className="slider-main">
         <div
           className="slider-fill-track"
-          // @ts-ignore
           style={`width: ${trackWidth}%`}
         />
         <input

src/components/ui/RippleEffect.tsx

@@ -50,7 +50,6 @@ const RippleEffect: FC = () => {
     <div className="ripple-container" onMouseDown={handleMouseDown}>
       {ripples.map(({ x, y, size }) => (
         <span
-          // @ts-ignore
           style={`left: ${x}px; top: ${y}px; width: ${size}px; height: ${size}px;`}
         />
       ))}

src/hooks/useEffectWithPrevDeps.ts

@@ -1,10 +1,9 @@
 import { useEffect } from '../lib/teact/teact';
 import usePrevious from './usePrevious';
 
-const useEffectWithPrevDeps = <T extends any[], PT = T>(cb: (args: PT) => void, dependencies: T, debugKey?: string) => {
+const useEffectWithPrevDeps = <T extends any[]>(cb: (args: T | []) => void, dependencies: T, debugKey?: string) => {
   const prevDeps = usePrevious<T>(dependencies);
   return useEffect(() => {
-    // @ts-ignore (workaround for "could be instantiated with a different subtype" issue)
     return cb(prevDeps || []);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, dependencies, debugKey);

src/hooks/useLayoutEffectWithPrevDeps.ts

@@ -1,12 +1,11 @@
 import { useLayoutEffect } from '../lib/teact/teact';
 import usePrevious from './usePrevious';
 
-const useLayoutEffectWithPrevDeps = <T extends any[], PT = T>(
+const useLayoutEffectWithPrevDeps = <T extends readonly any[]>(
-  cb: (args: PT) => void, dependencies: T, debugKey?: string,
+  cb: (args: T | readonly []) => void, dependencies: T, debugKey?: string,
 ) => {
   const prevDeps = usePrevious<T>(dependencies);
   return useLayoutEffect(() => {
-    // @ts-ignore (workaround for "could be instantiated with a different subtype" issue)
     return cb(prevDeps || []);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, dependencies, debugKey);

src/hooks/useMedia.ts

@@ -5,11 +5,10 @@ import { ApiMediaFormat } from '../api/types';
 import * as mediaLoader from '../util/mediaLoader';
 import useForceUpdate from './useForceUpdate';
 
-const useMedia =  <T extends ApiMediaFormat = ApiMediaFormat.BlobUrl>(
+const useMedia = (
   mediaHash: string | false | undefined,
   noLoad = false,
-  // @ts-ignore (workaround for "could be instantiated with a different subtype" issue)
+  mediaFormat = ApiMediaFormat.BlobUrl,
-  mediaFormat: T = ApiMediaFormat.BlobUrl,
   cacheBuster?: number,
   delay?: number | false,
 ) => {

src/hooks/useMediaWithLoadProgress.ts

@@ -13,11 +13,10 @@ const STREAMING_PROGRESS = 0.75;
 const STREAMING_TIMEOUT = 1500;
 const PROGRESS_THROTTLE = 500;
 
-export default function useMediaWithLoadProgress<T extends ApiMediaFormat = ApiMediaFormat.BlobUrl>(
+export default function useMediaWithLoadProgress(
   mediaHash: string | undefined,
   noLoad = false,
-  // @ts-ignore (workaround for "could be instantiated with a different subtype" issue)
+  mediaFormat = ApiMediaFormat.BlobUrl,
-  mediaFormat: T = ApiMediaFormat.BlobUrl,
   cacheBuster?: number,
   delay?: number | false,
   isHtmlAllowed = false,

src/hooks/useMessageMediaMetadata.ts

@@ -14,7 +14,6 @@ import { buildMediaMetadata } from '../util/mediaSession';
 import { scaleImage, resizeImage } from '../util/imageResize';
 import { AVATAR_FULL_DIMENSIONS } from '../components/common/helpers/mediaDimensions';
 
-// @ts-ignore
 import telegramLogoPath from '../assets/telegram-logo-filled.svg';
 
 const LOGO_DIMENSIONS = { width: 200, height: 200 };

src/hooks/useOnChange.ts

@@ -1,9 +1,8 @@
 import usePrevious from './usePrevious';
 
-const useOnChange = <T extends any[], PT = T>(cb: (args: PT) => void, dependencies: T) => {
+const useOnChange = <T extends any[]>(cb: (args: T | []) => void, dependencies: T) => {
   const prevDeps = usePrevious<T>(dependencies);
   if (!prevDeps || dependencies.some((d, i) => d !== prevDeps[i])) {
-    // @ts-ignore (workaround for "could be instantiated with a different subtype" issue)
     cb(prevDeps || []);
   }
 };

src/lib/gramjs/tl/generationHelpers.js

@@ -163,7 +163,6 @@ function buildArgConfig(name, argType) {
         // Note that 'flags' is NOT the flags name; this
         // is determined by a previous argument
         // However, we assume that the argument will always be called 'flags'
-        // @ts-ignore
         const flagMatch = currentConfig.type.match(/flags.(\d+)\?([\w<>.]+)/);
 
         if (flagMatch) {
@@ -174,7 +173,6 @@ function buildArgConfig(name, argType) {
         }
 
         // Then check if the type is a Vector<REAL_TYPE>
-        // @ts-ignore
         const vectorMatch = currentConfig.type.match(/[Vv]ector<([\w\d.]+)>/);
 
         if (vectorMatch) {
@@ -182,7 +180,6 @@ function buildArgConfig(name, argType) {
 
             // If the type's first letter is not uppercase, then
             // it is a constructor and we use (read/write) its ID.
-            // @ts-ignore
             currentConfig.useVectorId = currentConfig.type.charAt(0) === 'V';
 
             // Update the type to match the one inside the vector
@@ -191,7 +188,6 @@ function buildArgConfig(name, argType) {
 
         // See use_vector_id. An example of such case is ipPort in
         // help.configSpecial
-        // @ts-ignore
         if (/^[a-z]$/.test(currentConfig.type.split('.')
             .pop()
             .charAt(0))

src/lib/teact/teact.ts

@@ -69,7 +69,7 @@ interface ComponentInstance {
       cursor: number;
       byCursor: {
         effect: () => void;
-        dependencies?: any[];
+        dependencies?: readonly any[];
         cleanup?: Function;
       }[];
     };
@@ -522,7 +522,7 @@ function useLayoutEffectBase(
   schedulerFn: typeof onTickEnd | typeof requestAnimationFrame,
   primarySchedulerFn: typeof onTickEnd | typeof requestAnimationFrame,
   effect: () => Function | void,
-  dependencies?: any[],
+  dependencies?: readonly any[],
   debugKey?: string,
 ) {
   const { cursor, byCursor } = renderingInstance.hooks.effects;
@@ -621,11 +621,11 @@ function useLayoutEffectBase(
   renderingInstance.hooks.effects.cursor++;
 }
 
-export function useEffect(effect: () => Function | void, dependencies?: any[], debugKey?: string) {
+export function useEffect(effect: () => Function | void, dependencies?: readonly any[], debugKey?: string) {
   return useLayoutEffectBase(fastRaf, fastRafPrimary, effect, dependencies, debugKey);
 }
 
-export function useLayoutEffect(effect: () => Function | void, dependencies?: any[], debugKey?: string) {
+export function useLayoutEffect(effect: () => Function | void, dependencies?: readonly any[], debugKey?: string) {
   return useLayoutEffectBase(onTickEnd, onTickEndPrimary, effect, dependencies, debugKey);
 }
 

src/modules/actions/ui/messages.ts

@@ -36,7 +36,6 @@ import {
 import { findLast } from '../../../util/iteratees';
 import { getServerTime } from '../../../util/serverTime';
 
-// @ts-ignore
 import versionNotification from '../../../versionNotification.txt';
 import parseMessageInput from '../../../util/parseMessageInput';
 

src/util/mediaSession.ts

@@ -94,13 +94,11 @@ export function setPositionState(state?: MediaPositionState) {
 
 export function setMicrophoneActive(active: boolean) {
   const { mediaSession } = window.navigator;
-  // @ts-ignore typings not updated yet
   mediaSession?.setMicrophoneActive?.(active);
 }
 
 export function setCameraActive(active: boolean) {
   const { mediaSession } = window.navigator;
-  // @ts-ignore typings not updated yet
   mediaSession?.setCameraActive?.(active);
 }
 

src/util/voiceRecording.ts

@@ -1,18 +1,8 @@
-// @ts-ignore
+import { IOpusRecorder } from 'opus-recorder';
-import encoderPath from 'file-loader!opus-recorder/dist/encoderWorker.min';
 
 export type Result = { blob: Blob; duration: number; waveform: number[] };
 
-interface IOpusRecorder extends Omit<MediaRecorder, 'start' | 'ondataavailable'> {
+const encoderPath = new URL('opus-recorder/dist/encoderWorker.min', import.meta.url).href;
-  new(options: AnyLiteral): IOpusRecorder;
-
-  start(stream?: MediaStreamAudioSourceNode): void;
-
-  sourceNode: MediaStreamAudioSourceNode;
-
-  ondataavailable: (typedArray: Uint8Array) => void;
-}
-
 const MIN_RECORDING_TIME = 1000;
 const POLYFILL_OPTIONS = { encoderPath, reuseWorker: true };
 const BLOB_PARAMS = { type: 'audio/ogg' };
@@ -25,7 +15,6 @@ let mediaRecorder: IOpusRecorder;
 
 export async function init() {
   if (!opusRecorderPromise) {
-    // @ts-ignore
     opusRecorderPromise = import('opus-recorder');
     OpusRecorder = (await opusRecorderPromise).default;
     mediaRecorder = new OpusRecorder(POLYFILL_OPTIONS);

webpack.config.js

@@ -8,7 +8,6 @@ const {
 const HtmlPlugin = require('html-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
-const TerserJSPlugin = require('terser-webpack-plugin');
 const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 
 dotenv.config();
@@ -86,25 +85,13 @@ module.exports = (env = {}, argv = {}) => {
           test: /\.(woff(2)?|ttf|eot|svg|png|jpg|tgs)(\?v=\d+\.\d+\.\d+)?$/,
           type: 'asset/resource',
         },
-        {
-          test: /-extra\.json$/,
-          loader: 'file-loader',
-          type: 'javascript/auto',
-          options: {
-            name: '[name].[contenthash].[ext]',
-          },
-        },
         {
           test: /\.wasm$/,
-          loader: 'file-loader',
+          type: 'asset/resource',
-          type: 'javascript/auto',
-          options: {
-            name: '[name].[contenthash].[ext]',
-          },
         },
         {
           test: /\.(txt|tl)$/i,
-          loader: 'raw-loader',
+          type: 'asset/source',
         },
       ],
     },
@@ -153,7 +140,6 @@ module.exports = (env = {}, argv = {}) => {
       optimization: {
         minimize: !env.noMinify,
         minimizer: [
-          new TerserJSPlugin({ sourceMap: true }),
           new CssMinimizerPlugin(),
         ],
       },