Fabric 7: TypeScript 3.5 Updates (WIP)

.vscode/tasks.json

@@ -5,13 +5,7 @@
       "label": "Typescript (oufr) watch",
       "type": "process",
       "command": "node",
-      "args": [
-        "./scripts/node_modules/typescript/bin/tsc",
-        "-p",
-        "packages/office-ui-fabric-react/tsconfig.json",
-        "-w",
-        "--noEmit"
-      ],
+      "args": ["./scripts/node_modules/typescript/bin/tsc", "-p", "packages/office-ui-fabric-react/tsconfig.json", "-w", "--noEmit"],
       "problemMatcher": "$tsc",
       "group": {
         "kind": "build",
@@ -22,13 +16,7 @@
       "label": "Typescript (vr-tests) watch",
       "type": "process",
       "command": "node",
-      "args": [
-        "./scripts/node_modules/typescript/bin/tsc",
-        "-p",
-        "apps/vr-tests/tsconfig.json",
-        "-w",
-        "--noEmit"
-      ],
+      "args": ["./scripts/node_modules/typescript/bin/tsc", "-p", "apps/vr-tests/tsconfig.json", "-w", "--noEmit"],
       "problemMatcher": "$tsc",
       "group": {
         "kind": "build",
@@ -39,18 +27,23 @@
       "label": "Typescript (experiments) watch",
       "type": "process",
       "command": "node",
-      "args": [
-        "./scripts/node_modules/typescript/bin/tsc",
-        "-p",
-        "packages/experiments/tsconfig.json",
-        "-w",
-        "--noEmit"
-      ],
+      "args": ["./scripts/node_modules/typescript/bin/tsc", "-p", "packages/experiments/tsconfig.json", "-w", "--noEmit"],
       "problemMatcher": "$tsc",
       "group": {
         "kind": "build",
         "isDefault": true
       }
     },
+    {
+      "label": "Typescript (example-app-base) watch",
+      "type": "process",
+      "command": "node",
+      "args": ["./scripts/node_modules/typescript/bin/tsc", "-p", "packages/example-app-base/tsconfig.json", "-w", "--noEmit"],
+      "problemMatcher": "$tsc",
+      "group": {
+        "kind": "build",
+        "isDefault": true
+      }
+    }
   ]
-}
+}

apps/fabric-website/src/pages/Controls/AvatarPage/AvatarPage.tsx

@@ -8,7 +8,14 @@ const baseUrl = 'https://github.com/OfficeDev/office-ui-fabric-react/tree/master
 
 export const AvatarPage: React.StatelessComponent<IControlsPageProps> = props => {
   const { platform } = props;
-  return <ControlsAreaPage {...props} title="Avatar" {...AvatarPageProps[platform]} otherSections={_otherSections(platform)} />;
+  return (
+    <ControlsAreaPage
+      {...props}
+      title="Avatar"
+      {...AvatarPageProps[platform]}
+      otherSections={_otherSections(platform) as IPageSectionProps[]}
+    />
+  );
 };
 
 function _otherSections(platform: Platforms): IPageSectionProps<Platforms>[] {

apps/fabric-website/src/pages/Controls/ButtonPage/ButtonPage.tsx

@@ -53,7 +53,7 @@ export class ButtonPage extends React.Component<
         title="Button"
         {...buttonPageProps[this.props.platform]}
         exampleKnobs={this.renderKnobs()}
-        otherSections={this._otherSections(this.props.platform)}
+        otherSections={this._otherSections(this.props.platform) as IPageSectionProps[]}
       />
     );
   }

apps/fabric-website/src/pages/Controls/CalendarPage/CalendarPage.tsx

@@ -8,7 +8,14 @@ const baseUrl = 'https://github.com/OfficeDev/office-ui-fabric-react/tree/master
 
 export const CalendarPage: React.StatelessComponent<IControlsPageProps> = props => {
   const { platform } = props;
-  return <ControlsAreaPage {...props} title="Calendar" {...CalendarPageProps[props.platform]} otherSections={_otherSections(platform)} />;
+  return (
+    <ControlsAreaPage
+      {...props}
+      title="Calendar"
+      {...CalendarPageProps[props.platform]}
+      otherSections={_otherSections(platform) as IPageSectionProps[]}
+    />
+  );
 };
 
 function _otherSections(platform: Platforms): IPageSectionProps<Platforms>[] {

apps/fabric-website/src/pages/Controls/ChipPage/ChipPage.tsx

@@ -8,7 +8,7 @@ const baseUrl = 'https://github.com/OfficeDev/office-ui-fabric-react/tree/master
 
 export const ChipPage: React.StatelessComponent<IControlsPageProps> = props => {
   const { platform } = props;
-  return <ControlsAreaPage {...props} {...ChipPageProps[platform]} otherSections={_otherSections(platform)} />;
+  return <ControlsAreaPage {...props} {...ChipPageProps[platform]} otherSections={_otherSections(platform) as IPageSectionProps[]} />;
 };
 
 function _otherSections(platform: Platforms): IPageSectionProps<Platforms>[] {

apps/fabric-website/src/pages/Controls/DatePickerPage/DatePickerPage.tsx

@@ -8,7 +8,7 @@ const baseUrl = 'https://github.com/OfficeDev/office-ui-fabric-react/tree/master
 
 export const DatePickerPage: React.StatelessComponent<IControlsPageProps> = props => {
   const { platform } = props;
-  return <ControlsAreaPage {...props} {...DatePickerPageProps[platform]} otherSections={_otherSections(platform)} />;
+  return <ControlsAreaPage {...props} {...DatePickerPageProps[platform]} otherSections={_otherSections(platform) as IPageSectionProps[]} />;
 };
 
 function _otherSections(platform: Platforms): IPageSectionProps<Platforms>[] {

apps/fabric-website/src/pages/Controls/DrawerPage/DrawerPage.tsx

@@ -8,7 +8,7 @@ const baseUrl = 'https://github.com/OfficeDev/office-ui-fabric-react/tree/master
 
 export const DrawerPage: React.StatelessComponent<IControlsPageProps> = props => {
   const { platform } = props;
-  return <ControlsAreaPage {...props} {...DrawerPageProps[platform]} otherSections={_otherSections(platform)} />;
+  return <ControlsAreaPage {...props} {...DrawerPageProps[platform]} otherSections={_otherSections(platform) as IPageSectionProps[]} />;
 };
 
 function _otherSections(platform: Platforms): IPageSectionProps<Platforms>[] {

apps/fabric-website/src/pages/Controls/ListCellsPage/ListCellsPage.tsx

@@ -8,7 +8,7 @@ const baseUrl = 'https://github.com/OfficeDev/office-ui-fabric-react/tree/master
 
 export const ListCellsPage: React.StatelessComponent<IControlsPageProps> = props => {
   const { platform } = props;
-  return <ControlsAreaPage {...props} {...ListCellsPageProps[platform]} otherSections={_otherSections(platform)} />;
+  return <ControlsAreaPage {...props} {...ListCellsPageProps[platform]} otherSections={_otherSections(platform) as IPageSectionProps[]} />;
 };
 
 function _otherSections(platform: Platforms): IPageSectionProps<Platforms>[] {

apps/fabric-website/src/pages/Controls/PeoplePickerPage/PeoplePickerPage.tsx

@@ -9,7 +9,12 @@ const baseUrl = 'https://github.com/OfficeDev/office-ui-fabric-react/tree/master
 export const PeoplePickerPage: React.StatelessComponent<IControlsPageProps> = props => {
   const { platform } = props;
   return (
-    <ControlsAreaPage {...props} title="People Picker" {...PeoplePickerPageProps[platform]} otherSections={_otherSections(platform)} />
+    <ControlsAreaPage
+      {...props}
+      title="People Picker"
+      {...PeoplePickerPageProps[platform]}
+      otherSections={_otherSections(platform) as IPageSectionProps[]}
+    />
   );
 };
 

apps/fabric-website/src/pages/Controls/PersonaPage/PersonaPage.tsx

@@ -8,7 +8,14 @@ const baseUrl = 'https://github.com/OfficeDev/office-ui-fabric-react/tree/master
 
 export const PersonaPage: React.StatelessComponent<IControlsPageProps> = props => {
   const { platform } = props;
-  return <ControlsAreaPage {...props} title="Persona" {...PersonaPageProps[platform]} otherSections={_otherSections(platform)} />;
+  return (
+    <ControlsAreaPage
+      {...props}
+      title="Persona"
+      {...PersonaPageProps[platform]}
+      otherSections={_otherSections(platform) as IPageSectionProps[]}
+    />
+  );
 };
 
 function _otherSections(platform: Platforms): IPageSectionProps<Platforms>[] {

apps/fabric-website/src/pages/Controls/PivotPage/PivotPage.tsx

@@ -7,7 +7,13 @@ import { Platforms } from '../../../interfaces/Platforms';
 const baseUrl = 'https://github.com/OfficeDev/office-ui-fabric-react/tree/master/apps/fabric-website/src/pages/Controls/PivotPage/';
 
 export const PivotPage: React.StatelessComponent<IControlsPageProps> = props => {
-  return <ControlsAreaPage {...props} {...PivotPageProps[props.platform]} otherSections={_otherSections(props.platform)} />;
+  return (
+    <ControlsAreaPage
+      {...props}
+      {...PivotPageProps[props.platform]}
+      otherSections={_otherSections(props.platform) as IPageSectionProps[]}
+    />
+  );
 };
 
 function _otherSections(platform?: Platforms): IPageSectionProps<Platforms>[] | undefined {

apps/fabric-website/src/pages/Controls/PopupMenuPage/PopupMenuPage.tsx

@@ -8,7 +8,7 @@ const baseUrl = 'https://github.com/OfficeDev/office-ui-fabric-react/tree/master
 
 export const PopupMenuPage: React.StatelessComponent<IControlsPageProps> = props => {
   const { platform } = props;
-  return <ControlsAreaPage {...props} {...PopupMenuPageProps[platform]} otherSections={_otherSections(platform)} />;
+  return <ControlsAreaPage {...props} {...PopupMenuPageProps[platform]} otherSections={_otherSections(platform) as IPageSectionProps[]} />;
 };
 
 function _otherSections(platform: Platforms): IPageSectionProps<Platforms>[] {

apps/fabric-website/src/pages/Controls/SnackbarPage/SnackbarPage.tsx

@@ -8,7 +8,7 @@ const baseUrl = 'https://github.com/OfficeDev/office-ui-fabric-react/tree/master
 
 export const SnackbarPage: React.StatelessComponent<IControlsPageProps> = props => {
   const { platform } = props;
-  return <ControlsAreaPage {...props} {...SnackbarPageProps[platform]} otherSections={_otherSections(platform)} />;
+  return <ControlsAreaPage {...props} {...SnackbarPageProps[platform]} otherSections={_otherSections(platform) as IPageSectionProps[]} />;
 };
 
 function _otherSections(platform: Platforms): IPageSectionProps<Platforms>[] {

apps/fabric-website/src/pages/Controls/SpinnerPage/SpinnerPage.tsx

@@ -6,7 +6,14 @@ import { IPageSectionProps } from '@uifabric/example-app-base/lib/index2';
 
 export const SpinnerPage: React.StatelessComponent<IControlsPageProps> = props => {
   const { platform } = props;
-  return <ControlsAreaPage {...props} title="Spinner" {...SpinnerPageProps[platform]} otherSections={_otherSections(platform)} />;
+  return (
+    <ControlsAreaPage
+      {...props}
+      title="Spinner"
+      {...SpinnerPageProps[platform]}
+      otherSections={_otherSections(platform) as IPageSectionProps[]}
+    />
+  );
 };
 
 function _otherSections(platform: Platforms): IPageSectionProps<Platforms>[] {

apps/fabric-website/src/pages/Controls/TooltipPage/TooltipPage.tsx

@@ -7,7 +7,13 @@ import { Platforms } from '../../../interfaces/Platforms';
 const baseUrl = 'https://github.com/OfficeDev/office-ui-fabric-react/tree/master/apps/fabric-website/src/pages/Controls/TooltipPage/';
 
 export const TooltipPage: React.StatelessComponent<IControlsPageProps> = props => {
-  return <ControlsAreaPage {...props} {...TooltipPageProps[props.platform]} otherSections={_otherSections(props.platform)} />;
+  return (
+    <ControlsAreaPage
+      {...props}
+      {...TooltipPageProps[props.platform]}
+      otherSections={_otherSections(props.platform) as IPageSectionProps[]}
+    />
+  );
 };
 
 function _otherSections(platform?: Platforms): IPageSectionProps<Platforms>[] | undefined {

apps/fabric-website/src/pages/Overviews/ControlsPage/ControlsPage.tsx

@@ -15,7 +15,7 @@ const ControlsPageBase: React.StatelessComponent<IPageProps<Platforms>> = props
       title="Controls"
       platform={platform}
       subTitle={getSubTitle(platform)}
-      otherSections={_otherSections(platform)}
+      otherSections={_otherSections(platform) as IPageSectionProps[]}
       showSideRail={false}
       {...ControlsPageProps[platform]}
     />

apps/fabric-website/src/pages/Overviews/GetStartedPage/GetStartedPage.tsx

@@ -18,7 +18,7 @@ const GetStartedPageBase: React.StatelessComponent<IGetStartedPageProps> = props
       subTitle={getSubTitle(platform)}
       {...props}
       {...GetStartedPageProps[platform]}
-      otherSections={_otherSections(platform)}
+      otherSections={_otherSections(platform) as IPageSectionProps[]}
     />
   );
 };

apps/fabric-website/src/pages/Overviews/StylesPage/StylesPage.tsx

@@ -12,7 +12,7 @@ const StylesPageBase: React.StatelessComponent<IPageProps<Platforms>> = props =>
       title="Styles"
       platform={platform}
       subTitle={getSubTitle(platform)}
-      otherSections={_otherSections(platform)}
+      otherSections={_otherSections(platform) as IPageSectionProps[]}
       showSideRail={false}
       sectionWrapperClassName={styles.cardWrapper}
     />

apps/fabric-website/src/pages/PageTemplates/TemplatePage/TemplatePage.tsx

@@ -31,7 +31,7 @@ const TemplatePageBase: React.StatelessComponent<ITemplatePageProps> = props =>
       // Use the getSubTitle helper function to get the page header subtitle from the active platform.
       subTitle={getSubTitle(platform)}
       // You can define custom sections using the `otherSections` prop. Here it is using a method that takes the platform as an argument to return the correct array of section props.
-      otherSections={_otherSections(platform)}
+      otherSections={_otherSections(platform) as IPageSectionProps[]}
 
       // You can hide the side rail by setting `showSideRail` to false.
       // showSideRail={false}

apps/fabric-website/src/pages/Styles/Colors/MessagingPage.tsx

@@ -8,7 +8,9 @@ const baseUrl = 'https://github.com/OfficeDev/office-ui-fabric-react/tree/master
 
 export const ColorsMessagingPage: React.StatelessComponent<IStylesPageProps> = props => {
   const { platform } = props;
-  return <StylesAreaPage {...props} {...ColorsMessagingPageProps[platform]} otherSections={_otherSections(platform)} />;
+  return (
+    <StylesAreaPage {...props} {...ColorsMessagingPageProps[platform]} otherSections={_otherSections(platform) as IPageSectionProps[]} />
+  );
 };
 
 function _otherSections(platform: Platforms): IPageSectionProps<Platforms>[] {

apps/fabric-website/src/pages/Styles/Colors/NeutralsPage.tsx

@@ -9,7 +9,9 @@ const neutralColors = require<IColorSwatch[]>('@uifabric/fabric-website/lib/data
 
 export const ColorsNeutralsPage: React.StatelessComponent<IStylesPageProps> = props => {
   const { platform } = props;
-  return <StylesAreaPage {...props} {...ColorsNeutralsPageProps[platform]} otherSections={_otherSections(platform)} />;
+  return (
+    <StylesAreaPage {...props} {...ColorsNeutralsPageProps[platform]} otherSections={_otherSections(platform) as IPageSectionProps[]} />
+  );
 };
 
 function _otherSections(platform: Platforms): IPageSectionProps<Platforms>[] {

apps/fabric-website/src/pages/Styles/Colors/PersonasPage.tsx

@@ -10,7 +10,9 @@ const personaGroupColors = require<IColorSwatch[]>('@uifabric/fabric-website/lib
 
 export const ColorsPersonasPage: React.StatelessComponent<IStylesPageProps> = props => {
   const { platform } = props;
-  return <StylesAreaPage {...props} {...ColorsPersonasPageProps[platform]} otherSections={_otherSections(platform)} />;
+  return (
+    <StylesAreaPage {...props} {...ColorsPersonasPageProps[platform]} otherSections={_otherSections(platform) as IPageSectionProps[]} />
+  );
 };
 
 function _otherSections(platform: Platforms): IPageSectionProps<Platforms>[] {

apps/fabric-website/src/pages/Styles/Colors/PresencePage.tsx

@@ -8,7 +8,9 @@ const baseUrl = 'https://github.com/OfficeDev/office-ui-fabric-react/tree/master
 
 export const ColorsPresencePage: React.StatelessComponent<IStylesPageProps> = props => {
   const { platform } = props;
-  return <StylesAreaPage {...props} {...ColorsPresencePageProps[platform]} otherSections={_otherSections(platform)} />;
+  return (
+    <StylesAreaPage {...props} {...ColorsPresencePageProps[platform]} otherSections={_otherSections(platform) as IPageSectionProps[]} />
+  );
 };
 
 function _otherSections(platform: Platforms): IPageSectionProps<Platforms>[] {

apps/fabric-website/src/pages/Styles/Colors/SharedPage.tsx

@@ -9,7 +9,7 @@ const sharedColors = require<IColorSwatch[]>('@uifabric/fabric-website/lib/data/
 
 export const ColorsSharedPage: React.StatelessComponent<IStylesPageProps> = props => {
   const { platform } = props;
-  return <StylesAreaPage {...props} {...ColorsSharedPageProps[platform]} otherSections={_otherSections(platform)} />;
+  return <StylesAreaPage {...props} {...ColorsSharedPageProps[platform]} otherSections={_otherSections(platform) as IPageSectionProps[]} />;
 };
 
 function _otherSections(platform: Platforms): IPageSectionProps<Platforms>[] {

apps/fabric-website/src/pages/Styles/ElevationPage/ElevationPage.tsx

@@ -10,7 +10,7 @@ const baseUrl = 'https://github.com/OfficeDev/office-ui-fabric-react/tree/master
 
 export const ElevationPage: React.StatelessComponent<IStylesPageProps> = props => {
   const { platform } = props;
-  return <StylesAreaPage {...props} {...ElevationPageProps[platform]} otherSections={_otherSections(platform)} />;
+  return <StylesAreaPage {...props} {...ElevationPageProps[platform]} otherSections={_otherSections(platform) as IPageSectionProps[]} />;
 };
 
 function _otherSections(platform: Platforms): IPageSectionProps<Platforms>[] {

apps/fabric-website/src/pages/Styles/FabricIconsPage/FabricIconsPage.tsx

@@ -13,7 +13,7 @@ const enDash = '–';
 
 export const FabricIconsPage: React.StatelessComponent<IStylesPageProps> = props => {
   const { platform } = props;
-  return <StylesAreaPage {...props} {...FabricIconsPageProps[platform]} otherSections={_otherSections(platform)} />;
+  return <StylesAreaPage {...props} {...FabricIconsPageProps[platform]} otherSections={_otherSections(platform) as IPageSectionProps[]} />;
 };
 
 function _otherSections(platform: Platforms): IPageSectionProps<Platforms>[] {

apps/fabric-website/src/pages/Styles/LayoutPage/LayoutPage.tsx

@@ -11,7 +11,7 @@ const breakpointsData = require('../../../data/responsive-breakpoints.json');
 
 export const LayoutPage: React.StatelessComponent<IStylesPageProps> = props => {
   const { platform } = props;
-  return <StylesAreaPage {...props} {...LayoutPageProps[platform]} otherSections={_otherSections(platform)} />;
+  return <StylesAreaPage {...props} {...LayoutPageProps[platform]} otherSections={_otherSections(platform) as IPageSectionProps[]} />;
 };
 
 function _otherSections(platform: Platforms): IPageSectionProps<Platforms>[] {

apps/fabric-website/src/pages/Styles/LocalizationPage/LocalizationPage.tsx

@@ -14,7 +14,7 @@ const localizedFontsData = require('../../../data/localized-fonts.json');
 
 export const LocalizationPage: React.StatelessComponent<IStylesPageProps> = props => {
   const { platform } = props;
-  return <StylesAreaPage {...props} {...LocalizationPageProps[platform]} otherSections={_otherSections(platform)} />;
+  return <StylesAreaPage {...props} {...LocalizationPageProps[platform]} otherSections={_otherSections(platform) as IPageSectionProps[]} />;
 };
 
 function _otherSections(platform: Platforms): IPageSectionProps<Platforms>[] {

apps/fabric-website/src/pages/Styles/MotionPage/MotionPage.tsx

@@ -47,7 +47,7 @@ const PatternTable = ({ rows }) => (
 
 export const MotionPage: React.StatelessComponent<IStylesPageProps> = props => {
   const { platform } = props;
-  return <StylesAreaPage {...props} {...MotionPageProps[platform]} otherSections={_otherSections(platform)} />;
+  return <StylesAreaPage {...props} {...MotionPageProps[platform]} otherSections={_otherSections(platform) as IPageSectionProps[]} />;
 };
 
 function _otherSections(platform: Platforms): IPageSectionProps<Platforms>[] {

apps/fabric-website/src/pages/Styles/OfficeBrandIconsPage/OfficeBrandIconsPage.tsx

@@ -18,7 +18,9 @@ const monochromeIcons = require('@uifabric/fabric-website/lib/data/brand-icons-m
 
 export const OfficeBrandIconsPage: React.StatelessComponent<IStylesPageProps> = props => {
   const { platform } = props;
-  return <StylesAreaPage {...props} {...OfficeBrandIconsPageProps[platform]} otherSections={_otherSections(platform)} />;
+  return (
+    <StylesAreaPage {...props} {...OfficeBrandIconsPageProps[platform]} otherSections={_otherSections(platform) as IPageSectionProps[]} />
+  );
 };
 
 function _otherSections(platform: Platforms): IPageSectionProps<Platforms>[] {

apps/fabric-website/src/pages/Styles/TypographyPage/TypographyPage.tsx

@@ -13,7 +13,7 @@ const baseUrl = 'https://github.com/OfficeDev/office-ui-fabric-react/tree/master
 
 export const TypographyPage: React.StatelessComponent<IStylesPageProps> = props => {
   const { platform } = props;
-  return <StylesAreaPage {...props} {...TypographyPageProps[platform]} otherSections={_otherSections(platform)} />;
+  return <StylesAreaPage {...props} {...TypographyPageProps[platform]} otherSections={_otherSections(platform) as IPageSectionProps[]} />;
 };
 
 function _otherSections(platform: Platforms): IPageSectionProps<Platforms>[] {

apps/theming-designer/package.json

@@ -32,7 +32,7 @@
     "office-ui-fabric-react": ">=6.187.1 <7.0.0",
     "react": ">=16.8.0 <17.0.0",
     "react-dom": ">=16.8.0 <17.0.0",
-    "typescript": "3.3.3",
+    "typescript": "3.5.1",
     "tslib": "^1.7.1"
   }
 }