Add TypeScript type annotations for improved type safety (facebook#4511)

Author: clicktodev

website/docusaurus.config.ts

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

website/src/components/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/components/Home/Section/index.tsx

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

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,
@@ -22,7 +26,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
   );
@@ -38,7 +42,7 @@ const AppBox = ({app}) => {
           <h3>{app.name}</h3>
           {renderLinks(app)}
         </div>
-        {app.infoLink && (
+        {'infoTitle' in app && app.infoLink && (
           <a
             className="articleButton"
             href={app.infoLink}
@@ -53,7 +57,7 @@ const AppBox = ({app}) => {
   );
 };
 
-const renderLinks = app => {
+const renderLinks = (app: UserAppType) => {
   const links = [
     app.linkAppStore ? (
       <a key="ios" href={app.linkAppStore} target="_blank">
@@ -65,12 +69,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>