fully setup typescript, fix tsc errors, add tsc check to gh pr workflow

.github/workflows/pr.yml

@@ -25,5 +25,7 @@ jobs:
         run: pnpm install --frozen-lockfile
       - name: Check formatting
         run: pnpm run fmt:check
+      - name: Typecheck
+        run: pnpm run typecheck
       - name: Build website
         run: pnpm run build

docusaurus.config.js → docusaurus.config.ts

@@ -1,9 +1,12 @@
-// @ts-check
-// Note: type annotations allow type checking and IDEs autocompletion
-require("dotenv").config();
+import type { Config } from "@docusaurus/types";
 
-const lightCodeTheme = require("prism-react-renderer").themes.github;
-const darkCodeTheme = require("prism-react-renderer").themes.dracula;
+import dotenv from "dotenv";
+
+dotenv.config();
+
+import * as prismReactRenderer from "prism-react-renderer";
+const lightCodeTheme = prismReactRenderer.themes.github;
+const darkCodeTheme = prismReactRenderer.themes.dracula;
 
 const docsRepo = "https://github.com/ngrok/ngrok-docs";
 
@@ -19,11 +22,10 @@ const fontHrefs = [
 	"https://cdn.ngrok.com/static/fonts/ibm-plex-mono/IBMPlexMono-TextItalic.woff",
 	"https://cdn.ngrok.com/static/fonts/ibm-plex-mono/IBMPlexMono-SemiBold.woff",
 	"https://cdn.ngrok.com/static/fonts/ibm-plex-mono/IBMPlexMono-SemiBoldItalic.woff",
-];
+] as const;
 
 const ketchTagId = isProduction ? "ngrok_ketch_tag" : "ngrok_ketch_tag_local";
 
-/** @type {import('@docusaurus/types').Config} */
 const config = {
 	title: "ngrok documentation",
 	tagline: "online in one line",
@@ -93,7 +95,7 @@ const config = {
 		[
 			"classic",
 			/** @type {import('@docusaurus/preset-classic').Options} */
-			({
+			{
 				docs: {
 					sidebarPath: require.resolve("./sidebars.js"),
 					routeBasePath: "/",
@@ -114,13 +116,13 @@ const config = {
 					ignorePatterns: ["/docs/tags/**", "/docs/**/toc/**"],
 					filename: "sitemap.xml",
 				},
-			}),
+			},
 		],
 	],
 
 	themeConfig:
 		/** @type {import('@docusaurus/preset-classic').ThemeConfig} */
-		({
+		{
 			metadata: [
 				{
 					name: "keywords",
@@ -338,7 +340,7 @@ const config = {
 					autoCollapseCategories: true,
 				},
 			},
-		}),
-};
+		},
+} satisfies Config;
 
-module.exports = config;
+export default config;

package.json

@@ -17,6 +17,7 @@
     "deploy": "docusaurus deploy",
     "clear": "docusaurus clear",
     "serve": "docusaurus serve",
+    "typecheck": "tsc",
     "write-translations": "docusaurus write-translations",
     "write-heading-ids": "docusaurus write-heading-ids"
   },
@@ -46,13 +47,18 @@
   "devDependencies": {
     "@docusaurus/module-type-aliases": "3.4.0",
     "@docusaurus/plugin-content-docs": "3.4.0",
+    "@docusaurus/theme-classic": "3.4.0",
+    "@docusaurus/tsconfig": "3.4.0",
     "@docusaurus/types": "3.4.0",
+    "@types/loadable__component": "5.13.9",
+    "@types/node": "20.14.2",
     "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0",
     "autoprefixer": "10.4.19",
     "postcss": "8.4.38",
     "prettier": "3.3.2",
-    "tailwindcss": "3.4.4"
+    "tailwindcss": "3.4.4",
+    "typescript": "5.4.5"
   },
   "browserslist": {
     "production": [

src/components/ConfigExample.tsx

@@ -4,7 +4,7 @@ import Tabs from "@theme/Tabs";
 import TabItem from "@theme/TabItem";
 import YAML from "yaml";
 
-interface Props {
+type Props = {
 	config: Record<string, any>;
 	snippetText?: string;
 }

src/components/ErrorDetails.tsx

@@ -2,7 +2,11 @@ import React from "react";
 import ErrorBoundary from "@docusaurus/ErrorBoundary";
 import loadable from "@loadable/component";
 
-export default function ErrorDetails({ error }) {
+type ErrorDetailsProps = {
+	error: `err_ngrok_${string}` | `err_ngrok_${number}` | (string & {});
+}
+
+export default function ErrorDetails({ error }: ErrorDetailsProps) {
 	const Error = loadable(
 		() => import("/docs/errors/details/_" + error + ".md"),
 	);