Update typescript eslint to v4.8 (#83520) (#83677)

* update deps

* update rules

use type-aware @typescript-eslint/no-shadow instead of no-shadow. do not use no-undef, rely on TypeScript instead

* fix or mute all lint errors

* react-hooks eslint plugin fails on ? syntax

* fix wrong typings in viz

* remove React as a global type

* fix eslint errors

* update version to 4.8.1

* fix a new error

Author: mshustov

.eslintrc.js

@@ -867,7 +867,8 @@ module.exports = {
         'no-shadow-restricted-names': 'error',
         'no-sparse-arrays': 'error',
         'no-this-before-super': 'error',
-        'no-undef': 'error',
+        // rely on typescript
+        'no-undef': 'off',
         'no-unreachable': 'error',
         'no-unsafe-finally': 'error',
         'no-useless-call': 'error',
@@ -1002,7 +1003,8 @@ module.exports = {
         'no-shadow-restricted-names': 'error',
         'no-sparse-arrays': 'error',
         'no-this-before-super': 'error',
-        'no-undef': 'error',
+        // rely on typescript
+        'no-undef': 'off',
         'no-unreachable': 'error',
         'no-unsafe-finally': 'error',
         'no-useless-call': 'error',

examples/state_containers_examples/public/todo/todo.tsx

@@ -313,7 +313,7 @@ export const TodoAppPage: React.FC<{
 
 function withDefaultState<State extends BaseState>(
   stateContainer: BaseStateContainer<State>,
-  // eslint-disable-next-line no-shadow
+  // eslint-disable-next-line @typescript-eslint/no-shadow
   defaultState: State
 ): INullableBaseStateContainer<State> {
   return {

examples/state_containers_examples/public/with_data_services/components/app.tsx

@@ -180,6 +180,7 @@ function useGlobalStateSyncing(
   }, [query, kbnUrlStateStorage]);
 }
 
+// eslint-disable-next-line @typescript-eslint/no-shadow
 function useAppStateSyncing<AppState extends QueryState>(
   appStateContainer: BaseStateContainer<AppState>,
   query: DataPublicPluginStart['query'],

package.json

@@ -564,8 +564,8 @@
     "@types/xml2js": "^0.4.5",
     "@types/yauzl": "^2.9.1",
     "@types/zen-observable": "^0.8.0",
-    "@typescript-eslint/eslint-plugin": "^3.10.0",
-    "@typescript-eslint/parser": "^3.10.0",
+    "@typescript-eslint/eslint-plugin": "^4.8.1",
+    "@typescript-eslint/parser": "^4.8.1",
     "@welldone-software/why-did-you-render": "^5.0.0",
     "@yarnpkg/lockfile": "^1.1.0",
     "abab": "^1.0.4",
@@ -641,7 +641,7 @@
     "eslint-plugin-prefer-object-spread": "^1.2.1",
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-react": "^7.20.3",
-    "eslint-plugin-react-hooks": "^4.0.4",
+    "eslint-plugin-react-hooks": "^4.2.0",
     "eslint-plugin-react-perf": "^3.2.3",
     "expose-loader": "^0.7.5",
     "faker": "1.1.0",

packages/elastic-eslint-config-kibana/typescript.js

@@ -190,6 +190,11 @@ module.exports = {
           '@typescript-eslint/no-extra-non-null-assertion': 'error',
           '@typescript-eslint/no-misused-new': 'error',
           '@typescript-eslint/no-namespace': 'error',
+          '@typescript-eslint/no-shadow': 'error',
+          // rely on typescript
+          '@typescript-eslint/no-undef': 'off',
+          'no-undef': 'off',
+
           '@typescript-eslint/triple-slash-reference': ['error', {
             path: 'never',
             types: 'never',
@@ -219,7 +224,6 @@ module.exports = {
           'no-eval': 'error',
           'no-new-wrappers': 'error',
           'no-script-url': 'error',
-          'no-shadow': 'error',
           'no-throw-literal': 'error',
           'no-undef-init': 'error',
           'no-unsafe-finally': 'error',

src/core/public/utils/crypto/sha256.ts

@@ -130,7 +130,7 @@ type BufferEncoding =
   | 'binary'
   | 'hex';
 
-/* eslint-disable  no-bitwise, no-shadow */
+/* eslint-disable  no-bitwise, @typescript-eslint/no-shadow */
 export class Sha256 {
   private _a: number;
   private _b: number;

src/core/server/http/router/validator/validator.ts

@@ -143,8 +143,8 @@ export type RouteValidatorFullConfig<P, Q, B> = RouteValidatorConfig<P, Q, B> &
  * @internal
  */
 export class RouteValidator<P = {}, Q = {}, B = {}> {
-  public static from<P = {}, Q = {}, B = {}>(
-    opts: RouteValidator<P, Q, B> | RouteValidatorFullConfig<P, Q, B>
+  public static from<_P = {}, _Q = {}, _B = {}>(
+    opts: RouteValidator<_P, _Q, _B> | RouteValidatorFullConfig<_P, _Q, _B>
   ) {
     if (opts instanceof RouteValidator) {
       return opts;

src/plugins/es_ui_shared/static/forms/hook_form_lib/hooks/use_field.ts

@@ -118,16 +118,16 @@ export const useField = <T, FormType = FormData, I = T>(
    * updating the "value" state.
    */
   const formatInputValue = useCallback(
-    <T>(inputValue: unknown): T => {
+    <U>(inputValue: unknown): U => {
       const isEmptyString = typeof inputValue === 'string' && inputValue.trim() === '';
 
       if (isEmptyString || !formatters) {
-        return inputValue as T;
+        return inputValue as U;
       }
 
       const formData = __getFormData$().value;
 
-      return formatters.reduce((output, formatter) => formatter(output, formData), inputValue) as T;
+      return formatters.reduce((output, formatter) => formatter(output, formData), inputValue) as U;
     },
     [formatters, __getFormData$]
   );

src/plugins/kibana_utils/common/state_containers/create_state_container_react_helpers.test.tsx

@@ -97,11 +97,11 @@ test('context receives stateContainer', () => {
   const { Provider, context } = createStateContainerReactHelpers<typeof stateContainer>();
 
   ReactDOM.render(
-    /* eslint-disable no-shadow */
+    /* eslint-disable @typescript-eslint/no-shadow */
     <Provider value={stateContainer}>
       <context.Consumer>{(stateContainer) => stateContainer.get().foo}</context.Consumer>
     </Provider>,
-    /* eslint-enable no-shadow */
+    /* eslint-enable @typescript-eslint/no-shadow */
     container
   );
 
@@ -116,7 +116,7 @@ describe('hooks', () => {
       const stateContainer = createStateContainer({ foo: 'bar' });
       const { Provider, useContainer } = createStateContainerReactHelpers<typeof stateContainer>();
       const Demo: React.FC<{}> = () => {
-        // eslint-disable-next-line no-shadow
+        // eslint-disable-next-line @typescript-eslint/no-shadow
         const stateContainer = useContainer();
         return <>{stateContainer.get().foo}</>;
       };

src/plugins/kibana_utils/demos/state_sync/url.ts

@@ -56,9 +56,9 @@ export const result = Promise.resolve()
   });
 
 function withDefaultState<State extends BaseState>(
-  // eslint-disable-next-line no-shadow
+  // eslint-disable-next-line @typescript-eslint/no-shadow
   stateContainer: BaseStateContainer<State>,
-  // eslint-disable-next-line no-shadow
+  // eslint-disable-next-line @typescript-eslint/no-shadow
   defaultState: State
 ): INullableBaseStateContainer<State> {
   return {