ref(TS ) Improve TS (#12491)

Remove global variables from files
Change type to interface

globals.d.ts

@@ -9,6 +9,11 @@ declare global {
         UI: any;
         API: any;
         conference: any;
+        debugLogs: any;
+        keyboardshortcut: {
+            registerShortcut: Function;
+            unregisterShortcut: Function;
+        }
     };
     const interfaceConfig: any;
 

react/features/authentication/components/web/LoginDialog.tsx

@@ -68,7 +68,7 @@ interface IProps extends WithTranslation {
 /**
  * The type of the React {@code Component} state of {@link LoginDialog}.
  */
-type State = {
+interface IState {
 
     /**
      * Authentication process starts before joining the conference room.
@@ -84,14 +84,14 @@ type State = {
      * The user entered local participant name.
      */
     username: string;
-};
+}
 
 /**
  * Component that renders the login in conference dialog.
  *
  *  @returns {React$Element<any>}
  */
-class LoginDialog extends Component<IProps, State> {
+class LoginDialog extends Component<IProps, IState> {
     /**
      * Initializes a new {@code LoginDialog} instance.
      *

react/features/base/audio-only/actions.ts

@@ -8,8 +8,6 @@ import { SET_AUDIO_ONLY } from './actionTypes';
 import logger from './logger';
 
 
-declare let APP: any;
-
 /**
  * Sets the audio-only flag for the current JitsiConference.
  *

react/features/base/avatar/components/AbstractStatelessAvatar.tsx

@@ -1,6 +1,6 @@
 import { PureComponent } from 'react';
 
-export type Props = {
+export interface IProps {
 
     /**
      * Color of the (initials based) avatar, if needed.
@@ -31,13 +31,13 @@ export type Props = {
      * The URL of the avatar to render.
      */
     url?: string | Function;
-};
+}
 
 /**
  * Implements an abstract stateless avatar component that renders an avatar purely from what gets passed through
  * props.
  */
-export default class AbstractStatelessAvatar<P extends Props> extends PureComponent<P> {
+export default class AbstractStatelessAvatar<P extends IProps> extends PureComponent<P> {
     /**
      * Checks if the passed prop is a loaded icon or not.
      *

react/features/base/avatar/components/native/StatelessAvatar.js

@@ -5,7 +5,7 @@ import { Image, Text, View } from 'react-native';
 
 import { Icon } from '../../../icons';
 import { type StyleType } from '../../../styles';
-import AbstractStatelessAvatar, { type Props as AbstractProps } from '../AbstractStatelessAvatar';
+import AbstractStatelessAvatar, { type IProps as AbstractProps } from '../AbstractStatelessAvatar';
 
 import styles from './styles';
 

react/features/base/avatar/components/web/StatelessAvatar.tsx

@@ -3,10 +3,10 @@ import clsx from 'clsx';
 import React from 'react';
 
 import Icon from '../../../icons/components/Icon';
-import AbstractStatelessAvatar, { type Props as AbstractProps } from '../AbstractStatelessAvatar';
+import AbstractStatelessAvatar, { type IProps as AbstractProps } from '../AbstractStatelessAvatar';
 import { PRESENCE_AVAILABLE_COLOR, PRESENCE_AWAY_COLOR, PRESENCE_BUSY_COLOR, PRESENCE_IDLE_COLOR } from '../styles';
 
-type Props = AbstractProps & {
+interface IProps extends AbstractProps {
 
     /**
      * External class name passed through props.
@@ -42,7 +42,7 @@ type Props = AbstractProps & {
      * Indicates whether to load the avatar using CORS or not.
      */
     useCORS?: boolean;
-};
+}
 
 /**
  * Creates the styles for the component.
@@ -115,14 +115,14 @@ const styles = () => {
  * Implements a stateless avatar component that renders an avatar purely from what gets passed through
  * props.
  */
-class StatelessAvatar extends AbstractStatelessAvatar<Props> {
+class StatelessAvatar extends AbstractStatelessAvatar<IProps> {
 
     /**
      * Instantiates a new {@code Component}.
      *
      * @inheritdoc
      */
-    constructor(props: Props) {
+    constructor(props: IProps) {
         super(props);
 
         this._onAvatarLoadError = this._onAvatarLoadError.bind(this);

react/features/base/components/participants-pane-list/ListItem.tsx

@@ -7,7 +7,7 @@ import { isMobileBrowser } from '../../environment/utils';
 import { withPixelLineHeight } from '../../styles/functions.web';
 import participantsPaneTheme from '../themes/participantsPaneTheme.json';
 
-type Props = {
+interface IProps {
 
     /**
      * List item actions.
@@ -74,7 +74,7 @@ type Props = {
      */
     trigger: string;
 
-};
+}
 
 const useStyles = makeStyles()((theme: Theme) => {
     return {
@@ -188,7 +188,7 @@ const ListItem = ({
     testId,
     textChildren,
     trigger
-}: Props) => {
+}: IProps) => {
     const { classes: styles, cx } = useStyles();
     const _isMobile = isMobileBrowser();
     let timeoutHandler: number;

react/features/base/config/reducer.ts

@@ -14,8 +14,6 @@ import {
 import { IConfig } from './configType';
 import { _cleanupConfig } from './functions';
 
-declare let interfaceConfig: any;
-
 /**
  * The initial state of the feature base/config when executing in a
  * non-React Native environment. The mandatory configuration to be passed to

react/features/base/dialog/components/web/AbstractDialogTab.ts

@@ -3,7 +3,7 @@ import { Component } from 'react';
 /**
  * The type of the React {@code Component} props of {@link AbstractDialogTab}.
  */
-export type Props = {
+export interface IProps {
 
     /**
      * Function that closes the dialog.
@@ -19,15 +19,15 @@ export type Props = {
      * The id of the tab.
      */
     tabId: number;
-};
+}
 
 
 /**
  * Abstract React {@code Component} for tabs of the DialogWithTabs component.
  *
  * @augments Component
  */
-class AbstractDialogTab<P extends Props, S> extends Component<P, S> {
+class AbstractDialogTab<P extends IProps, S> extends Component<P, S> {
     /**
      * Initializes a new {@code AbstractDialogTab} instance.
      *

react/features/base/environment/environment.ts

@@ -25,8 +25,6 @@ const browserNameToCheck = {
     safari: browser.isSafari.bind(browser)
 };
 
-declare let interfaceConfig: any;
-
 /**
  * Returns whether or not jitsi is optimized and targeted for the  provided
  * browser name.

react/features/base/i18n/i18next.ts

@@ -1,5 +1,3 @@
-declare let APP: any;
-
 import COUNTRIES_RESOURCES from 'i18n-iso-countries/langs/en.json';
 import i18next from 'i18next';
 import I18nextXHRBackend from 'i18next-xhr-backend';

react/features/base/i18n/languageDetector.web.ts

@@ -3,8 +3,6 @@ import BrowserLanguageDetector from 'i18next-browser-languagedetector';
 import configLanguageDetector from './configLanguageDetector';
 import customNavigatorDetector from './customNavigatorDetector';
 
-declare let interfaceConfig: any;
-
 /**
  * The ordered list (by name) of language detectors to be utilized as backends
  * by the singleton language detector for Web.

react/features/base/icons/components/Icon.tsx

@@ -6,7 +6,7 @@ import { Container } from '../../react/base';
 // @ts-ignore
 import { styleTypeToObject } from '../../styles';
 
-type Props = {
+interface IProps {
 
     /**
      * The id of the element this button icon controls.
@@ -102,18 +102,18 @@ type Props = {
      * TabIndex  for the Icon.
      */
     tabIndex?: number;
-};
+}
 
 export const DEFAULT_COLOR = navigator.product === 'ReactNative' ? 'white' : undefined;
 export const DEFAULT_SIZE = navigator.product === 'ReactNative' ? 36 : 22;
 
 /**
  * Implements an Icon component that takes a loaded SVG file as prop and renders it as an icon.
  *
- * @param {Props} props - The props of the component.
+ * @param {IProps} props - The props of the component.
  * @returns {ReactElement}
  */
-export default function Icon(props: Props) {
+export default function Icon(props: IProps) {
     const {
         className,
         color,
@@ -135,7 +135,7 @@ export default function Icon(props: Props) {
         onKeyPress,
         onKeyDown,
         ...rest
-    }: Props = props;
+    }: IProps = props;
 
     const {
         color: styleColor,

react/features/base/label/components/native/Label.js

@@ -1,12 +1,9 @@
 // @flow
-import React from 'react';
+import React, { Component } from 'react';
 import { Animated, Text } from 'react-native';
 
 import Icon from '../../../icons/components/Icon';
 import { type StyleType, combineStyles } from '../../../styles';
-import AbstractLabel, {
-    type Props as AbstractProps
-} from '../AbstractLabel';
 
 import styles from './styles';
 
@@ -20,7 +17,12 @@ const STATUS_IN_PROGRESS = 'in_progress';
  */
 const STATUS_OFF = 'off';
 
-type Props = AbstractProps & {
+type Props = {
+
+    /**
+     * An SVG icon to be rendered as the content of the label.
+     */
+    icon?: Function,
 
     /**
      * Color for the icon.
@@ -39,10 +41,16 @@ type Props = AbstractProps & {
      */
     style?: ?StyleType,
 
+    /**
+     * String or component that will be rendered as the label itself.
+     */
+    text?: string,
+
     /**
      * Custom styles for the text.
      */
     textStyle?: ?StyleType
+
 };
 
 type State = {
@@ -58,7 +66,7 @@ type State = {
  * Renders a circular indicator to be used for status icons, such as recording
  * on, audio-only conference, video quality and similar.
  */
-export default class Label extends AbstractLabel<Props, State> {
+export default class Label extends Component<Props, State> {
     /**
      * A reference to the started animation of this label.
      */

react/features/base/logging/ExternalApiLogTransport.ts

@@ -1,5 +1,3 @@
-declare let APP: any;
-
 /**
  * Constructs a log transport object for use with external API.
  *

react/features/base/logging/middleware.ts

@@ -19,8 +19,6 @@ import JitsiMeetLogStorage from './JitsiMeetLogStorage';
 import { SET_LOGGING_CONFIG } from './actionTypes';
 import { setLogCollector, setLoggingConfig } from './actions';
 
-declare let APP: any;
-
 /**
  * The Redux middleware of the feature base/logging.
  *

react/features/base/media/subscriber.ts

@@ -1,9 +1,6 @@
 import { IReduxState, IStore } from '../../app/types';
 import StateListenerRegistry from '../redux/StateListenerRegistry';
 
-
-declare let APP: any;
-
 /**
  * Notifies when the local audio mute state changes.
  */