Adds a TypeScript overview page (#6120)

* Start of the typescript page

* Intro

* Intro

* Use State

* Use Reducer

* Start of context

* Use Ref

* Events

* Wrap up 1st draft

* Better titles

* Apply suggestions from code review

Co-authored-by: Tom Sherman <the.tomsherman@gmail.com>
Co-authored-by: Lenz Weber-Tronic <mail@lenzw.de>

* Note types/react and types/react-dom, and tone down the usecontext null check

* Feedback

* Given a 2nd run through of the doc

* Apply suggestions from code review

Co-authored-by: Ricky <rickhanlonii@gmail.com>

* Document where `State` is coming from

* Link what inferred types are

* Remove "knock-on"

We already say "cause" which makes "knock-on" a bit redundant

* Move useRef TS usage to useRef reference page

dropped useEffect since there's nothing specific about this hook.

* Add installation section

* Link to framework specific guides

* Edits

* Edit footer

* Rm useRef docs

---------

Co-authored-by: Tom Sherman <the.tomsherman@gmail.com>
Co-authored-by: Lenz Weber-Tronic <mail@lenzw.de>
Co-authored-by: Ricky <rickhanlonii@gmail.com>
Co-authored-by: Sebastian Silbermann <sebastian.silbermann@klarna.com>

Author: 5 people

src/components/MDX/Sandpack/NavigationBar.tsx

@@ -21,6 +21,7 @@ import {ResetButton} from './ResetButton';
 import {DownloadButton} from './DownloadButton';
 import {IconChevron} from '../../Icon/IconChevron';
 import {Listbox} from '@headlessui/react';
+import {OpenInTypeScriptPlaygroundButton} from './OpenInTypeScriptPlayground';
 
 export function useEvent(fn: any): any {
   const ref = useRef(null);
@@ -184,6 +185,11 @@ export function NavigationBar({providedFiles}: {providedFiles: Array<string>}) {
         <DownloadButton providedFiles={providedFiles} />
         <ResetButton onReset={handleReset} />
         <OpenInCodeSandboxButton />
+        {activeFile.endsWith('.tsx') && (
+          <OpenInTypeScriptPlaygroundButton
+            content={sandpack.files[activeFile]?.code || ''}
+          />
+        )}
       </div>
     </div>
   );

src/components/MDX/Sandpack/OpenInTypeScriptPlayground.tsx

@@ -0,0 +1,26 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import {IconNewPage} from '../../Icon/IconNewPage';
+
+export const OpenInTypeScriptPlaygroundButton = (props: {content: string}) => {
+  const contentWithReactImport = `import * as React from 'react';\n\n${props.content}`;
+  return (
+    <a
+      className="text-sm text-primary dark:text-primary-dark inline-flex items-center hover:text-link duration-100 ease-in transition mx-1 ml-2 md:ml-1"
+      href={`https://www.typescriptlang.org/play#src=${encodeURIComponent(
+        contentWithReactImport
+      )}`}
+      title="Open in TypeScript Playground"
+      target="_blank"
+      rel="noreferrer">
+      <IconNewPage
+        className="inline ml-1 mr-1 relative top-[1px]"
+        width="1em"
+        height="1em"
+      />
+      <span className="hidden md:block">TypeScript Playground</span>
+    </a>
+  );
+};