Enable tsc alwaysStrict, strictBindCallApply, noImplicitThis (#9600)

* Enable tsc alwaysStrict

* Enable tsc strictBindCallApply

* Enable tsc noImplicitThis

* Add d.ts

* Improve types

* Add ?

* Increase coverage

* Improve coverage

src/components/views/elements/Draggable.tsx

@@ -47,7 +47,7 @@ export default class Draggable extends React.Component<IProps, IState> {
         };
     }
 
-    private onMouseDown = (event: MouseEvent): void => {
+    private onMouseDown = (event: React.MouseEvent): void => {
         this.setState({
             location: {
                 currentX: event.clientX,
@@ -74,6 +74,6 @@ export default class Draggable extends React.Component<IProps, IState> {
     }
 
     render() {
-        return <div className={this.props.className} onMouseDown={this.onMouseDown.bind(this)} />;
+        return <div className={this.props.className} onMouseDown={this.onMouseDown} />;
     }
 }

src/components/views/elements/IRCTimelineProfileResizer.tsx

@@ -48,7 +48,7 @@ export default class IRCTimelineProfileResizer extends React.Component<IProps, I
         }, () => this.updateCSSWidth(this.state.width));
     }
 
-    private dragFunc = (location: ILocationState, event: React.MouseEvent<Element, MouseEvent>): ILocationState => {
+    private dragFunc = (location: ILocationState, event: MouseEvent): ILocationState => {
         const offset = event.clientX - location.currentX;
         const newWidth = this.state.width + offset;
 
@@ -77,7 +77,7 @@ export default class IRCTimelineProfileResizer extends React.Component<IProps, I
         this.state.IRCLayoutRoot.style.setProperty("--name-width", newWidth + "px");
     }
 
-    private onMoueUp(event: MouseEvent) {
+    private onMoueUp = () => {
         if (this.props.roomId) {
             SettingsStore.setValue(
                 "ircDisplayNameWidth",
@@ -86,13 +86,13 @@ export default class IRCTimelineProfileResizer extends React.Component<IProps, I
                 this.state.width,
             );
         }
-    }
+    };
 
     render() {
         return <Draggable
             className="mx_ProfileResizer"
-            dragFunc={this.dragFunc.bind(this)}
-            onMouseUp={this.onMoueUp.bind(this)}
+            dragFunc={this.dragFunc}
+            onMouseUp={this.onMoueUp}
         />;
     }
 }

src/components/views/elements/Validation.tsx

@@ -15,7 +15,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-/* eslint-disable @typescript-eslint/no-invalid-this */
 import React from "react";
 import classNames from "classnames";
 
@@ -46,7 +45,7 @@ interface IArgs<T, D = void> {
 export interface IFieldState {
     value: string;
     focused: boolean;
-    allowEmpty: boolean;
+    allowEmpty?: boolean;
 }
 
 export interface IValidationResult {
@@ -80,10 +79,13 @@ export interface IValidationResult {
  *     A validation function that takes in the current input value and returns
  *     the overall validity and a feedback UI that can be rendered for more detail.
  */
-export default function withValidation<T = undefined, D = void>({
+export default function withValidation<T = void, D = void>({
     description, hideDescriptionIfValid, deriveData, rules,
 }: IArgs<T, D>) {
-    return async function onValidate({ value, focused, allowEmpty = true }: IFieldState): Promise<IValidationResult> {
+    return async function onValidate(
+        this: T,
+        { value, focused, allowEmpty = true }: IFieldState,
+    ): Promise<IValidationResult> {
         if (!value && allowEmpty) {
             return {
                 valid: null,
@@ -96,7 +98,7 @@ export default function withValidation<T = undefined, D = void>({
 
         const results: IResult[] = [];
         let valid = true;
-        if (rules && rules.length) {
+        if (rules?.length) {
             for (const rule of rules) {
                 if (!rule.key || !rule.test) {
                     continue;