typescript

Author: mbostock

docs/kit.html

@@ -113,6 +113,7 @@
     The `type` attribute can have one of the following values:
 
     - `module` - JavaScript
+    - `text/x-typescript` - TypeScript
     - `text/markdown` - Markdown
     - `text/html` - HTML
     - `application/sql` - SQL
@@ -131,6 +132,15 @@
     <\/script>
     ```
   </script>
+  <script id="86" type="text/markdown">
+    A TypeScript (`text/x-typescript`) cell:
+
+    ```html
+    <script type="text/x-typescript">
+      let hello: string = "hello";
+    <\/script>
+    ```
+  </script>
   <script id="52" type="text/markdown">
     A Markdown (`text/markdown`) cell:
 

package.json

@@ -61,6 +61,7 @@
     "jsdom": "^26.1.0",
     "markdown-it": "^14.1.0",
     "markdown-it-anchor": "^9.2.0",
+    "typescript": "^5.8.3",
     "vite": "^7.0.0"
   },
   "devDependencies": {
@@ -77,7 +78,6 @@
     "postgres": "^3.4.7",
     "snowflake-sdk": "^2.1.3",
     "tsx": "^4.20.3",
-    "typescript": "^5.8.3",
     "typescript-eslint": "^8.35.0",
     "vitest": "^3.2.4"
   },

src/javascript/transpile.ts

@@ -1,3 +1,4 @@
+import {ScriptTarget, transpile as transpileTypeScript} from "typescript";
 import type {Cell} from "../lib/notebook.js";
 import {toCell} from "../lib/notebook.js";
 import {rewriteFileExpressions} from "./files.js";
@@ -55,14 +56,16 @@ export function transpile(
     input = cell.value;
   }
   const transpiled =
-    mode === "ojs"
-      ? transpileObservable(input, options)
-      : mode !== "js"
-        ? transpileJavaScript(transpileTemplate(cell), options)
-        : transpileJavaScript(input, options);
+    mode === "ts"
+      ? transpileJavaScript(transpileTypeScript(input, {target: ScriptTarget.ESNext}), options)
+      : mode === "ojs"
+        ? transpileObservable(input, options)
+        : mode !== "js"
+          ? transpileJavaScript(transpileTemplate(cell), options)
+          : transpileJavaScript(input, options);
   if (transpiled.output === undefined) transpiled.output = cell.output;
   if (cell.hidden) transpiled.autodisplay = false;
-  else if (mode !== "js" && mode !== "ojs") {
+  else if (mode !== "js" && mode !== "ts" && mode !== "ojs") {
     transpiled.autodisplay = !!input;
     transpiled.autoview = mode === "sql" && transpiled.autodisplay && !!transpiled.output;
     if (transpiled.autoview) transpiled.output = `viewof$${transpiled.output}`;

src/lib/notebook.ts

@@ -39,7 +39,7 @@ export interface CellSpec {
   /** the committed cell value; defaults to empty */
   value?: string;
   /** the mode; affects how the value is evaluated; defaults to js */
-  mode?: "js" | "ojs" | "md" | "html" | "tex" | "dot" | "sql" | "node" | "python";
+  mode?: "js" | "ts" | "ojs" | "md" | "html" | "tex" | "dot" | "sql" | "node" | "python";
   /** if true, the editor will stay open when not focused; defaults to false */
   pinned?: boolean;
   /** if true, implicit display will be suppressed; defaults to false */
@@ -120,5 +120,5 @@ function asDate(date: Date | string | number): Date {
 }
 
 export function defaultPinned(mode: Cell["mode"]): boolean {
-  return mode === "js" || mode === "sql" || isInterpreter(mode) || mode === "ojs";
+  return mode === "js" || mode === "ts" || mode === "sql" || isInterpreter(mode) || mode === "ojs";
 }

src/lib/serialize.ts

@@ -73,6 +73,8 @@ function serializeMode(mode: Cell["mode"]): string {
       return "text/x-python";
     case "ojs":
       return "application/vnd.observable.javascript";
+    case "ts":
+      return "text/x-typescript";
     default:
       return "module";
   }
@@ -96,6 +98,8 @@ function deserializeMode(mode: string | null): Cell["mode"] {
       return "python";
     case "application/vnd.observable.javascript":
       return "ojs";
+    case "text/x-typescript":
+      return "ts";
     default:
       return "js";
   }