Add TypeScript type annotations for improved type safety

website/.remarkrc.mjs

@@ -1,4 +1,4 @@
-import packageJson from "./package.json" assert { type: "json" };
+import packageJson from "./package.json" with { type: "json" };
 
 export default {
   plugins: [

website/docusaurus.config.ts

@@ -21,7 +21,7 @@ export interface EditUrlButton {
   href: string;
 }
 
-const commonDocsOptions = {
+const commonDocsOptions: PluginContentDocs.Options = {
   breadcrumbs: false,
   showLastUpdateAuthor: false,
   showLastUpdateTime: true,

website/src/pages/Home/Platforms/FoxFact.tsx

@@ -7,7 +7,7 @@
 
 import React from 'react';
 
-function FoxFact({className}) {
+function FoxFact({className}: {className: string}) {
   return (
     <svg
       width={167}

website/src/pages/Home/components/Section/index.tsx

@@ -9,7 +9,7 @@ import React from 'react';
 
 import styles from './styles.module.css';
 
-function Section({children}) {
+function Section({children}: {children: React.ReactNode}) {
   return (
     <div className={styles.wrapper}>
       <div className={styles.container}>{children}</div>

website/src/pages/Home/components/ThemeImage/index.tsx

@@ -7,7 +7,17 @@
 
 import React, {useState, useEffect} from 'react';
 
-function ThemeImage({lightSrc, darkSrc, className, alt}) {
+function ThemeImage({
+  lightSrc,
+  darkSrc,
+  className,
+  alt,
+}: {
+  lightSrc: string;
+  darkSrc: string;
+  className?: string;
+  alt: string;
+}) {
   const [theme, setTheme] = useState('light');
 
   useEffect(() => {

website/src/pages/showcase.tsx

@@ -13,7 +13,11 @@ import type users from '../../showcase.json';
 import IconExternalLink from '../theme/Icon/ExternalLink';
 import ThemedImage from '@theme/ThemedImage';
 
-const renderApp = (app, i) => <AppBox app={app} key={`app-${app.name}-${i}`} />;
+type UserAppType = (typeof users)[keyof typeof users][number];
+
+const renderApp = (app: UserAppType, i: number) => (
+  <AppBox app={app} key={`app-${app.name}-${i}`} />
+);
 
 function Section({
   children,
@@ -24,7 +28,7 @@ function Section({
   return <section className={`Section ${background}`}>{children}</section>;
 }
 
-const AppBox = ({app}) => {
+const AppBox = ({app}: {app: UserAppType}) => {
   const imgSource = useBaseUrl(
     app.icon.startsWith('http') ? app.icon : 'img/showcase/' + app.icon
   );
@@ -40,7 +44,7 @@ const AppBox = ({app}) => {
           <h3>{app.name}</h3>
           {renderLinks(app)}
         </div>
-        {app.infoLink && (
+        {'infoTitle' in app && app.infoLink && (
           <a
             className="articleButton"
             href={app.infoLink}
@@ -55,7 +59,7 @@ const AppBox = ({app}) => {
   );
 };
 
-const renderLinks = app => {
+const renderLinks = (app: UserAppType) => {
   const links = [
     app.linkAppStore ? (
       <a key="ios" href={app.linkAppStore} target="_blank">
@@ -67,12 +71,12 @@ const renderLinks = app => {
         Android
       </a>
     ) : null,
-    app.linkDesktop ? (
+    'linkDesktop' in app && app.linkDesktop ? (
       <a key="desktop" href={app.linkDesktop} target="_blank">
         Desktop
       </a>
     ) : null,
-    app.linkMetaQuest ? (
+    'linkMetaQuest' in app && app.linkMetaQuest ? (
       <a key="quest" href={app.linkMetaQuest} target="_blank">
         Meta&nbsp;Quest
       </a>

website/src/theme/Badge/index.tsx

@@ -8,7 +8,13 @@
 import React from 'react';
 import styles from './styles.module.css';
 
-export default function Badge({icon, title}) {
+export default function Badge({
+  icon,
+  title,
+}: {
+  icon: React.ReactNode;
+  title: React.ReactNode;
+}) {
   return (
     <div className={styles.container}>
       {icon}

website/src/theme/Blog/Components/Author/index.tsx

@@ -1,24 +1,24 @@
-import React from 'react';
-import clsx from 'clsx';
-import Link from '@docusaurus/Link';
+import Link, {type Props as LinkProps} from '@docusaurus/Link';
+import type {Props} from '@theme/Blog/Components/Author';
 import AuthorSocials from '@theme/Blog/Components/Author/Socials';
 import Heading from '@theme/Heading';
+import clsx from 'clsx';
 import styles from './styles.module.css';
 
-function MaybeLink(props) {
+function MaybeLink(props: LinkProps) {
   if (props.href) {
     return <Link {...props} />;
   }
   return <>{props.children}</>;
 }
-function AuthorTitle({title}) {
+function AuthorTitle({title}: {title: string}) {
   return (
     <small className={styles.authorTitle} title={title}>
       {title}
     </small>
   );
 }
-function AuthorName({name, as}) {
+function AuthorName({name, as}: {name: string; as: Props['as']}) {
   if (!as) {
     return <span className={styles.authorName}>{name}</span>;
   } else {
@@ -29,17 +29,18 @@ function AuthorName({name, as}) {
     );
   }
 }
-function AuthorBlogPostCount({count}) {
+function AuthorBlogPostCount({count}: {count: number}) {
   return <span className={clsx(styles.authorBlogPostCount)}>{count}</span>;
 }
 // Note: in the future we might want to have multiple "BlogAuthor" components
 // Creating different display modes with the "as" prop may not be the best idea
 // Explainer: https://kyleshevlin.com/prefer-multiple-compositions/
 // For now, we almost use the same design for all cases, so it's good enough
-export default function BlogAuthor({as, author, className, count}) {
+export default function BlogAuthor({as, author, className, count}: Props) {
   const {name, title, url, imageURL, email, page} = author;
   const link =
     page?.permalink || url || (email && `mailto:${email}`) || undefined;
+
   return (
     <div
       className={clsx(
@@ -65,14 +66,14 @@ export default function BlogAuthor({as, author, className, count}) {
                 <AuthorName name={name} as={as} />
               </MaybeLink>
             )}
-            {count && <AuthorBlogPostCount count={count} />}
+            {count !== undefined && <AuthorBlogPostCount count={count} />}
           </div>
           {!!title && <AuthorTitle title={title} />}
 
           {/*
-              We always render AuthorSocials even if there's none
-              This keeps other things aligned with flexbox layout
-            */}
+            We always render AuthorSocials even if there's none
+            This keeps other things aligned with flexbox layout
+          */}
           <AuthorSocials author={author} />
         </div>
       )}

website/src/theme/BlogSidebar/Mobile/index.tsx

@@ -39,7 +39,7 @@ function BlogSidebarMobileSecondaryMenu({sidebar}: Props) {
     </ul>
   );
 }
-export default function BlogSidebarMobile(props) {
+export default function BlogSidebarMobile(props: Props) {
   return (
     <NavbarSecondaryMenuFiller
       component={BlogSidebarMobileSecondaryMenu}

website/src/theme/BoxLink/index.tsx

@@ -8,7 +8,13 @@
 import React from 'react';
 import styles from './styles.module.css';
 
-export default function BoxLink({href, children}) {
+export default function BoxLink({
+  href,
+  children,
+}: {
+  href: string;
+  children: React.ReactNode;
+}) {
   return (
     <a href={href} target="_blank" referrerPolicy="origin">
       <div className={styles.container}>

website/src/theme/DocItem/Footer/index.tsx

@@ -13,6 +13,7 @@ import TagsListInline, {
 import type {EditUrlButton} from '../../../../docusaurus.config';
 import styles from './styles.module.css';
 import DocsRating from '../../../../core/DocsRating';
+import type {Props} from '@theme/EditMetaRow';
 
 function TagsRow(props: TagsListInlineProps) {
   return (
@@ -39,7 +40,7 @@ function EditPage({label, href}: {label: string; href: string}) {
     </Link>
   );
 }
-function EditMetaRow({editUrl, lastUpdatedAt, lastUpdatedBy}) {
+function EditMetaRow({editUrl, lastUpdatedAt, lastUpdatedBy}: Props) {
   const buttons = React.useMemo((): EditUrlButton[] => {
     try {
       return JSON.parse(editUrl);
@@ -87,6 +88,7 @@ export default function DocItemFooter() {
             editUrl={editUrl}
             lastUpdatedAt={lastUpdatedAt}
             lastUpdatedBy={lastUpdatedBy}
+            className=""
           />
         )}
       </footer>

website/src/theme/DocVersionBanner/index.tsx

@@ -1,9 +1,10 @@
-import React from 'react';
+import React, {ComponentType} from 'react';
 import clsx from 'clsx';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import Link from '@docusaurus/Link';
 import Translate from '@docusaurus/Translate';
 import {
+  GlobalVersion,
   useActivePlugin,
   useDocVersionSuggestions,
 } from '@docusaurus/plugin-content-docs/client';
@@ -12,8 +13,21 @@ import {
   useDocsVersion,
   useDocsPreferredVersion,
 } from '@docusaurus/plugin-content-docs/client';
+import type {Props} from '@theme/DocVersionBanner';
+import type {
+  VersionBanner,
+  PropVersionMetadata,
+} from '@docusaurus/plugin-content-docs';
 
-function UnreleasedVersionLabel({siteTitle, versionMetadata}) {
+type BannerLabelComponentProps = {
+  siteTitle: string;
+  versionMetadata: PropVersionMetadata;
+};
+
+function UnreleasedVersionLabel({
+  siteTitle,
+  versionMetadata,
+}: BannerLabelComponentProps) {
   return (
     <Translate
       id="theme.docs.versions.unreleasedVersionLabel"
@@ -29,7 +43,10 @@ function UnreleasedVersionLabel({siteTitle, versionMetadata}) {
   );
 }
 
-function UnmaintainedVersionLabel({siteTitle, versionMetadata}) {
+function UnmaintainedVersionLabel({
+  siteTitle,
+  versionMetadata,
+}: BannerLabelComponentProps) {
   return (
     <Translate
       id="theme.docs.versions.unmaintainedVersionLabel"
@@ -39,23 +56,34 @@ function UnmaintainedVersionLabel({siteTitle, versionMetadata}) {
         versionLabel: <b>{versionMetadata.label}</b>,
       }}>
       {
-        'This is documentation for {siteTitle} {versionLabel}, which is no longer in active development.'
+        'This is documentation for {siteTitle} {versionLabel}, which is no longer actively maintained.'
       }
     </Translate>
   );
 }
-const BannerLabelComponents = {
+
+const BannerLabelComponents: {
+  [banner in VersionBanner]: ComponentType<BannerLabelComponentProps>;
+} = {
   unreleased: UnreleasedVersionLabel,
   unmaintained: UnmaintainedVersionLabel,
 };
 
-function BannerLabel(props) {
+function BannerLabel(props: BannerLabelComponentProps) {
   const BannerLabelComponent =
-    BannerLabelComponents[props.versionMetadata.banner];
+    BannerLabelComponents[props.versionMetadata.banner!];
   return <BannerLabelComponent {...props} />;
 }
 
-function LatestVersionSuggestionLabel({versionLabel, to, onClick}) {
+function LatestVersionSuggestionLabel({
+  versionLabel,
+  to,
+  onClick,
+}: {
+  to: string;
+  onClick: () => void;
+  versionLabel: string;
+}) {
   return (
     <Translate
       id="theme.docs.versions.latestVersionSuggestionLabel"
@@ -81,14 +109,22 @@ function LatestVersionSuggestionLabel({versionLabel, to, onClick}) {
   );
 }
 
-function DocVersionBannerEnabled({className, versionMetadata}) {
+function DocVersionBannerEnabled({
+  className,
+  versionMetadata,
+}: Props & {
+  versionMetadata: PropVersionMetadata;
+}) {
   const {
     siteConfig: {title: siteTitle},
   } = useDocusaurusContext();
-  const {pluginId} = useActivePlugin({failfast: true});
-  const getVersionMainDoc = version =>
-    version.docs.find(doc => doc.id === version.mainDocId);
+  const {pluginId} = useActivePlugin({failfast: true})!;
+
+  const getVersionMainDoc = (version: GlobalVersion) =>
+    version.docs.find(doc => doc.id === version.mainDocId)!;
+
   const {savePreferredVersionName} = useDocsPreferredVersion(pluginId);
+
   const {latestDocSuggestion, latestVersionSuggestion} =
     useDocVersionSuggestions(pluginId);
 
@@ -105,7 +141,9 @@ function DocVersionBannerEnabled({className, versionMetadata}) {
         'alert alert--warning margin-bottom--md'
       )}
       role="alert">
-      <BannerLabel siteTitle={siteTitle} versionMetadata={versionMetadata} />
+      <div>
+        <BannerLabel siteTitle={siteTitle} versionMetadata={versionMetadata} />
+      </div>
       <div className="margin-top--md">
         <LatestVersionSuggestionLabel
           versionLabel={latestVersionSuggestion.label}
@@ -117,7 +155,7 @@ function DocVersionBannerEnabled({className, versionMetadata}) {
   );
 }
 
-export default function DocVersionBanner({className}) {
+export default function DocVersionBanner({className}: Props) {
   const versionMetadata = useDocsVersion();
   if (versionMetadata.banner) {
     return (

website/src/theme/Icon/ExternalLink/index.tsx

@@ -8,7 +8,15 @@
 import React from 'react';
 import styles from './styles.module.css';
 
-export default function IconExternalLink({width = 13.5, height = 13.5, style}) {
+export default function IconExternalLink({
+  width = 13.5,
+  height = 13.5,
+  style,
+}: {
+  width?: number;
+  height?: number;
+  style?: React.CSSProperties;
+}) {
   return (
     <svg
       width={width}