JavaScript and TypeScript for Forward Deployed Engineers

Not every FDE task is Python. When you build a customer-facing dashboard, a browser widget, or a Node.js service, JavaScript (and its typed cousin TypeScript) is what you reach for. This tutorial covers the essentials for FDEs.

Table of Contents

• Why JS/TS for FDEs
• JavaScript Basics
• Async and Fetch (Calling APIs)
• TypeScript Fundamentals

Why JS/TS for FDEs

JavaScript runs in every browser and on servers via Node.js, so it's ideal for customer dashboards and lightweight services. TypeScript adds types on top of JavaScript, catching errors before they reach the customer.

Why useful: Many FDE deliverables are interactive UIs or small backend services where JS/TS shines.

JavaScript Basics

JS shares concepts with Python but uses let/const for variables and {} for blocks.

const tickets = ["#101", "#102"];
const customer = { name: "Acme", region: "EU" };

for (const t of tickets) {
  console.log(t);
}
console.log(customer.region); // EU

Explanation: const declares a value that won't be reassigned; for...of loops over the list. Object access uses dot notation (customer.region).

Common Mistake: Using var (old style) which ignores block scope and causes confusing bugs. Prefer const, then let.

Best Practice: Use const by default; switch to let only when you must reassign.

Async and Fetch (Calling APIs)

Browser and Node code is asynchronous — API calls don't block the program. You use async/await with fetch.

async function getTickets() {
  const res = await fetch("https://api.example.com/tickets", {
    headers: { Authorization: "Bearer YOUR_KEY" }
  });
  const data = await res.json();
  return data.tickets;
}

Explanation: async marks the function as asynchronous; await pauses until the API responds. Without await, you'd get a promise instead of the data.

Note: FDEs building dashboards call customer APIs this way to populate live views.

TypeScript Fundamentals

TypeScript is JavaScript with types. You annotate what type each value should be, so mistakes surface at write-time.

interface Ticket {
  id: string;
  subject: string;
  active: boolean;
}

function summarize(t: Ticket): string {
  return t.active ? t.subject : "(closed)";
}

Explanation: interface Ticket defines the shape of a ticket; the function summarize only accepts a Ticket and returns a string. If you pass the wrong shape, TypeScript errors before runtime.

Best Practice: Define interfaces for the data shapes you exchange with APIs — it documents the contract for the customer's team.