chore: introduce TS path aliases for improved DX in v8 (#25778)

* chore: add v8 base tsconfig with relevant path aliases

* chore: use v8 path aliases for v8 related apps/*

* chore(react-18-tests-v8): follow same pattern with type-check as in v9 when using path aliases

* chore(merge-styles): resolve leaking global type issues exposed by using ts path aliases

* generate changefiles

* fix(theming-designer): fix ts errors exposed by common settings in base.v8

* chore(public-docsite): enable strictNullChecks and noImplicit any to align with v9 packages and to leverage path aliases

* feat(scripts): add  v8 package compilation if TS path aliases are used

apps/perf-test/tsconfig.json

@@ -1,21 +1,15 @@
 {
-  "extends": "../../tsconfig.base.json",
+  "extends": "../../tsconfig.base.v8.json",
   "compilerOptions": {
     "target": "es5",
     "outDir": "lib",
     "module": "commonjs",
     "jsx": "react",
     "declaration": true,
-    "sourceMap": true,
     "experimentalDecorators": true,
-    "forceConsistentCasingInFileNames": true,
-    "moduleResolution": "node",
     "preserveConstEnums": true,
-    "strictNullChecks": true,
-    "noImplicitAny": true,
-    "lib": ["es6", "dom"],
-    "types": ["webpack-env"],
-    "skipLibCheck": true
+    "lib": ["ES2015", "DOM"],
+    "types": ["webpack-env", "node"]
   },
   "include": ["src"]
 }

apps/public-docsite-resources/tsconfig.json

@@ -1,24 +1,17 @@
 {
+  "extends": "../../tsconfig.base.v8.json",
   "compilerOptions": {
     "baseUrl": ".",
     "outDir": "lib",
     "target": "es5",
     "module": "commonjs",
     "jsx": "react",
     "declaration": true,
-    "sourceMap": true,
     "experimentalDecorators": true,
     "importHelpers": true,
     "noUnusedLocals": true,
-    "forceConsistentCasingInFileNames": true,
-    "strictNullChecks": true,
-    "noImplicitAny": true,
-    "moduleResolution": "node",
     "preserveConstEnums": true,
-    "noImplicitThis": true,
-    "skipLibCheck": true,
     "lib": ["es5", "dom", "es2015.promise"],
-    "typeRoots": ["../../node_modules/@types", "../../typings"],
     "types": ["webpack-env", "custom-global"]
   },
   "include": ["src"]

apps/public-docsite/src/SiteDefinition/SiteDefinition.pages/Controls/web.tsx

@@ -12,7 +12,7 @@ export interface ICategory {
 // Exporting this object to be used in generating a TOC (table of content) for docs.microsoft documentation repo.
 // Any changes to this object need to be communicated to avoid accidental breaking of the documentation
 // and to allow the appropriate actions to be taken to mitigate this.
-export const categories: { Other?: ICategory; [name: string]: ICategory } = {
+export const categories: { [name: string]: ICategory } = {
   'Basic Inputs': {
     Button: {},
     Checkbox: {},

apps/public-docsite/src/components/IconGrid/IconGrid.tsx

@@ -161,7 +161,7 @@ export class IconGrid extends React.Component<IIconGridProps, IIconGridState> {
 
   private _onSearchQueryChanged: ISearchBoxProps['onChange'] = (ev, newValue) => {
     this.setState({
-      searchQuery: newValue,
+      searchQuery: newValue!,
     });
   };
 }

apps/public-docsite/src/components/Nav/Nav.tsx

@@ -155,11 +155,11 @@ export class Nav extends React.Component<INavProps, INavState> {
       <li
         className={css(
           styles.link,
-          isPageActive(page.url) && styles.isActive,
+          isPageActive(page.url!) && styles.isActive,
           hasActiveChild(page) && styles.hasActiveChild,
           page.isHomePage && styles.isHomePage,
         )}
-        key={linkIndex + page.url}
+        key={linkIndex + page.url!}
       >
         {page.title.toLowerCase().indexOf(searchQuery) !== -1 && (
           <Link href={page.url} onClick={this._onLinkClick} target={page.isExternal ? '_blank' : undefined}>

apps/public-docsite/src/components/Site/Site.tsx

@@ -96,7 +96,7 @@ export class Site<TPlatforms extends string = string> extends React.Component<
     let platform = 'default' as TPlatforms;
 
     // If current page doesn't have pages for the active platform, switch to its first platform.
-    if (Object.keys(navData.pagePlatforms).length > 0 && navData.activePages.length === 0) {
+    if (Object.keys(navData.pagePlatforms!).length > 0 && navData.activePages!.length === 0) {
       const firstPlatform = getPageFirstPlatform(getSiteArea(siteDefinition.pages), siteDefinition);
       const currentPage = getSiteArea(siteDefinition.pages);
       platform = firstPlatform;
@@ -142,7 +142,7 @@ export class Site<TPlatforms extends string = string> extends React.Component<
     const { siteDefinition } = this.props;
 
     // If current page doesn't have pages for the active platform, switch to its first platform.
-    if (Object.keys(pagePlatforms).length > 0 && activePages.length === 0) {
+    if (Object.keys(pagePlatforms!).length > 0 && activePages!.length === 0) {
       const firstPlatform = getPageFirstPlatform(getSiteArea(siteDefinition.pages), siteDefinition);
       this._onPlatformChanged(firstPlatform);
     }
@@ -347,22 +347,19 @@ export class Site<TPlatforms extends string = string> extends React.Component<
     return null;
   };
 
-  private _renderPlatformBar = (): JSX.Element | undefined => {
+  private _renderPlatformBar = (): JSX.Element | null => {
     const { siteDefinition } = this.props;
     const { platform, pagePlatforms, hasPlatformPicker } = this.state;
 
-    return (
-      hasPlatformPicker &&
-      Object.keys(pagePlatforms).length > 0 && (
-        <PlatformBar
-          activePlatform={platform}
-          onPlatformClick={this._onPlatformChanged}
-          pagePlatforms={pagePlatforms}
-          platforms={siteDefinition.platforms}
-          innerWidth={appMaximumWidthLg}
-        />
-      )
-    );
+    return hasPlatformPicker && Object.keys(pagePlatforms!).length > 0 ? (
+      <PlatformBar
+        activePlatform={platform}
+        onPlatformClick={this._onPlatformChanged}
+        pagePlatforms={pagePlatforms}
+        platforms={siteDefinition.platforms!}
+        innerWidth={appMaximumWidthLg}
+      />
+    ) : null;
   };
 
   /**
@@ -500,7 +497,7 @@ export class Site<TPlatforms extends string = string> extends React.Component<
     document.title = [
       siteDefinition.siteTitle,
       siteArea,
-      currPlatform && platforms[currPlatform]?.name,
+      currPlatform && platforms![currPlatform]?.name,
       activePageName !== siteArea && activePageName,
     ]
       .filter(Boolean)
@@ -531,7 +528,7 @@ export class Site<TPlatforms extends string = string> extends React.Component<
       this._jumpInterval = this._async.setInterval(() => {
         const el = document.getElementById(anchor);
         if (el || Date.now() - start > 1000) {
-          this._async.clearInterval(this._jumpInterval);
+          this._async.clearInterval(this._jumpInterval!);
           this._jumpInterval = undefined;
           if (el) {
             jumpToAnchor(anchor);

apps/public-docsite/src/components/Table/Table.tsx

@@ -59,7 +59,7 @@ export class Table extends React.Component<ITableProps, ITableState> {
       </td>
     ) : (
       // eslint-disable-next-line react/no-danger
-      <td className={cell.className} key={index} dangerouslySetInnerHTML={{ __html: cell.html }} />
+      <td className={cell.className} key={index} dangerouslySetInnerHTML={{ __html: cell.html! }} />
     );
   }
 

apps/public-docsite/src/pages/Controls/ActivityItemPage/ActivityItemPage.tsx

@@ -3,5 +3,5 @@ import { ControlsAreaPage, IControlsPageProps } from '../ControlsAreaPage';
 import { ActivityItemPageProps } from './ActivityItemPage.doc';
 
 export const ActivityItemPage: React.FunctionComponent<IControlsPageProps> = props => {
-  return <ControlsAreaPage {...props} {...ActivityItemPageProps[props.platform]} />;
+  return <ControlsAreaPage {...props} {...ActivityItemPageProps[props.platform!]} />;
 };

apps/public-docsite/src/pages/Controls/AnnouncedPage/AnnouncedBulkOperationsPage.tsx

@@ -3,5 +3,5 @@ import { ControlsAreaPage, IControlsPageProps } from '../ControlsAreaPage';
 import { AnnouncedBulkOperationsPageProps } from './AnnouncedBulkOperationsPage.doc';
 
 export const AnnouncedBulkOperationsPage: React.FunctionComponent<IControlsPageProps> = props => {
-  return <ControlsAreaPage {...props} {...AnnouncedBulkOperationsPageProps[props.platform]} />;
+  return <ControlsAreaPage {...props} {...AnnouncedBulkOperationsPageProps[props.platform!]} />;
 };

apps/public-docsite/src/pages/Controls/AnnouncedPage/AnnouncedLazyLoadingPage.tsx

@@ -3,5 +3,5 @@ import { ControlsAreaPage, IControlsPageProps } from '../ControlsAreaPage';
 import { AnnouncedLazyLoadingPageProps } from './AnnouncedLazyLoadingPage.doc';
 
 export const AnnouncedLazyLoadingPage: React.FunctionComponent<IControlsPageProps> = props => {
-  return <ControlsAreaPage {...props} {...AnnouncedLazyLoadingPageProps[props.platform]} />;
+  return <ControlsAreaPage {...props} {...AnnouncedLazyLoadingPageProps[props.platform!]} />;
 };

apps/public-docsite/src/pages/Controls/AnnouncedPage/AnnouncedPage.tsx

@@ -3,5 +3,5 @@ import { ControlsAreaPage, IControlsPageProps } from '../ControlsAreaPage';
 import { AnnouncedPageProps } from './AnnouncedPage.doc';
 
 export const AnnouncedPage: React.FunctionComponent<IControlsPageProps> = props => {
-  return <ControlsAreaPage {...props} {...AnnouncedPageProps[props.platform]} />;
+  return <ControlsAreaPage {...props} {...AnnouncedPageProps[props.platform!]} />;
 };

apps/public-docsite/src/pages/Controls/AnnouncedPage/AnnouncedQuickActionsPage.tsx

@@ -3,5 +3,5 @@ import { ControlsAreaPage, IControlsPageProps } from '../ControlsAreaPage';
 import { AnnouncedQuickActionsPageProps } from './AnnouncedQuickActionsPage.doc';
 
 export const AnnouncedQuickActionsPage: React.FunctionComponent<IControlsPageProps> = props => {
-  return <ControlsAreaPage {...props} {...AnnouncedQuickActionsPageProps[props.platform]} />;
+  return <ControlsAreaPage {...props} {...AnnouncedQuickActionsPageProps[props.platform!]} />;
 };

apps/public-docsite/src/pages/Controls/AnnouncedPage/AnnouncedSearchResultsPage.tsx

@@ -3,5 +3,5 @@ import { ControlsAreaPage, IControlsPageProps } from '../ControlsAreaPage';
 import { AnnouncedSearchResultsPageProps } from './AnnouncedSearchResultsPage.doc';
 
 export const AnnouncedSearchResultsPage: React.FunctionComponent<IControlsPageProps> = props => {
-  return <ControlsAreaPage {...props} {...AnnouncedSearchResultsPageProps[props.platform]} />;
+  return <ControlsAreaPage {...props} {...AnnouncedSearchResultsPageProps[props.platform!]} />;
 };

apps/public-docsite/src/pages/Controls/AvatarPage/AvatarPage.tsx

@@ -12,13 +12,13 @@ export const AvatarPage: React.FunctionComponent<IControlsPageProps> = props =>
     <ControlsAreaPage
       {...props}
       title="Avatar"
-      {...AvatarPageProps[platform]}
-      otherSections={_otherSections(platform) as IPageSectionProps[]}
+      {...AvatarPageProps[platform!]}
+      otherSections={_otherSections(platform!) as IPageSectionProps[]}
     />
   );
 };
 
-function _otherSections(platform: Platforms): IPageSectionProps<Platforms>[] {
+function _otherSections(platform: Platforms): IPageSectionProps<Platforms>[] | undefined {
   switch (platform) {
     case 'ios':
       return [

apps/public-docsite/src/pages/Controls/BottomNavigationPage/BottomNavigationPage.tsx

@@ -11,7 +11,7 @@ export const BottomNavigationPage: React.FunctionComponent<IControlsPageProps> =
   return (
     <ControlsAreaPage
       {...props}
-      {...BottomNavigationPageProps[props.platform]}
+      {...BottomNavigationPageProps[props.platform!]}
       otherSections={_otherSections(props.platform) as IPageSectionProps[]}
     />
   );

apps/public-docsite/src/pages/Controls/BottomSheetPage/BottomSheetPage.tsx

@@ -13,13 +13,13 @@ export const BottomSheetPage: React.FunctionComponent<IControlsPageProps> = prop
     <ControlsAreaPage
       {...props}
       title="BottomSheet"
-      {...BottomSheetPageProps[platform]}
-      otherSections={_otherSections(platform) as IPageSectionProps[]}
+      {...BottomSheetPageProps[platform!]}
+      otherSections={_otherSections(platform!) as IPageSectionProps[]}
     />
   );
 };
 
-function _otherSections(platform: Platforms): IPageSectionProps<Platforms>[] {
+function _otherSections(platform: Platforms): IPageSectionProps<Platforms>[] | undefined {
   switch (platform) {
     case 'android':
       return [

apps/public-docsite/src/pages/Controls/BreadcrumbPage/BreadcrumbPage.tsx

@@ -3,5 +3,5 @@ import { ControlsAreaPage, IControlsPageProps } from '../ControlsAreaPage';
 import { BreadcrumbPageProps } from './BreadcrumbPage.doc';
 
 export const BreadcrumbPage: React.FunctionComponent<IControlsPageProps> = props => {
-  return <ControlsAreaPage {...props} {...BreadcrumbPageProps[props.platform]} />;
+  return <ControlsAreaPage {...props} {...BreadcrumbPageProps[props.platform!]} />;
 };

apps/public-docsite/src/pages/Controls/ButtonPage/ButtonPage.tsx

@@ -58,14 +58,14 @@ export class ButtonPage extends React.Component<
       <ControlsAreaPage
         {...this.props}
         title="Button"
-        {...buttonPageProps[this.props.platform]}
+        {...buttonPageProps[this.props.platform!]}
         exampleKnobs={this.renderKnobs()}
-        otherSections={this._otherSections(this.props.platform) as IPageSectionProps[]}
+        otherSections={this._otherSections(this.props.platform!) as IPageSectionProps[]}
       />
     );
   }
 
-  private _otherSections(platform: Platforms): IPageSectionProps<Platforms>[] {
+  private _otherSections(platform: Platforms): IPageSectionProps<Platforms>[] | undefined {
     switch (platform) {
       case 'ios':
         return [

apps/public-docsite/src/pages/Controls/CalendarPage/CalendarPage.tsx

@@ -13,13 +13,13 @@ export const CalendarPage: React.FunctionComponent<IControlsPageProps> = props =
     <ControlsAreaPage
       {...props}
       title="Calendar"
-      {...CalendarPageProps[props.platform]}
-      otherSections={_otherSections(platform) as IPageSectionProps[]}
+      {...CalendarPageProps[props.platform!]}
+      otherSections={_otherSections(platform!) as IPageSectionProps[]}
     />
   );
 };
 
-function _otherSections(platform: Platforms): IPageSectionProps<Platforms>[] {
+function _otherSections(platform: Platforms): IPageSectionProps<Platforms>[] | undefined {
   switch (platform) {
     case 'android':
       return [

apps/public-docsite/src/pages/Controls/CalloutPage/CalloutPage.tsx

@@ -3,5 +3,5 @@ import { ControlsAreaPage, IControlsPageProps } from '../ControlsAreaPage';
 import { CalloutPageProps } from './CalloutPage.doc';
 
 export const CalloutPage: React.FunctionComponent<IControlsPageProps> = props => {
-  return <ControlsAreaPage {...props} {...CalloutPageProps[props.platform]} />;
+  return <ControlsAreaPage {...props} {...CalloutPageProps[props.platform!]} />;
 };

apps/public-docsite/src/pages/Controls/CheckboxPage/CheckboxPage.tsx

@@ -3,5 +3,5 @@ import { ControlsAreaPage, IControlsPageProps } from '../ControlsAreaPage';
 import { CheckboxPageProps } from './CheckboxPage.doc';
 
 export const CheckboxPage: React.FunctionComponent<IControlsPageProps> = props => {
-  return <ControlsAreaPage {...props} {...CheckboxPageProps[props.platform]} />;
+  return <ControlsAreaPage {...props} {...CheckboxPageProps[props.platform!]} />;
 };

apps/public-docsite/src/pages/Controls/ChipPage/ChipPage.tsx

@@ -11,13 +11,13 @@ export const ChipPage: React.FunctionComponent<IControlsPageProps> = props => {
   return (
     <ControlsAreaPage
       {...props}
-      {...ChipPageProps[platform]}
-      otherSections={_otherSections(platform) as IPageSectionProps[]}
+      {...ChipPageProps[platform!]}
+      otherSections={_otherSections(platform!) as IPageSectionProps[]}
     />
   );
 };
 
-function _otherSections(platform: Platforms): IPageSectionProps<Platforms>[] {
+function _otherSections(platform: Platforms): IPageSectionProps<Platforms>[] | undefined {
   switch (platform) {
     case 'ios':
       return [

apps/public-docsite/src/pages/Controls/ChoiceGroupPage/ChoiceGroupPage.tsx

@@ -3,5 +3,5 @@ import { ControlsAreaPage, IControlsPageProps } from '../ControlsAreaPage';
 import { ChoiceGroupPageProps } from './ChoiceGroupPage.doc';
 
 export const ChoiceGroupPage: React.FunctionComponent<IControlsPageProps> = props => {
-  return <ControlsAreaPage {...props} {...ChoiceGroupPageProps[props.platform]} />;
+  return <ControlsAreaPage {...props} {...ChoiceGroupPageProps[props.platform!]} />;
 };

apps/public-docsite/src/pages/Controls/CoachmarkPage/CoachmarkPage.tsx

@@ -3,5 +3,5 @@ import { ControlsAreaPage, IControlsPageProps } from '../ControlsAreaPage';
 import { CoachmarkPageProps } from './CoachmarkPage.doc';
 
 export const CoachmarkPage: React.FunctionComponent<IControlsPageProps> = props => {
-  return <ControlsAreaPage {...props} {...CoachmarkPageProps[props.platform]} />;
+  return <ControlsAreaPage {...props} {...CoachmarkPageProps[props.platform!]} />;
 };

apps/public-docsite/src/pages/Controls/ColorPickerPage/ColorPickerPage.tsx

@@ -3,5 +3,5 @@ import { ControlsAreaPage, IControlsPageProps } from '../ControlsAreaPage';
 import { ColorPickerPageProps } from './ColorPickerPage.doc';
 
 export const ColorPickerPage: React.FunctionComponent<IControlsPageProps> = props => {
-  return <ControlsAreaPage {...props} {...ColorPickerPageProps[props.platform]} />;
+  return <ControlsAreaPage {...props} {...ColorPickerPageProps[props.platform!]} />;
 };

apps/public-docsite/src/pages/Controls/ComboBoxPage/ComboBoxPage.tsx

@@ -3,5 +3,5 @@ import { ControlsAreaPage, IControlsPageProps } from '../ControlsAreaPage';
 import { ComboBoxPageProps } from './ComboBoxPage.doc';
 
 export const ComboBoxPage: React.FunctionComponent<IControlsPageProps> = props => {
-  return <ControlsAreaPage {...props} {...ComboBoxPageProps[props.platform]} />;
+  return <ControlsAreaPage {...props} {...ComboBoxPageProps[props.platform!]} />;
 };

apps/public-docsite/src/pages/Controls/CommandBarPage/CommandBarPage.tsx

@@ -3,5 +3,5 @@ import { ControlsAreaPage, IControlsPageProps } from '../ControlsAreaPage';
 import { CommandBarPageProps } from './CommandBarPage.doc';
 
 export const CommandBarPage: React.FunctionComponent<IControlsPageProps> = props => {
-  return <ControlsAreaPage {...props} {...CommandBarPageProps[props.platform]} />;
+  return <ControlsAreaPage {...props} {...CommandBarPageProps[props.platform!]} />;
 };

apps/public-docsite/src/pages/Controls/ContextualMenuPage/ContextualMenuPage.tsx

@@ -3,5 +3,5 @@ import { ControlsAreaPage, IControlsPageProps } from '../ControlsAreaPage';
 import { ContextualMenuPageProps } from './ContextualMenuPage.doc';
 
 export const ContextualMenuPage: React.FunctionComponent<IControlsPageProps> = props => {
-  return <ControlsAreaPage {...props} {...ContextualMenuPageProps[props.platform]} />;
+  return <ControlsAreaPage {...props} {...ContextualMenuPageProps[props.platform!]} />;
 };

apps/public-docsite/src/pages/Controls/ControlsAreaPage.tsx

@@ -22,8 +22,8 @@ const ControlsAreaPageBase: React.FunctionComponent<IControlsPageProps> = props
   }
   return (
     <Page
-      subTitle={getSubTitle(props.platform)}
-      jsonDocs={jsonDocs}
+      subTitle={getSubTitle(props.platform!)}
+      jsonDocs={jsonDocs!}
       {...props}
       versionSwitcherDefinition={
         props.platform === Platforms.web ? SiteDefinition.versionSwitcherDefinition : undefined

apps/public-docsite/src/pages/Controls/DatePickerPage/DatePickerPage.tsx

@@ -12,13 +12,13 @@ export const DatePickerPage: React.FunctionComponent<IControlsPageProps> = props
   return (
     <ControlsAreaPage
       {...props}
-      {...DatePickerPageProps[platform]}
-      otherSections={_otherSections(platform) as IPageSectionProps[]}
+      {...DatePickerPageProps[platform!]}
+      otherSections={_otherSections(platform!) as IPageSectionProps[]}
     />
   );
 };
 
-function _otherSections(platform: Platforms): IPageSectionProps<Platforms>[] {
+function _otherSections(platform: Platforms): IPageSectionProps<Platforms>[] | undefined {
   switch (platform) {
     case 'ios':
       return [

apps/public-docsite/src/pages/Controls/DetailsListPage/DetailsListAdvancedPage.tsx

@@ -3,5 +3,5 @@ import { ControlsAreaPage, IControlsPageProps } from '../ControlsAreaPage';
 import { DetailsListAdvancedPageProps } from './DetailsListAdvancedPage.doc';
 
 export const DetailsListAdvancedPage: React.FunctionComponent<IControlsPageProps> = props => {
-  return <ControlsAreaPage {...props} {...DetailsListAdvancedPageProps[props.platform]} />;
+  return <ControlsAreaPage {...props} {...DetailsListAdvancedPageProps[props.platform!]} />;
 };