TypeScript vs JavaScript Cheat Sheet: Types, Compile Step & When to Switch

TypeScript is JavaScript plus a type system that erases at compile time. Browsers still run JS. Use TypeScript when APIs, refactors, and team size make “what is this argument?” expensive. Stay on JS for tiny scripts, throwaway pages, or until the team agrees on tsconfig discipline.

This JavaScript cheat sheet is written for people searching for a fast, accurate reference: students, junior developers, and teams shipping production software. Pin it, copy the snippets, and come back when syntax slips.

Quick reference

• Superset: Most .js is valid .ts after you add types. Runtime is still JavaScript.
• Erase: Types vanish in output. They do not validate user input at runtime — you still parse JSON.
• any vs unknown: any turns the checker off. unknown forces a narrowing before use.
• Gradual: allowJs + checkJs or rename one file to .ts at a time.
• JSDoc: You can type .js files with @param comments if you are not ready for TS files.
• Tooling: You need tsc or a bundler (Vite, webpack) that strips types.
• React: .tsx for components. Props become interfaces instead of PropTypes (optional).
• Cost: Stricter tsconfig catches more and slows the first week. Loosen strict only with a plan.

Copy-paste examples

Same function in JS then TS-flavored JSDoc

If you are not on TypeScript yet, JSDoc still helps editors. The TS version would add : string and a return type.

/** @param {string} slug */
export function pathFor(slug) {
  return '/blog/' + slug.replace(/^\/+/, '');
}
/** @returns {Promise<{ title: string }>} */
export async function loadPost(slug) {
  const res = await fetch('/api/post.php?slug=' + encodeURIComponent(slug));
  if (!res.ok) throw new Error('Not found');
  return res.json();
}

Common mistakes

• Expecting TypeScript to replace runtime validation of API JSON.
• any on every parameter “to stop the red squiggles.”
• Mixing two tsconfig personalities (strict in app, loose in the same folder) without boundaries.
• Rewriting a working JS codebase in one weekend instead of file-by-file.

FAQ

1. Is TypeScript a different runtime? No. Node and browsers execute JavaScript. TypeScript is a compiler (and a language service).

1. Should beginners learn JS first? Yes. You still debug JS in the browser. Add types once let, functions, and async are comfortable.

1. Does TS make apps faster? Not at runtime. It can make you faster at refactoring. Bundle size is the same idea as JS if you do not add huge libs.

Related JavaScript cheat sheets

• Javascript Cheat Sheet 2026
• Javascript Array Methods Cheat Sheet
• Javascript String Methods Cheat Sheet

Build with this stack

When a cheat sheet is not enough — you need a production app, a student FYP, or a custom dashboard — ArpaNeuro builds custom web development and also sells ready-made source code. Request a quote and tell us the stack.

Browse software development services or the source code marketplace if you want a working codebase instead of starting from a blank file.