Upgrade @types (#9261)

* Upgrade @types

* Make typescript happier

src/components/views/elements/AppTile.tsx

@@ -18,7 +18,7 @@ limitations under the License.
 */
 
 import url from 'url';
-import React, { ContextType, createRef, MutableRefObject } from 'react';
+import React, { ContextType, createRef, MutableRefObject, ReactNode } from 'react';
 import classNames from 'classnames';
 import { MatrixCapabilities } from "matrix-widget-api";
 import { Room, RoomEvent } from "matrix-js-sdk/src/models/room";
@@ -666,7 +666,7 @@ export default class AppTile extends React.Component<IProps, IState> {
             );
         }
 
-        const layoutButtons: React.ReactNodeArray = [];
+        const layoutButtons: ReactNode[] = [];
         if (this.props.showLayoutButtons) {
             const isMaximised = WidgetLayoutStore.instance.
                 isInContainer(this.props.room, this.props.app, Container.Center);

src/components/views/elements/Dropdown.tsx

@@ -300,7 +300,7 @@ export default class Dropdown extends React.Component<DropdownProps, IState> {
     }
 
     private getMenuOptions() {
-        const options = React.Children.map(this.props.children, (child) => {
+        const options = React.Children.map(this.props.children, (child: ReactElement) => {
             const highlighted = this.state.highlightedOption === child.key;
             return (
                 <MenuOption

src/components/views/elements/Field.tsx

@@ -38,8 +38,6 @@ export interface IValidateOpts {
 interface IProps {
     // The field's ID, which binds the input and label together. Immutable.
     id?: string;
-    // The field's type (when used as an <input>). Defaults to "text".
-    type?: string;
     // id of a <datalist> element for suggestions
     list?: string;
     // The field's label string.

src/components/views/elements/ReplyChain.tsx

@@ -81,7 +81,7 @@ export default class ReplyChain extends React.Component<IProps, IState> {
 
     private unmounted = false;
     private room: Room;
-    private blockquoteRef = React.createRef<HTMLElement>();
+    private blockquoteRef = React.createRef<HTMLQuoteElement>();
 
     constructor(props: IProps, context: React.ContextType<typeof RoomContext>) {
         super(props, context);

src/components/views/rooms/RoomContextDetails.tsx

@@ -15,24 +15,22 @@ limitations under the License.
 */
 
 import { Room } from "matrix-js-sdk/src/matrix";
-import React, { ComponentPropsWithoutRef, ElementType } from "react";
+import React, { HTMLAttributes, ReactHTML } from "react";
 
 import { roomContextDetails } from "../../../utils/i18n-helpers";
 
-type Props<T extends ElementType> = ComponentPropsWithoutRef<T> & {
+type Props<T extends keyof ReactHTML> = HTMLAttributes<T> & {
     component?: T;
     room: Room;
 };
 
-export function RoomContextDetails<T extends ElementType>({ room, component: Component = "div", ...other }: Props<T>) {
+export function RoomContextDetails<T extends keyof ReactHTML>({ room, component, ...other }: Props<T>) {
     const contextDetails = roomContextDetails(room);
     if (contextDetails) {
-        return <Component
-            {...other}
-            aria-label={contextDetails.ariaLabel}
-        >
-            { contextDetails.details }
-        </Component>;
+        return React.createElement(component ?? "div", {
+            ...other,
+            "aria-label": contextDetails.ariaLabel,
+        }, [contextDetails.details]);
     }
 
     return null;