chore(ts): upgrade to typescript 4.2 (#24774)

package.json

@@ -125,7 +125,8 @@
     "scroll-to-element": "^2.0.0",
     "sprintf-js": "1.0.3",
     "style-loader": "^2.0.0",
-    "typescript": "^4.0",
+    "tslib": "^2.1.0",
+    "typescript": "^4.2",
     "u2f-api": "1.0.10",
     "webpack": "^4.44.2",
     "webpack-cli": "3.3.11",

src/sentry/static/sentry/app/__mocks__/api.tsx

@@ -126,7 +126,7 @@ class Client {
       // this needs to be mocked
       const lines = err.stack?.split('\n');
       const startIndex = lines?.findIndex(line => line.includes('tests/js/spec'));
-      err.stack = ['\n', lines?.[0], ...lines?.slice(startIndex)].join('\n');
+      err.stack = ['\n', lines?.[0], ...(lines?.slice(startIndex) ?? [])].join('\n');
 
       // Throwing an error here does not do what we want it to do....
       // Because we are mocking an API client, we generally catch errors to show

src/sentry/static/sentry/app/components/events/interfaces/contextLine.tsx

@@ -19,7 +19,7 @@ const ContextLine = function (props: Props) {
   let lineWs = '';
   let lineCode = '';
   if (defined(line[1]) && line[1].match) {
-    [, lineWs, lineCode] = line[1].match(/^(\s*)(.*?)$/m);
+    [, lineWs, lineCode] = line[1].match(/^(\s*)(.*?)$/m)!;
   }
   const Component = !props.children ? React.Fragment : Context;
   return (

src/sentry/static/sentry/app/components/organizations/timeRangeSelector/utils.tsx

@@ -33,7 +33,7 @@ export function parseStatsPeriod(
     h: 'hours',
     s: 'seconds',
     m: 'minutes',
-  }[result[2]];
+  }[result[2]] as 'days' | 'hours' | 'seconds' | 'minutes';
 
   const format = outputFormat === null ? undefined : outputFormat;
   return {

src/sentry/static/sentry/app/components/setupWizard.tsx

@@ -28,7 +28,7 @@ class SetupWizard extends React.Component<Props, State> {
   }
 
   pollFinished() {
-    return new Promise(resolve => {
+    return new Promise<void>(resolve => {
       this.props.api.request(`/wizard/${this.props.hash}/`, {
         method: 'GET',
         success: () => {

src/sentry/static/sentry/app/components/smartSearchBar/index.tsx

@@ -802,9 +802,7 @@ class SmartSearchBar extends React.Component<Props, State> {
       (terms.length === 1 && terms[0] === this.props.defaultQuery) || // default term
       /^\s+$/.test(query.slice(cursor - 1, cursor + 1))
     ) {
-      const {
-        defaultSearchItems: [defaultSearchItems, defaultRecentItems],
-      } = this.props;
+      const [defaultSearchItems, defaultRecentItems] = this.props.defaultSearchItems!;
 
       if (!defaultSearchItems.length) {
         // Update searchTerm, otherwise <SearchDropdown> will have wrong state

src/sentry/static/sentry/app/components/strictClick.tsx

@@ -34,7 +34,7 @@ class StrictClick<T extends HTMLElement> extends React.PureComponent<Props<T>, S
 
     // Click happens if mouse down/up in same element - click will not fire if
     // either initial mouse down OR final mouse up occurs in different element
-    const [x, y] = this.state.startCoords;
+    const [x, y] = this.state.startCoords!;
     const deltaX = Math.abs(evt.screenX - x);
     const deltaY = Math.abs(evt.screenY - y);
 

src/sentry/static/sentry/app/views/projectInstall/issueAlertOptions.tsx

@@ -153,7 +153,6 @@ class IssueAlertOptions extends AsyncComponent<Props, State> {
             name=""
             placeholder={DEFAULT_PLACEHOLDER_VALUE}
             value={this.state.threshold}
-            key={name}
             onChange={threshold =>
               this.setStateAndUpdateParents({threshold: threshold.target.value})
             }

src/sentry/static/sentry/app/views/settings/incidentRules/triggers/chart/thresholdsChart.tsx

@@ -197,35 +197,37 @@ export default class ThresholdsChart extends React.PureComponent<Props, State> {
       // (or when they will be considered as resolved)
       //
       // Resolution is considered "off" if it is -1
-      ...(position !== null && [
-        {
-          type: 'rect',
-          draggable: false,
+      ...(position !== null
+        ? [
+            {
+              type: 'rect',
+              draggable: false,
 
-          position:
-            isResolution !== isInverted
-              ? [yAxisSize, position + 1]
-              : [yAxisSize, legendPadding],
-          shape: {
-            width: graphAreaWidth,
-            height:
-              isResolution !== isInverted
-                ? yAxisPosition - position
-                : position - legendPadding,
-          },
+              position:
+                isResolution !== isInverted
+                  ? [yAxisSize, position + 1]
+                  : [yAxisSize, legendPadding],
+              shape: {
+                width: graphAreaWidth,
+                height:
+                  isResolution !== isInverted
+                    ? yAxisPosition - position
+                    : position - legendPadding,
+              },
 
-          style: {
-            fill: isResolution
-              ? COLOR.RESOLUTION_FILL
-              : isCritical
-              ? COLOR.CRITICAL_FILL
-              : COLOR.WARNING_FILL,
-          },
+              style: {
+                fill: isResolution
+                  ? COLOR.RESOLUTION_FILL
+                  : isCritical
+                  ? COLOR.CRITICAL_FILL
+                  : COLOR.WARNING_FILL,
+              },
 
-          // This needs to be below the draggable line
-          z: 100,
-        },
-      ]),
+              // This needs to be below the draggable line
+              z: 100,
+            },
+          ]
+        : []),
     ];
   };
 

src/sentry/static/sentry/app/views/settings/organizationTeams/allTeamsRow.tsx

@@ -72,7 +72,7 @@ class AllTeamsRow extends React.Component<Props, State> {
       loading: true,
     });
 
-    return new Promise((resolve, reject) =>
+    return new Promise<void>((resolve, reject) =>
       joinTeam(
         api,
         {