ref: set noImplicitAny compiler setting to true (#83366)

requires getsentry/getsentry#16121

refs getsentry/frontend-tsc#79

This PR turns on the `noImplicitAny` compiler setting for the `sentry`
repository.

Author: TkDodo

api-docs/index.ts

@@ -78,8 +78,8 @@ function build(originalFile, _, bundleTo) {
   );
 }
 
-let originalFile;
-let targetDirValue;
+let originalFile: any;
+let targetDirValue: any;
 
 const argv = process.argv.slice(2);
 

config/tsconfig.base.json

@@ -35,7 +35,7 @@
     // Type checking specific options
     "alwaysStrict": false,
     "noFallthroughCasesInSwitch": true,
-    "noImplicitAny": false,
+    "noImplicitAny": true,
     "noImplicitReturns": true,
     "noImplicitThis": true,
     "noUnusedLocals": true,

eslint.config.mjs

@@ -12,14 +12,18 @@
 import * as emotion from '@emotion/eslint-plugin';
 import eslint from '@eslint/js';
 import prettier from 'eslint-config-prettier';
+// @ts-expect-error TS(7016): Could not find a declaration file
 import importPlugin from 'eslint-plugin-import';
 import jest from 'eslint-plugin-jest';
 import jestDom from 'eslint-plugin-jest-dom';
 import react from 'eslint-plugin-react';
+// @ts-expect-error TS(7016): Could not find a declaration file
 import reactHooks from 'eslint-plugin-react-hooks';
+// @ts-expect-error TS(7016): Could not find a declaration file
 import sentry from 'eslint-plugin-sentry';
 import simpleImportSort from 'eslint-plugin-simple-import-sort';
 import testingLibrary from 'eslint-plugin-testing-library';
+// @ts-expect-error TS (7016): Could not find a declaration file
 import typescriptSortKeys from 'eslint-plugin-typescript-sort-keys';
 import globals from 'globals';
 import invariant from 'invariant';

package.json

@@ -188,6 +188,7 @@
     "@testing-library/jest-dom": "6.4.5",
     "@testing-library/react": "16.0.0",
     "@testing-library/user-event": "14.5.2",
+    "@types/eslint-config-prettier": "^6.11.3",
     "@types/node": "^22.9.1",
     "babel-gettext-extractor": "^4.1.3",
     "babel-jest": "29.7.0",

static/app/__mocks__/api.tsx

@@ -196,8 +196,7 @@ class Client implements ApiNamespace.Client {
     const asyncDelay = Client.asyncDelay;
 
     return (...args: T) => {
-      // @ts-expect-error
-      if (RealApi.hasProjectBeenRenamed(...args)) {
+      if ((RealApi.hasProjectBeenRenamed as any)(...args)) {
         return;
       }
       respond(asyncDelay, func, ...args);

static/app/actionCreators/formSearch.tsx

@@ -30,9 +30,9 @@ const createSearchMap = ({
   return listOfFields.map<FormSearchField>(field => ({
     ...other,
     route,
-    title: typeof field !== 'function' ? (field.label as string) : undefined,
-    description: typeof field !== 'function' ? (field.help as string) : undefined,
-    field,
+    title: typeof field !== 'function' ? (field?.label as string) : undefined,
+    description: typeof field !== 'function' ? (field?.help as string) : undefined,
+    field: field!,
   }));
 };
 
@@ -42,7 +42,7 @@ export function loadSearchMap() {
   const context = require.context('../data/forms', true, /\.tsx?$/);
 
   // Get a list of all form fields defined in `../data/forms`
-  const allFormFields: FormSearchField[] = context.keys().flatMap(key => {
+  const allFormFields: FormSearchField[] = context.keys().flatMap((key: any) => {
     const mod = context(key);
 
     // Since we're dynamically importing an entire directly, there could be malformed modules defined?

static/app/actionCreators/group.tsx

@@ -256,8 +256,12 @@ export function paramsToQueryArgs(params: ParamsType): QueryArgs {
   // only include date filters if they are not null/undefined
   if (params.query) {
     ['start', 'end', 'period', 'utc'].forEach(prop => {
-      if (params[prop] !== null && params[prop] !== undefined) {
-        p[prop === 'period' ? 'statsPeriod' : prop] = params[prop];
+      if (
+        params[prop as keyof typeof params] !== null &&
+        params[prop as keyof typeof params] !== undefined
+      ) {
+        (p as any)[prop === 'period' ? 'statsPeriod' : prop] =
+          params[prop as keyof typeof params];
       }
     });
   }

static/app/actionCreators/indicator.tsx

@@ -51,12 +51,9 @@ export function addMessage(
 
   // XXX: Debug for https://sentry.io/organizations/sentry/issues/1595204979/
   if (
-    // @ts-expect-error
-    typeof msg?.message !== 'undefined' &&
-    // @ts-expect-error
-    typeof msg?.code !== 'undefined' &&
-    // @ts-expect-error
-    typeof msg?.extra !== 'undefined'
+    typeof (msg as any)?.message !== 'undefined' &&
+    typeof (msg as any)?.code !== 'undefined' &&
+    typeof (msg as any)?.extra !== 'undefined'
   ) {
     Sentry.captureException(new Error('Attempt to XHR response to Indicators'));
   }

static/app/actionCreators/monitors.tsx

@@ -70,7 +70,9 @@ export async function updateMonitor(
     // If we are updating a single value in the monitor we can read the
     // validation error for that key, otherwise fallback to the default error
     const validationError =
-      updateKeys.length === 1 ? respError.responseJSON?.[updateKeys[0]!]?.[0] : undefined;
+      updateKeys.length === 1
+        ? (respError.responseJSON?.[updateKeys[0]!] as any)?.[0]
+        : undefined;
 
     logException(err);
     addErrorMessage(validationError ?? t('Unable to update monitor.'));

static/app/actionCreators/prompts.tsx

@@ -290,12 +290,12 @@ export async function batchedPromptsCheck<T extends readonly string[]>(
   for (const featureName of features) {
     const item = responseFeatures[featureName];
     if (item) {
-      result[featureName] = {
+      (result as any)[featureName] = {
         dismissedTime: item.dismissed_ts,
         snoozedTime: item.snoozed_ts,
       };
     } else {
-      result[featureName] = null;
+      (result as any)[featureName] = null;
     }
   }
   return result as {[key in T[number]]: PromptData};

static/app/api.tsx

@@ -356,7 +356,7 @@ export class Client {
 
       // Check if API response is a 302 -- means project slug was renamed and user
       // needs to be redirected
-      // @ts-expect-error
+      // @ts-ignore TS(2556): A spread argument must either have a tuple type or... Remove this comment to see the full error message
       if (hasProjectBeenRenamed(...args)) {
         return undefined;
       }

static/app/chartcuterie/discover.tsx

@@ -50,7 +50,7 @@ discoverCharts.push({
     }
 
     const stats = Object.keys(data.stats).map(key =>
-      Object.assign({}, {key}, data.stats[key])
+      Object.assign({}, {key}, (data.stats as any)[key])
     );
     const color = theme.charts.getColorPalette(stats.length - 2);
 
@@ -113,7 +113,7 @@ discoverCharts.push({
     }
 
     const stats = Object.keys(data.stats).map(key =>
-      Object.assign({}, {key}, data.stats[key])
+      Object.assign({}, {key}, (data.stats as any)[key])
     );
     const color = theme.charts.getColorPalette(stats.length - 2);
 
@@ -369,7 +369,7 @@ discoverCharts.push({
     }
 
     const stats = Object.keys(data.stats).map(key =>
-      Object.assign({}, {key}, data.stats[key])
+      Object.assign({}, {key}, (data.stats as any)[key])
     );
     const color = theme.charts.getColorPalette(stats.length - 2) ?? [];
     const previousPeriodColor = lightenHexToRgb(color);

static/app/components/autoplayVideo.spec.tsx

@@ -24,7 +24,7 @@ const makeProxyMock = (video: Partial<HTMLVideoElement>) => {
     {current: video},
     {
       get(obj, prop) {
-        return obj[prop];
+        return obj[prop as never];
       },
       set(_obj, _prop) {
         return true;

static/app/components/avatarChooser.tsx

@@ -101,7 +101,9 @@ class AvatarChooser extends Component<Props, State> {
       return resp;
     }
     const isColor = type === 'sentryAppColor';
-    return {avatar: resp?.avatars?.find(({color}) => color === isColor) ?? undefined};
+    return {
+      avatar: resp?.avatars?.find(({color}: any) => color === isColor) ?? undefined,
+    };
   }
 
   handleError(msg: string) {

static/app/components/charts/areaChart.tsx

@@ -27,12 +27,12 @@ export function transformToAreaSeries({
       name: seriesName,
       data: data.map(({name, value}) => [name, value]),
       lineStyle: {
-        color: colors?.[i],
+        color: (colors as any)?.[i],
         opacity: 1,
         width: 0.4,
       },
       areaStyle: {
-        color: colors?.[i],
+        color: (colors as any)?.[i],
         opacity: 1.0,
       },
       // Define the z level so that the series remain stacked in the correct order

static/app/components/charts/barChartZoom.tsx

@@ -84,14 +84,14 @@ class BarChartZoom extends Component<Props> {
    * we can let the native zoom animation on the chart complete
    * before we update URL state and re-render
    */
-  handleChartFinished = (_props, chart) => {
+  handleChartFinished = (_props: any, chart: any) => {
     if (typeof this.zooming === 'function') {
       this.zooming();
       this.zooming = null;
     }
 
     // This attempts to activate the area zoom toolbox feature
-    const zoom = chart._componentsViews?.find(c => c._features?.dataZoom);
+    const zoom = chart._componentsViews?.find((c: any) => c._features?.dataZoom);
     if (zoom && !zoom._features.dataZoom._isZoomActive) {
       // Calling dispatchAction will re-trigger handleChartFinished
       chart.dispatchAction({
@@ -102,7 +102,7 @@ class BarChartZoom extends Component<Props> {
     }
   };
 
-  handleDataZoom = (evt, chart) => {
+  handleDataZoom = (evt: any, chart: any) => {
     const model = chart.getModel();
     const {startValue, endValue} = model._payload.batch[0];
 

static/app/components/charts/baseChart.tsx

@@ -419,14 +419,14 @@ function BaseChartUnwrapped({
               type: 'line',
               itemStyle: {...(s.lineStyle ?? {})},
               markLine:
-                s?.data?.[0]?.[1] !== undefined
+                (s?.data?.[0] as any)?.[1] !== undefined
                   ? MarkLine({
                       silent: true,
                       lineStyle: {
                         type: 'solid',
                         width: 1.5,
                       },
-                      data: [{yAxis: s?.data?.[0]?.[1]}],
+                      data: [{yAxis: (s?.data?.[0] as any)?.[1]}],
                       label: {
                         show: false,
                       },
@@ -606,22 +606,23 @@ function BaseChartUnwrapped({
   const eventsMap = useMemo(
     () =>
       ({
-        click: (props, instance: ECharts) => {
+        click: (props: any, instance: ECharts) => {
           handleClick(props, instance);
           onClick?.(props, instance);
         },
-        highlight: (props, instance: ECharts) => onHighlight?.(props, instance),
-        mouseout: (props, instance: ECharts) => onMouseOut?.(props, instance),
-        mouseover: (props, instance: ECharts) => onMouseOver?.(props, instance),
-        datazoom: (props, instance: ECharts) => onDataZoom?.(props, instance),
-        restore: (props, instance: ECharts) => onRestore?.(props, instance),
-        finished: (props, instance: ECharts) => onFinished?.(props, instance),
-        rendered: (props, instance: ECharts) => onRendered?.(props, instance),
-        legendselectchanged: (props, instance: ECharts) =>
+        highlight: (props: any, instance: ECharts) => onHighlight?.(props, instance),
+        mouseout: (props: any, instance: ECharts) => onMouseOut?.(props, instance),
+        mouseover: (props: any, instance: ECharts) => onMouseOver?.(props, instance),
+        datazoom: (props: any, instance: ECharts) => onDataZoom?.(props, instance),
+        restore: (props: any, instance: ECharts) => onRestore?.(props, instance),
+        finished: (props: any, instance: ECharts) => onFinished?.(props, instance),
+        rendered: (props: any, instance: ECharts) => onRendered?.(props, instance),
+        legendselectchanged: (props: any, instance: ECharts) =>
           onLegendSelectChanged?.(props, instance),
-        brush: (props, instance: ECharts) => onBrushStart?.(props, instance),
-        brushend: (props, instance: ECharts) => onBrushEnd?.(props, instance),
-        brushselected: (props, instance: ECharts) => onBrushSelected?.(props, instance),
+        brush: (props: any, instance: ECharts) => onBrushStart?.(props, instance),
+        brushend: (props: any, instance: ECharts) => onBrushEnd?.(props, instance),
+        brushselected: (props: any, instance: ECharts) =>
+          onBrushSelected?.(props, instance),
       }) as ReactEchartProps['onEvents'],
     [
       onClick,

static/app/components/charts/chartZoom.tsx

@@ -115,7 +115,7 @@ class ChartZoom extends Component<Props> {
    * Save current period state from period in props to be used
    * in handling chart's zoom history state
    */
-  saveCurrentPeriod = props => {
+  saveCurrentPeriod = (props: any) => {
     this.currentPeriod = {
       period: props.period,
       start: getDate(props.start),
@@ -132,7 +132,7 @@ class ChartZoom extends Component<Props> {
    *
    * Saves a callback function to be called after chart animation is completed
    */
-  setPeriod = ({period, start, end}, saveHistory = false) => {
+  setPeriod = ({period, start, end}: any, saveHistory = false) => {
     const {router, onZoom, usePageDate, saveOnZoom} = this.props;
     const startFormatted = getDate(start);
     const endFormatted = getDate(end);
@@ -200,7 +200,7 @@ class ChartZoom extends Component<Props> {
     this.$chart.addEventListener('mousedown', this.handleMouseDown);
   };
 
-  handleKeyDown = evt => {
+  handleKeyDown = (evt: any) => {
     if (!this.chart) {
       return;
     }
@@ -225,7 +225,7 @@ class ChartZoom extends Component<Props> {
    *
    * Updates URL state to reflect initial params
    */
-  handleZoomRestore = (evt, chart) => {
+  handleZoomRestore = (evt: any, chart: any) => {
     if (this.isCancellingZoom) {
       // If this restore is caused by a zoom cancel, do not run handlers!
       // The regular handler restores to the earliest point in the zoom history
@@ -263,7 +263,7 @@ class ChartZoom extends Component<Props> {
     document.body.removeEventListener('keydown', this.handleKeyDown, true);
   };
 
-  handleDataZoom = (evt, chart) => {
+  handleDataZoom = (evt: any, chart: any) => {
     const model = chart.getModel();
     const {startValue, endValue} = model._payload.batch[0];
 
@@ -295,14 +295,14 @@ class ChartZoom extends Component<Props> {
    * we can let the native zoom animation on the chart complete
    * before we update URL state and re-render
    */
-  handleChartFinished = (_props, chart) => {
+  handleChartFinished = (_props: any, chart: any) => {
     if (typeof this.zooming === 'function') {
       this.zooming();
       this.zooming = null;
     }
 
     // This attempts to activate the area zoom toolbox feature
-    const zoom = chart._componentsViews?.find(c => c._features?.dataZoom);
+    const zoom = chart._componentsViews?.find((c: any) => c._features?.dataZoom);
     if (zoom && !zoom._features.dataZoom._isZoomActive) {
       // Calling dispatchAction will re-trigger handleChartFinished
       chart.dispatchAction({

static/app/components/charts/components/xAxis.tsx

@@ -1,5 +1,6 @@
 import type {Theme} from '@emotion/react';
 import type {XAXisComponentOption} from 'echarts';
+import type {TimeAxisLabelFormatterOption} from 'echarts/types/src/coord/axisCommonTypes';
 import merge from 'lodash/merge';
 
 import type {BaseChartProps} from 'sentry/components/charts/baseChart';
@@ -84,8 +85,7 @@ function XAxis({
       showMaxLabel: false,
       showMinLabel: false,
 
-      // @ts-expect-error formatter type is missing
-      formatter: AxisLabelFormatter,
+      formatter: AxisLabelFormatter as TimeAxisLabelFormatterOption,
     },
     axisPointer: {
       show: true,

static/app/components/charts/eventsChart.tsx

@@ -162,17 +162,20 @@ class Chart extends Component<ChartProps, State> {
     return AreaChart;
   }
 
-  handleLegendSelectChanged = legendChange => {
+  handleLegendSelectChanged = (legendChange: any) => {
     const {disableableSeries = []} = this.props;
     const {selected} = legendChange;
-    const seriesSelection = Object.keys(selected).reduce((state, key) => {
-      // we only want them to be able to disable the Releases&Other series,
-      // and not any of the other possible series here
-      const disableable =
-        ['Releases', 'Other'].includes(key) || disableableSeries.includes(key);
-      state[key] = disableable ? selected[key] : true;
-      return state;
-    }, {});
+    const seriesSelection = Object.keys(selected).reduce(
+      (state, key) => {
+        // we only want them to be able to disable the Releases&Other series,
+        // and not any of the other possible series here
+        const disableable =
+          ['Releases', 'Other'].includes(key) || disableableSeries.includes(key);
+        state[key] = disableable ? selected[key] : true;
+        return state;
+      },
+      {} as Record<string, boolean>
+    );
 
     // we have to force an update here otherwise ECharts will
     // update its internal state and disable the series