What is TypeScript, and how is it related to JavaScript?

If you build for the web, you have probably seen TypeScript questions pop up in team chats and forums. Some developers love the functionality it offers, others worry it will slow them down.

What is TypeScript, and how is it related to JavaScript? Is it just a different language or a set of build-time checks? How do I adopt it incrementally in an existing JS codebase, and what are the benefits and tradeoffs for front-end apps and Node services?

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. You write modern JS plus optional static types, then the TypeScript compiler erases those types and emits standards-compliant JS that runs anywhere JS runs.

• Every valid JavaScript program is valid TypeScript. You can start with .js files and add types gradually.
• Types are checked at build time, not at runtime. Your output is normal JS.
• TS tracks things JS tools cannot, like nullability, union types, and generic constraints, which helps catch bugs earlier.

• Fewer runtime bugs due to static checks and better IDE autocomplete.
• Safer refactors at scale with real type guarantees.
• Self-documenting code through interfaces and type aliases.

// JavaScript
function add(a, b) { return a + b; }
console.log(add(1, "2")); // "12" string concatenation

// TypeScript
function addTS(a: number, b: number): number {
  return a + b;
}
// addTS(1, "2"); // Compile error: string is not assignable to numberCode language: JavaScript (javascript)

interface User {
  id: string;
  name: string;
  photoUrl?: string; // optional
}

const u: User = { id: "1", name: "Ada" };

type Result<T> = { ok: true; value: T } | { ok: false; error: string };

async function fetchJson<T>(url: string): Promise<Result<T>> {
  const res = await fetch(url);
  if (!res.ok) return { ok: false, error: res.statusText };
  return { ok: true, value: await res.json() as T };
}Code language: JavaScript (javascript)

1. Install TypeScript: npm i -D typescript
2. Init config: npx tsc --init
3. Enable incremental adoption in tsconfig:

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "strict": true,
    "allowJs": true,
    "checkJs": false,
    "esModuleInterop": true,
    "skipLibCheck": true
  },
  "include": ["src"]
}Code language: JSON / JSON with Comments (json)

4. Rename files you care about to .ts or .tsx one folder at a time.
5. Use npm i -D @types/node and other @types packages for libraries that do not ship types.

• Keep allowJs on while migrating. You can still type-check JS via JSDoc if desired.
• Let your bundler or framework handle compilation. Most setups like Vite, Next.js, and ts-node integrate well.
• Run tsc --noEmit in CI to enforce type safety without building artifacts twice.

• Front-end: TS shines with React and Vue via typed props, hooks, and store models. It also helps when dealing with asset URLs, responsive images, and format negotiation.
• Node: Strong types for configs, environment variables, and API contracts reduce runtime surprises.

Apps often pipe dynamic media into components. You can model this with types and keep delivery concerns clean, for example by standardizing an image URL contract or adopting modern formats for better performance. 

After you have the generic approach in place, you can leverage Cloudinary for typed, URL-based transformations and delivery without reinventing media pipelines. Our Node.js SDK already works nicely with TS out of the box.

import { Cloudinary } from "@cloudinary/url-gen";
import { fill } from "@cloudinary/url-gen/actions/resize";

const cld = new Cloudinary({ cloud: { cloudName: "demo" } });

const img = cld
  .image("samples/landscapes/beach")
  .format("auto")  // serve optimal format
  .quality("auto") // smart quality
  .resize(fill().width(800).height(600));

const url: string = img.toURL(); // typed string
// Use in your components
document.getElementById("hero")?.setAttribute("src", url);Code language: JavaScript (javascript)

On the server you can upload assets from Node with TypeScript as well:

import { v2 as cloudinary } from "cloudinary";

cloudinary.config({
  cloud_name: process.env.CLOUDINARY_CLOUD_NAME!,
  api_key: process.env.CLOUDINARY_API_KEY!,
  api_secret: process.env.CLOUDINARY_API_SECRET!
});

await cloudinary.uploader.upload("local/path.jpg", { folder: "profiles" });Code language: JavaScript (javascript)

TypeScript does not change runtime performance by itself, but typed code often makes it easier to enforce consistent media strategies like responsive image sets and format negotiation, which improves page speed and UX. If performance is a priority across your stack, check out what makes an optimized website first.

• TypeScript is JavaScript with types that compile down to plain JS.
• Adopt it incrementally with allowJs, add types where they pay off, and enforce tsc --noEmit in CI.
• Use types to model media URLs and formats, and consider tools that streamline delivery.
• Cloudinary pairs well with TypeScript by providing typed URL generation, uploads, and optimized delivery.

• PNG to WebP Converter
• Image Upscaling and Quality Enhancement
• Video as a Service
• Digital Asset Management Guide

Ready to build faster with great media delivery and type-safe code? Register for a free Cloudinary account and start optimizing today.