Merge pull request #1388 from Shopify/typescript-update

Updating to typescript 3.2

Author: BPScott

.eslintrc

@@ -28,6 +28,7 @@
         "allowBlockStart": false
       }
     ],
+    "import/named": "off",
     "import/no-named-as-default": "off",
     "react/button-has-type": "off",
     "react/no-array-index-key": "off",

UNRELEASED.md

@@ -47,6 +47,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 - Update most devDependencies ([#1327](https://github.com/Shopify/polaris-react/pull/1327))
 - Bump react-utilites to remove a transitive dependency on core-js. ([#1343](https://github.com/Shopify/polaris-react/pull/1343))
 - Updated App Bridge to version 1.3.0 ([#1349](https://github.com/Shopify/polaris-react/pull/1349))
+- Updated typescript to 3.2.4 ([#1388](https://github.com/Shopify/polaris-react/pull/1388))
 
 ### Code quality
 

config/typescript/prop-types.d.ts

@@ -155,15 +155,15 @@
     "shelljs": "^0.8.3",
     "shx": "^0.3.2",
     "svgo": "^1.2.2",
-    "typescript": "~3.1.6",
+    "typescript": "~3.2.4",
     "yargs": "^13.2.2"
   },
   "peerDependencies": {
     "react": "^16.3.1",
     "react-dom": "^16.3.1"
   },
   "resolutions": {
-    "typescript-eslint-parser": "20.0.0"
+    "typescript-eslint-parser": "22.0.0"
   },
   "files": [
     "esnext",
@@ -182,9 +182,9 @@
     "@shopify/javascript-utilities": "^2.2.1",
     "@shopify/polaris-icons": "^3.3.0",
     "@shopify/polaris-tokens": "^2.5.0",
-    "@shopify/react-compose": "^0.1.6",
+    "@shopify/react-compose": "^1.0.0",
     "@shopify/react-utilities": "^2.0.4",
-    "@types/prop-types": "^15.5.5",
+    "@shopify/useful-types": "^1.2.4",
     "@types/react": "^16.4.7",
     "@types/react-dom": "^16.0.6",
     "@types/react-transition-group": "^2.0.7",

package.json

@@ -30,7 +30,9 @@ export default function ActionList({
   }
 
   const hasMultipleSections = finalSections.length > 1;
-  const Element: string = hasMultipleSections ? 'ul' : 'div';
+  // Type asserting to any is required for TS3.2 but can be removed when we update to 3.3
+  // see https://github.com/Microsoft/TypeScript/issues/28768
+  const Element: any = hasMultipleSections ? 'ul' : 'div';
   const sectionMarkup = finalSections.map((section, index) => {
     return (
       <Section

src/components/ActionList/ActionList.tsx

@@ -36,7 +36,7 @@ describe('<AppProvider />', () => {
       }
     }
 
-    const wrapper = TestUtils.renderIntoDocument(
+    const wrapper: unknown = TestUtils.renderIntoDocument(
       <AppProvider i18n={i18n} linkComponent={CustomLinkComponent}>
         <Child />
       </AppProvider>,

src/components/AppProvider/tests/AppProvider.test.tsx

@@ -75,7 +75,9 @@ export default function withAppProvider<OwnProps>() {
           );
         }
 
-        return <WrappedComponent {...this.props} polaris={polarisContext} />;
+        return (
+          <WrappedComponent {...this.props as any} polaris={polarisContext} />
+        );
       }
 
       private handleContextUpdate = () => {

src/components/AppProvider/utilities/withAppProvider/withAppProvider.tsx

@@ -41,7 +41,10 @@ export default function withSticky() {
 
       render() {
         return (
-          <WrappedComponent {...this.props} polaris={this.polarisContext} />
+          <WrappedComponent
+            {...this.props as any}
+            polaris={this.polarisContext}
+          />
         );
       }
     }

src/components/AppProvider/utilities/withSticky/withSticky.tsx

@@ -59,9 +59,9 @@ function ChoiceList({
   error,
   name = getUniqueID(),
 }: CombinedProps) {
-  const ControlComponent: typeof Checkbox | typeof RadioButton = allowMultiple
-    ? Checkbox
-    : RadioButton;
+  // Type asserting to any is required for TS3.2 but can be removed when we update to 3.3
+  // see https://github.com/Microsoft/TypeScript/issues/28768
+  const ControlComponent: any = allowMultiple ? Checkbox : RadioButton;
 
   const finalName = allowMultiple ? `${name}[]` : name;
 

src/components/ChoiceList/ChoiceList.tsx

@@ -18,7 +18,7 @@ export interface State {
 
 export default function Connected({children, left, right}: Props) {
   if (left == null && right == null) {
-    return React.Children.only(children);
+    return <React.Fragment>{children}</React.Fragment>;
   }
 
   const leftConnectionMarkup = left ? (

src/components/Connected/Connected.tsx

@@ -218,7 +218,7 @@ function Icon({
   const defaultIconProps = {
     className: styles.Svg,
     focusable: 'false',
-    'aria-hidden': 'true',
+    'aria-hidden': 'true' as 'true',
   };
 
   if (untrusted) {

src/components/Icon/Icon.tsx

@@ -75,7 +75,7 @@ export default class Popover extends React.PureComponent<Props, State> {
 
   render() {
     const {
-      activatorWrapper: WrapperComponent = 'div',
+      activatorWrapper: WrapperComponent = 'div' as any,
       children,
       onClose,
       activator,

src/components/Popover/Popover.tsx

@@ -38,7 +38,7 @@ describe('<ThemeProvider />', () => {
       }
     }
 
-    const wrapper = TestUtils.renderIntoDocument(
+    const wrapper: unknown = TestUtils.renderIntoDocument(
       <ThemeProvider
         theme={{
           logo: {

src/components/ThemeProvider/tests/ThemeProvider.test.tsx

@@ -60,7 +60,7 @@ export default class Tooltip extends React.PureComponent<Props, State> {
       content,
       light,
       preferredPosition = 'below',
-      activatorWrapper: WrapperComponent = 'span',
+      activatorWrapper: WrapperComponent = 'span' as any,
     } = this.props;
 
     const {active, activatorNode} = this.state;

src/components/Tooltip/Tooltip.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import hoistStatics from 'hoist-non-react-statics';
 import {ReactComponent} from '@shopify/react-utilities/types';
+import {NonReactStatics} from '@shopify/useful-types';
 import {Consumer} from './components';
 
 export type ComponentType<P> = React.ComponentClass<P> | React.SFC<P>;
@@ -12,13 +13,14 @@ export interface Ref<T = any> {
 export default function withRef<OriginalProps>() {
   return function addForwardRef<C>(
     WrappedComponent: ReactComponent<OriginalProps & Ref> & C,
-  ): React.ComponentClass<OriginalProps> {
+  ): React.ComponentType<OriginalProps> &
+    NonReactStatics<typeof WrappedComponent> {
     class WithRef extends React.Component<OriginalProps, never> {
       render() {
         return (
           <Consumer>
             {(ctx) => (
-              <WrappedComponent {...this.props} ref={ctx.forwardedRef} />
+              <WrappedComponent {...this.props as any} ref={ctx.forwardedRef} />
             )}
           </Consumer>
         );
@@ -28,8 +30,8 @@ export default function withRef<OriginalProps>() {
     const FinalComponent = hoistStatics(
       WithRef,
       WrappedComponent as React.ComponentClass<any>,
-    );
+    ) as any;
 
-    return FinalComponent as React.ComponentClass<OriginalProps> & C;
+    return FinalComponent;
   };
 }

src/components/WithRef/WithRef.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import {ReactComponent} from '@shopify/react-utilities/types';
 import reactCompose from '@shopify/react-compose';
+import {NonReactStatics} from '@shopify/useful-types';
 // eslint-disable-next-line shopify/strict-component-boundaries
 import {Provider as RefProvider} from '../components/WithRef';
 
@@ -15,19 +16,18 @@ export default function compose<Props>(
 ) {
   return function wrapComponent<ComposedProps, C>(
     OriginalComponent: ReactComponent<ComposedProps> & C,
-  ): ReactComponent<Props> & C {
+  ): ReactComponent<Props> & NonReactStatics<typeof OriginalComponent> {
     const Result = reactCompose(...wrappingFunctions)(
       OriginalComponent,
     ) as ReactComponent<ComposedProps>;
     // eslint-disable-next-line react/display-name
-    return React.forwardRef<Props>(
-      (props: Props, ref: React.RefObject<any>) => {
-        return (
-          <RefProvider value={{forwardedRef: ref}}>
-            <Result {...props} />
-          </RefProvider>
-        );
-      },
-    ) as ReactComponent<Props> & C;
+    return (React.forwardRef<Props>((props: any, ref: React.RefObject<any>) => {
+      return (
+        <RefProvider value={{forwardedRef: ref}}>
+          <Result {...props} />
+        </RefProvider>
+      );
+    }) as unknown) as ReactComponent<Props> &
+      NonReactStatics<typeof OriginalComponent>;
   };
 }