chore: Move to Typescript (#2783)

This PR moves the entire project to Typescript. Due to the ~1000 ignores this will lead to a messy codebase for a while, but the churn is worth it – all of those ignore comments are places that were never type-safe previously.

closes #1282

app/components/Highlight.tsx

@@ -0,0 +1,50 @@
+import * as React from "react";
+import replace from "string-replace-to-array";
+import styled from "styled-components";
+
+type Props = React.HTMLAttributes<HTMLSpanElement> & {
+  highlight: (string | null | undefined) | RegExp;
+  processResult?: (tag: string) => string;
+  text: string | undefined;
+  caseSensitive?: boolean;
+};
+
+function Highlight({
+  highlight,
+  processResult,
+  caseSensitive,
+  text = "",
+  ...rest
+}: Props) {
+  let regex;
+  let index = 0;
+
+  if (highlight instanceof RegExp) {
+    regex = highlight;
+  } else {
+    regex = new RegExp(
+      (highlight || "").replace(/[-\\^$*+?.()|[\]{}]/g, "\\$&"),
+      caseSensitive ? "g" : "gi"
+    );
+  }
+
+  return (
+    <span {...rest}>
+      {highlight
+        ? replace(text, regex, (tag: string) => (
+            <Mark key={index++}>
+              {processResult ? processResult(tag) : tag}
+            </Mark>
+          ))
+        : text}
+    </span>
+  );
+}
+
+const Mark = styled.mark`
+  background: ${(props) => props.theme.searchHighlight};
+  border-radius: 2px;
+  padding: 0 4px;
+`;
+
+export default Highlight;