refactor: make entire project typecheck with root tsconfig (#7466)

admin/scripts/formatLighthouseReport.js

@@ -35,7 +35,9 @@ const scoreEntry = (rawScore) => {
 const createMarkdownTableRow = ({url, summary, reportUrl}) =>
   [
     `| [${new URL(url).pathname}](${url})`,
-    ...Object.keys(summaryKeys).map((k) => scoreEntry(summary[k])),
+    .../** @type {(keyof LighthouseSummary)[]} */ (
+      Object.keys(summaryKeys)
+    ).map((k) => scoreEntry(summary[k])),
     `[Report](${reportUrl}) |`,
   ].join(' | ');
 
@@ -54,8 +56,10 @@ const createMarkdownTableHeader = () => [
 const createLighthouseReport = ({results, links}) => {
   const tableHeader = createMarkdownTableHeader();
   const tableBody = results.map((result) => {
-    const testUrl = Object.keys(links).find((key) => key === result.url);
-    const reportPublicUrl = links[testUrl];
+    const testUrl = /** @type {string} */ (
+      Object.keys(links).find((key) => key === result.url)
+    );
+    const reportPublicUrl = /** @type {string} */ (links[testUrl]);
 
     return createMarkdownTableRow({
       url: testUrl,

packages/create-docusaurus/tsconfig.json

@@ -3,7 +3,6 @@
   "references": [{"path": "./tsconfig.build.json"}],
   "compilerOptions": {
     "noEmit": true,
-    "allowJs": true,
     "module": "esnext",
     "rootDir": "."
   },

packages/docusaurus-migrate/tsconfig.json

@@ -4,7 +4,6 @@
   "compilerOptions": {
     "noEmit": true,
     "module": "esnext",
-    "allowJs": true,
     "rootDir": "."
   },
   "include": ["bin"],

packages/docusaurus-plugin-content-docs/src/client/index.ts

@@ -34,8 +34,9 @@ const StableEmptyObject = {};
 // In blog-only mode, docs hooks are still used by the theme. We need a fail-
 // safe fallback when the docs plugin is not in use
 export const useAllDocsData = (): {[pluginId: string]: GlobalPluginData} =>
-  useAllPluginInstancesData('docusaurus-plugin-content-docs') ??
-  StableEmptyObject;
+  (useAllPluginInstancesData('docusaurus-plugin-content-docs') as {
+    [pluginId: string]: GlobalPluginData;
+  }) ?? StableEmptyObject;
 
 export const useDocsData = (pluginId: string | undefined): GlobalPluginData =>
   usePluginData('docusaurus-plugin-content-docs', pluginId, {

packages/docusaurus-plugin-pwa/src/registerSw.ts

@@ -7,20 +7,12 @@
 
 import {createStorageSlot} from '@docusaurus/theme-common';
 
-declare global {
-  namespace NodeJS {
-    interface ProcessEnv {
-      PWA_OFFLINE_MODE_ACTIVATION_STRATEGIES: (keyof typeof OfflineModeActivationStrategiesImplementations)[];
-    }
-  }
-}
-
 // First: read the env variables (provided by Webpack)
 /* eslint-disable prefer-destructuring */
 const PWA_SERVICE_WORKER_URL = process.env.PWA_SERVICE_WORKER_URL;
 const PWA_RELOAD_POPUP = process.env.PWA_RELOAD_POPUP;
-const PWA_OFFLINE_MODE_ACTIVATION_STRATEGIES =
-  process.env.PWA_OFFLINE_MODE_ACTIVATION_STRATEGIES;
+const PWA_OFFLINE_MODE_ACTIVATION_STRATEGIES = process.env
+  .PWA_OFFLINE_MODE_ACTIVATION_STRATEGIES as unknown as (keyof typeof OfflineModeActivationStrategiesImplementations)[];
 const PWA_DEBUG = process.env.PWA_DEBUG;
 /* eslint-enable prefer-destructuring */
 
@@ -77,7 +69,7 @@ async function isAppInstalledEventFired() {
 declare global {
   interface Navigator {
     getInstalledRelatedApps: () => Promise<{platform: string}[]>;
-    connection: {saveData: boolean};
+    connection: {effectiveType: string; saveData: boolean};
   }
 }
 

packages/docusaurus-theme-translations/tsconfig.json

@@ -4,8 +4,7 @@
   "compilerOptions": {
     "module": "esnext",
     "noEmit": true,
-    "checkJs": true,
-    "allowJs": true
+    "checkJs": true
   },
   "include": ["update.mjs"]
 }

packages/docusaurus/tsconfig.json

@@ -6,7 +6,6 @@
   ],
   "compilerOptions": {
     "noEmit": true,
-    "allowJs": true,
     "checkJs": true,
     "rootDir": ".",
     "module": "esnext"

tsconfig.json

@@ -11,6 +11,8 @@
     "jsx": "react-native",
     "importHelpers": true,
     "noEmitHelpers": true,
+    // Will be overridden in every project
+    "module": "esnext",
     // Avoid accidentally using this config to build
     "noEmit": true,
 
@@ -46,7 +48,15 @@
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
     "isolatedModules": true,
+    "allowJs": true,
     "skipLibCheck": true // @types/webpack and webpack/types.d.ts are not the same thing
   },
-  "exclude": ["node_modules", "**/lib/**/*"]
+  "exclude": [
+    "node_modules",
+    "**/lib/**/*",
+    "website/**",
+    "**/__mocks__/**/*",
+    "examples/**",
+    "packages/create-docusaurus/templates/**"
+  ]
 }

website/community/4-canary/Versions.tsx

@@ -13,7 +13,7 @@ import CodeBlock from '@theme/CodeBlock';
 
 type ContextValue = {
   name: string;
-  time: string;
+  time: string | undefined;
 };
 
 const Context = React.createContext<ContextValue | null>(null);
@@ -44,7 +44,7 @@ function useStableVersion(): string {
 
   const allVersions = useVersions('default');
   const lastVersion = (
-    allVersions.find((v) => v.name !== 'current') ?? allVersions[0]
+    allVersions.find((v) => v.name !== 'current') ?? allVersions[0]!
   ).name;
   return preferredVersion && preferredVersion !== 'current'
     ? preferredVersion

website/docusaurus.config.js

@@ -26,7 +26,7 @@ function getNextBetaVersionName() {
   const expectedPrefix = '2.0.0-beta.';
 
   const lastReleasedVersion = versions[0];
-  if (!lastReleasedVersion.includes(expectedPrefix)) {
+  if (!lastReleasedVersion || !lastReleasedVersion.includes(expectedPrefix)) {
     throw new Error(
       'this code is only meant to be used during the 2.0 beta phase.',
     );

website/src/components/APITable/index.tsx

@@ -67,9 +67,10 @@ const APITableRowComp = React.forwardRef(APITableRow);
  * should be generally correct in the MDX context.
  */
 export default function APITable({children, name}: Props): JSX.Element {
-  const [thead, tbody] = React.Children.toArray(
-    children.props.children,
-  ) as ReactElement[];
+  const [thead, tbody] = React.Children.toArray(children.props.children) as [
+    ReactElement,
+    ReactElement,
+  ];
   const highlightedRow = useRef<HTMLTableRowElement>(null);
   useEffect(() => {
     highlightedRow.current?.focus();

website/src/components/ColorGenerator/index.tsx

@@ -250,7 +250,7 @@ export default function ColorGenerator(): JSX.Element {
                             setShades({
                               ...shades,
                               [variableName]: {
-                                ...shades[variableName],
+                                ...shades[variableName]!,
                                 adjustmentInput: event.target.value,
                                 adjustment: Number.isNaN(newValue)
                                   ? adjustment

website/src/components/UpgradeGuide/index.tsx

@@ -23,7 +23,7 @@ function PackageJson() {
   // Only happens in deploy preview / local dev, but still nice
   const versionName =
     latestVersion.name === 'current' && allVersions.length > 1
-      ? allVersions[1].name
+      ? allVersions[1]!.name
       : latestVersion.name;
   return (
     <CodeBlock language="json" title="package.json">{`{

website/src/pages/index.tsx

@@ -101,7 +101,7 @@ function MigrationAnnouncement() {
 function TweetsSection() {
   const tweetColumns: Array<Array<TweetItem>> = [[], [], []];
   Tweets.filter((tweet) => tweet.showOnHomepage).forEach((tweet, i) =>
-    tweetColumns[i % 3].push(tweet),
+    tweetColumns[i % 3]!.push(tweet),
   );
 
   return (

website/src/theme/theme.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+declare module '@theme-original/ColorModeToggle' {
+  export {default} from '@theme/ColorModeToggle';
+}

website/src/utils/colorUtils.ts

@@ -85,12 +85,14 @@ export const darkStorage = createStorageSlot('ifm-theme-colors-dark', {
   persistence: 'sessionStorage',
 });
 
-// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-export function getAdjustedColors(shades: Shades, baseColor: string) {
+export function getAdjustedColors(
+  shades: Shades,
+  baseColor: string,
+): (Shades[string] & {variableName: string; hex: string})[] {
   return Object.keys(shades).map((shade) => ({
-    ...shades[shade],
+    ...shades[shade]!,
     variableName: shade,
-    hex: Color(baseColor).darken(shades[shade].adjustment).hex(),
+    hex: Color(baseColor).darken(shades[shade]!.adjustment).hex(),
   }));
 }
 

website/tsconfig.json

@@ -5,13 +5,35 @@
     "lib": ["DOM", "ESNext"],
     "baseUrl": ".",
     "resolveJsonModule": true,
+
+    // Duplicated from the root config, because TS does not support extending
+    // multiple configs and we want to dogfood the @tsconfig/docusaurus one
+    "allowUnreachableCode": false,
+    "exactOptionalPropertyTypes": false,
+    "noFallthroughCasesInSwitch": true,
+    "noImplicitOverride": true,
+    "noImplicitReturns": true,
+    "noPropertyAccessFromIndexSignature": false,
+    "noUncheckedIndexedAccess": true,
     "strict": true,
+    "alwaysStrict": true,
+    "noImplicitAny": true,
+    "noImplicitThis": true,
+    "strictBindCallApply": true,
+    "strictFunctionTypes": true,
+    "strictNullChecks": true,
+    "strictPropertyInitialization": true,
+    "useUnknownInCatchVariables": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "importsNotUsedAsValues": "remove",
+
     // This is important. We run `yarn tsc` in website so we can catch issues
     // with our declaration files (mostly names that are forgotten to be
     // imported, invalid semantics...). Because we don't have end-to-end type
     // tests, removing this would make things much harder to catch.
     "skipLibCheck": false,
-    "types": ["@types/jest"]
+    "types": ["jest"]
   },
   "exclude": ["src/sw.js"]
 }