Update Typescript to the latest version (#32063)

* bump typescript version to 3.3.3333

* fix tests after updating TS version

* suppress type errors until they fixed appropriately

* address comments

* add type def for UnconnectedKibanaLink

* remove fix @ts-ignore

* fix snapshot test. provide displayName

package.json

@@ -406,7 +406,7 @@
     "tslint-config-prettier": "^1.15.0",
     "tslint-microsoft-contrib": "^6.0.0",
     "tslint-plugin-prettier": "^2.0.0",
-    "typescript": "^3.0.3",
+    "typescript": "^3.3.3333",
     "vinyl-fs": "^3.0.2",
     "xml2js": "^0.4.19",
     "xmlbuilder": "9.0.4",

packages/kbn-config-schema/package.json

@@ -10,7 +10,7 @@
     "kbn:bootstrap": "yarn build"
   },
   "devDependencies": {
-    "typescript": "^3.0.3"
+    "typescript": "^3.3.3333"
   },
   "peerDependencies": {
     "joi": "^13.5.2",

packages/kbn-es-query/package.json

@@ -22,10 +22,10 @@
     "@babel/preset-typescript": "^7.3.3",
     "@kbn/babel-preset": "1.0.0",
     "@kbn/dev-utils": "1.0.0",
-    "expect.js": "0.3.1",
     "del": "^3.0.0",
+    "expect.js": "0.3.1",
     "getopts": "^2.2.3",
     "supports-color": "^6.1.0",
-    "typescript": "^3.0.3"
+    "typescript": "^3.3.3333"
   }
 }

packages/kbn-i18n/package.json

@@ -25,7 +25,7 @@
     "del": "^3.0.0",
     "getopts": "^2.2.3",
     "supports-color": "^6.1.0",
-    "typescript": "^3.0.3"
+    "typescript": "^3.3.3333"
   },
   "dependencies": {
     "intl-format-cache": "^2.1.0",

packages/kbn-pm/package.json

@@ -61,7 +61,7 @@
     "strong-log-transformer": "^2.1.0",
     "tempy": "^0.2.1",
     "ts-loader": "^5.2.2",
-    "typescript": "^3.0.3",
+    "typescript": "^3.3.3333",
     "unlazy-loader": "^0.1.3",
     "webpack": "^4.23.1",
     "webpack-cli": "^3.1.2",

src/core/public/injected_metadata/deep_freeze.test.ts

@@ -82,8 +82,8 @@ it('types return values to prevent mutations in typescript', async () => {
   ).rejects.toThrowErrorMatchingInlineSnapshot(`
 "Command failed: tsc --noEmit
 
-index.ts(30,11): error TS2540: Cannot assign to 'baz' because it is a constant or a read-only property.
+index.ts(30,11): error TS2540: Cannot assign to 'baz' because it is a read-only property.
-index.ts(40,10): error TS2540: Cannot assign to 'bar' because it is a constant or a read-only property.
+index.ts(40,10): error TS2540: Cannot assign to 'bar' because it is a read-only property.
 "
 `);
 });

src/legacy/ui/public/chrome/directives/header_global_nav/components/header_help_menu.tsx

@@ -127,12 +127,12 @@ class HeaderHelpMenuUI extends Component<Props, State> {
     );
 
     return (
+      // @ts-ignore repositionOnScroll doesn't exist in EuiPopover
       <EuiPopover
         id="headerHelpMenu"
         button={button}
         isOpen={this.state.isOpen}
         anchorPosition="downRight"
-        // @ts-ignore
         repositionOnScroll
         closePopover={this.closeMenu}
         data-test-subj="helpMenuButton"

src/legacy/ui/public/query_bar/components/query_bar.test.tsx

@@ -40,7 +40,7 @@ const mockPersistedLog = {
   get: jest.fn(() => ['response:200']),
 };
 
-const mockPersistedLogFactory = jest.fn(() => {
+const mockPersistedLogFactory = jest.fn<jest.Mocked<typeof mockPersistedLog>>(() => {
   return mockPersistedLog;
 });
 

src/legacy/ui/public/vis/update_status.ts

@@ -60,7 +60,7 @@ function getUpdateStatus<T extends Status>(
   obj: any,
   param: { vis: Vis; visData: any; uiState: PersistedState }
 ): { [reqStats in T]: boolean } {
-  const status = {} as { [reqStats in T]: boolean };
+  const status = {} as { [reqStats in Status]: boolean };
 
   // If the vis type doesn't need update status, skip all calculations
   if (requiresUpdateStatus.length === 0) {

src/legacy/utils/binder.ts

@@ -18,8 +18,8 @@
  */
 
 export interface Emitter {
-  on: (args: any[]) => void;
+  on: (...args: any[]) => void;
-  off: (args: any[]) => void;
+  off: (...args: any[]) => void;
   addListener: Emitter['on'];
   removeListener: Emitter['off'];
 }

x-pack/package.json

@@ -127,7 +127,7 @@
     "tmp": "0.0.31",
     "tree-kill": "^1.1.0",
     "ts-loader": "^5.2.2",
-    "typescript": "^3.0.3",
+    "typescript": "^3.3.3333",
     "vinyl-fs": "^3.0.2",
     "xml-crypto": "^0.10.1",
     "xml2js": "^0.4.19",

x-pack/plugins/apm/public/components/shared/Links/KibanaLink.tsx

@@ -23,13 +23,13 @@ interface Props extends KibanaHrefArgs {
  *
  * You must remember to pass in location in that case.
  */
-export function UnconnectedKibanaLink({
+export const UnconnectedKibanaLink: React.FunctionComponent<Props> = ({
   location,
   pathname,
   hash,
   query,
   ...props
-}: Props) {
+}) => {
   const href = getKibanaHref({
     location,
     pathname,
@@ -37,7 +37,9 @@ export function UnconnectedKibanaLink({
     query
   });
   return <EuiLink {...props} href={href} />;
-}
+};
+
+UnconnectedKibanaLink.displayName = 'UnconnectedKibanaLink';
 
 const withLocation = connect(
   ({ location }: { location: Location }) => ({ location }),

x-pack/plugins/infra/public/components/range_date_picker/index.tsx

@@ -255,6 +255,7 @@ export const RangeDatePicker = injectI18n(
           id="QuickSelectPopover"
           button={quickSelectButton}
           isOpen={this.state.isPopoverOpen}
+          // @ts-ignore
           closePopover={this.closePopover.bind(this)}
           anchorPosition="downLeft"
           ownFocus

x-pack/plugins/infra/public/containers/with_state_from_location.tsx

@@ -50,6 +50,7 @@ export const withStateFromLocation = <StateInLocation extends {}>({
         const stateFromLocation = mapLocationToState(location);
 
         return (
+          // @ts-ignore
           <WrappedComponent
             {...otherProps}
             {...stateFromLocation}

x-pack/plugins/infra/public/utils/typed_redux.ts

@@ -65,6 +65,6 @@ type PlainActionCreator<WrappedActionCreator> = WrappedActionCreator extends ()
 export const bindPlainActionCreators = <WrappedActionCreators extends ActionCreators>(
   actionCreators: WrappedActionCreators
 ) => (dispatch: Dispatch) =>
-  bindActionCreators(actionCreators, dispatch) as {
+  (bindActionCreators(actionCreators, dispatch) as unknown) as {
     [P in keyof WrappedActionCreators]: PlainActionCreator<WrappedActionCreators[P]>
   };

x-pack/plugins/security/public/views/management/edit_role/components/privileges/es/index_privilege_form.tsx

@@ -196,19 +196,21 @@ export class IndexPrivilegeForm extends Component<Props, State> {
       <EuiFlexGroup direction="column">
         {!this.props.isReservedRole && (
           <EuiFlexItem>
-            <EuiSwitch
+            {
-              data-test-subj={`restrictDocumentsQuery${this.props.formIndex}`}
-              label={
-                <FormattedMessage
-                  id="xpack.security.management.editRoles.indexPrivilegeForm.grantReadPrivilegesLabel"
-                  defaultMessage="Grant read privileges to specific documents"
-                />
-              }
               // @ts-ignore
-              compressed={true}
+              <EuiSwitch
-              checked={this.state.queryExpanded}
+                data-test-subj={`restrictDocumentsQuery${this.props.formIndex}`}
-              onChange={this.toggleDocumentQuery}
+                label={
-            />
+                  <FormattedMessage
+                    id="xpack.security.management.editRoles.indexPrivilegeForm.grantReadPrivilegesLabel"
+                    defaultMessage="Grant read privileges to specific documents"
+                  />
+                }
+                compressed={true}
+                checked={this.state.queryExpanded}
+                onChange={this.toggleDocumentQuery}
+              />
+            }
           </EuiFlexItem>
         )}
         {this.state.queryExpanded && (

x-pack/plugins/spaces/public/views/nav_control/components/spaces_menu.tsx

@@ -106,19 +106,21 @@ class SpacesMenuUI extends Component<Props, State> {
     const { intl } = this.props;
     return (
       <div key="manageSpacesSearchField" className="spcMenu__searchFieldWrapper">
-        <EuiFieldSearch
+        {
-          placeholder={intl.formatMessage({
-            id: 'xpack.spaces.navControl.spacesMenu.findSpacePlaceholder',
-            defaultMessage: 'Find a space',
-          })}
-          incremental={true}
-          // FIXME needs updated typedef
           // @ts-ignore
-          onSearch={this.onSearch}
+          <EuiFieldSearch
-          onKeyDown={this.onSearchKeyDown}
+            placeholder={intl.formatMessage({
-          onFocus={this.onSearchFocus}
+              id: 'xpack.spaces.navControl.spacesMenu.findSpacePlaceholder',
-          compressed
+              defaultMessage: 'Find a space',
-        />
+            })}
+            incremental={true}
+            // FIXME needs updated typedef
+            onSearch={this.onSearch}
+            onKeyDown={this.onSearchKeyDown}
+            onFocus={this.onSearchFocus}
+            compressed
+          />
+        }
       </div>
     );
   };

x-pack/plugins/spaces/public/views/nav_control/nav_control_popover.tsx

@@ -80,6 +80,7 @@ export class NavControlPopover extends Component<Props, State> {
     }
 
     return (
+      // @ts-ignore repositionOnScroll doesn't exist on EuiPopover
       <EuiPopover
         id={'spcMenuPopover'}
         data-test-subj={`spacesNavSelector`}
@@ -88,7 +89,6 @@ export class NavControlPopover extends Component<Props, State> {
         closePopover={this.closeSpaceSelector}
         anchorPosition={this.props.anchorPosition}
         panelPaddingSize="none"
-        // @ts-ignore
         repositionOnScroll={true}
         withTitle={this.props.anchorPosition.includes('down')}
         ownFocus

x-pack/plugins/spaces/public/views/space_selector/space_selector.tsx

@@ -160,16 +160,18 @@ class SpaceSelectorUI extends Component<Props, State> {
     }
     return (
       <EuiFlexItem className="spcSpaceSelector__searchHolder">
-        <EuiFieldSearch
+        {
-          className="spcSpaceSelector__searchField"
+          // @ts-ignore onSearch doesn't exist on EuiFieldSearch
-          placeholder={intl.formatMessage({
+          <EuiFieldSearch
-            id: 'xpack.spaces.spaceSelector.findSpacePlaceholder',
+            className="spcSpaceSelector__searchField"
-            defaultMessage: 'Find a space',
+            placeholder={intl.formatMessage({
-          })}
+              id: 'xpack.spaces.spaceSelector.findSpacePlaceholder',
-          incremental={true}
+              defaultMessage: 'Find a space',
-          // @ts-ignore
+            })}
-          onSearch={this.onSearch}
+            incremental={true}
-        />
+            onSearch={this.onSearch}
+          />
+        }
       </EuiFlexItem>
     );
   };

yarn.lock

@@ -23594,10 +23594,10 @@ typescript-fsa@^2.0.0, typescript-fsa@^2.5.0:
   resolved "https://registry.yarnpkg.com/typescript-fsa/-/typescript-fsa-2.5.0.tgz#1baec01b5e8f5f34c322679d1327016e9e294faf"
   integrity sha1-G67AG16PXzTDImedEycBbp4pT68=
 
-typescript@^3.0.3:
+typescript@^3.3.3333:
-  version "3.0.3"
+  version "3.3.3333"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.0.3.tgz#4853b3e275ecdaa27f78fda46dc273a7eb7fc1c8"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.3.3333.tgz#171b2c5af66c59e9431199117a3bcadc66fdcfd6"
-  integrity sha512-kk80vLW9iGtjMnIv11qyxLqZm20UklzuR2tL0QAnDIygIUIemcZMxlMWudl9OOt76H3ntVzcTiddQ1/pAAJMYg==
+  integrity sha512-JjSKsAfuHBE/fB2oZ8NxtRTk5iGcg6hkYXMnZ3Wc+b2RSqejEqTaem11mHASMnFilHrax3sLK0GDzcJrekZYLw==
 
 ua-parser-js@^0.7.18:
   version "0.7.18"