Add TypeScript type annotations for improved type safety

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

@@ -2,23 +2,26 @@ import React from 'react';
 import clsx from 'clsx';
 import Link from '@docusaurus/Link';
 import AuthorSocials from '@theme/Blog/Components/Author/Socials';
+import {Props as AuthorSocialsProps} from '@theme/Blog/Components/Author/Socials';
+import {Props as LinkProps} from '@docusaurus/Link';
+import {Props as HeadingProps} from '@theme/Heading';
 import Heading from '@theme/Heading';
 import styles from './styles.module.css';
 
-function MaybeLink(props) {
+function MaybeLink(props: LinkProps & {children: React.ReactNode}) {
   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?: HeadingProps['as']}) {
   if (!as) {
     return <span className={styles.authorName}>{name}</span>;
   } else {
@@ -29,14 +32,24 @@ 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,
+}: {
+  as: HeadingProps['as'];
+  author: AuthorSocialsProps['author'];
+  className?: string;
+  count?: number;
+}) {
   const {name, title, url, imageURL, email, page} = author;
   const link =
     page?.permalink || url || (email && `mailto:${email}`) || undefined;

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

@@ -39,7 +39,15 @@ function EditPage({label, href}: {label: string; href: string}) {
     </Link>
   );
 }
-function EditMetaRow({editUrl, lastUpdatedAt, lastUpdatedBy}) {
+function EditMetaRow({
+  editUrl,
+  lastUpdatedAt,
+  lastUpdatedBy,
+}: {
+  editUrl: string;
+  lastUpdatedAt: number;
+  lastUpdatedBy: string;
+}) {
   const buttons = React.useMemo((): EditUrlButton[] => {
     try {
       return JSON.parse(editUrl);

website/src/theme/DocVersionBanner/index.tsx

@@ -12,8 +12,15 @@ import {
   useDocsVersion,
   useDocsPreferredVersion,
 } from '@docusaurus/plugin-content-docs/client';
+import {type PropVersionMetadata} from '@docusaurus/plugin-content-docs';
 
-function UnreleasedVersionLabel({siteTitle, versionMetadata}) {
+function UnreleasedVersionLabel({
+  siteTitle,
+  versionMetadata,
+}: {
+  siteTitle: string;
+  versionMetadata: PropVersionMetadata;
+}) {
   return (
     <Translate
       id="theme.docs.versions.unreleasedVersionLabel"
@@ -29,7 +36,13 @@ function UnreleasedVersionLabel({siteTitle, versionMetadata}) {
   );
 }
 
-function UnmaintainedVersionLabel({siteTitle, versionMetadata}) {
+function UnmaintainedVersionLabel({
+  siteTitle,
+  versionMetadata,
+}: {
+  siteTitle: string;
+  versionMetadata: PropVersionMetadata;
+}) {
   return (
     <Translate
       id="theme.docs.versions.unmaintainedVersionLabel"
@@ -44,6 +57,7 @@ function UnmaintainedVersionLabel({siteTitle, versionMetadata}) {
     </Translate>
   );
 }
+
 const BannerLabelComponents = {
   unreleased: UnreleasedVersionLabel,
   unmaintained: UnmaintainedVersionLabel,
@@ -55,7 +69,15 @@ function BannerLabel(props) {
   return <BannerLabelComponent {...props} />;
 }
 
-function LatestVersionSuggestionLabel({versionLabel, to, onClick}) {
+function LatestVersionSuggestionLabel({
+  versionLabel,
+  to,
+  onClick,
+}: {
+  versionLabel: string;
+  to: string;
+  onClick: () => void;
+}) {
   return (
     <Translate
       id="theme.docs.versions.latestVersionSuggestionLabel"
@@ -81,7 +103,13 @@ function LatestVersionSuggestionLabel({versionLabel, to, onClick}) {
   );
 }
 
-function DocVersionBannerEnabled({className, versionMetadata}) {
+function DocVersionBannerEnabled({
+  className,
+  versionMetadata,
+}: {
+  className: string;
+  versionMetadata: PropVersionMetadata;
+}) {
   const {
     siteConfig: {title: siteTitle},
   } = useDocusaurusContext();
@@ -117,7 +145,7 @@ function DocVersionBannerEnabled({className, versionMetadata}) {
   );
 }
 
-export default function DocVersionBanner({className}) {
+export default function DocVersionBanner({className}: {className?: string}) {
   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}

website/src/theme/MDXComponents/Code.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
 import CodeBlock from '@theme/CodeBlock';
+import type {Props as CodeBlockProps} from '@theme/CodeBlock';
 import InlineCode from './InlineCode';
 
-export default function MDXCode(props) {
+export default function MDXCode(props: CodeBlockProps) {
   const shouldBeInline = React.Children.toArray(props.children).every(
     el => typeof el === 'string' && !el.includes('\n')
   );

website/src/theme/MDXComponents/InlineCode.tsx

@@ -5,7 +5,7 @@ import Link from '@docusaurus/Link';
 
 const MarkdownInlineCodePrefix = 'md ';
 
-export default function InlineCode(props) {
+export default function InlineCode(props: {children?: React.ReactNode}) {
   if (
     typeof props.children === 'string' &&
     props.children.startsWith(MarkdownInlineCodePrefix)
@@ -27,21 +27,24 @@ export default function InlineCode(props) {
 const MarkdownInlineCode = React.memo(function MarkdownInlineCodeInner(
   props: React.PropsWithChildren
 ) {
-  const children = linkify(props.children);
+  const children =
+    typeof props.children !== 'string'
+      ? props.children
+      : linkify(props.children);
   return <code {...props} children={children} />;
 });
 
 // Gives the ability to use basic Markdown links inside inline code blocks
 // We use RegExp because a full Markdown parser would be quite heavy
 // See https://github.com/facebook/react-native-website/pull/3807
-function linkify(input) {
+function linkify(input: string): React.ReactNode {
   // Inspired by https://github.com/gakimball/transform-markdown-links
   // Thank you: http://stackoverflow.com/a/32382702 (with some modifications)
   const linkRegExp = /(?<link>\[(?<text>[^\]]+)?\]\((?<url>[^)]+)\))/g;
   const linkSplitRegExp = /\[[^\]]+?\]\([^)]+\)/g;
 
   const links = [];
-  let match;
+  let match: RegExpExecArray | null;
   while ((match = linkRegExp.exec(input)) !== null) {
     const link = match.groups.link;
     const text = match.groups.text;

website/src/theme/NavbarItem/DocsVersionDropdownNavbarItem.tsx

@@ -9,7 +9,9 @@ import React from 'react';
 import DocsVersionDropdownNavbarItem from '@theme-original/NavbarItem/DocsVersionDropdownNavbarItem';
 import {useActiveDocContext} from '@docusaurus/plugin-content-docs/client';
 
-export default function DocsVersionDropdownNavbarItemWrapper(props) {
+export default function DocsVersionDropdownNavbarItemWrapper(props: {
+  docsPluginId: string;
+}) {
   // (CUSTOM) Hide version dropdown on non-versioned pages
   const activeDocContext = useActiveDocContext(props.docsPluginId);
   if (!activeDocContext.activeDoc) {

website/src/theme/PlatformSupport/index.tsx

@@ -16,7 +16,11 @@ import Windows from '@site/src/theme/Icon/Windows';
 import TV from '@site/src/theme/Icon/TV';
 import Web from '@site/src/theme/Icon/Web';
 
-export default function PlatformSupport({platforms}) {
+export default function PlatformSupport({
+  platforms,
+}: {
+  platforms: Array<string>;
+}) {
   return (
     <div className={styles.container}>
       <strong>Platform support</strong>