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

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(),
   }));
 }