ScriptsApr 11, 2026·3 min read

TypeScript — JavaScript with Syntax for Types

TypeScript is a superset of JavaScript that adds static types, interfaces, generics, and modern ES features, compiled down to plain JavaScript. Created by Anders Hejlsberg at Microsoft. Used by Airbnb, Slack, Asana, and a huge share of modern web projects.

TL;DR
TypeScript is a typed superset of JavaScript that compiles to plain JS, catching errors before runtime.
§01

What it is

TypeScript is a superset of JavaScript created by Anders Hejlsberg at Microsoft that adds static types, interfaces, generics, and modern ES features. It compiles down to plain JavaScript and runs anywhere JavaScript runs.

TypeScript is best for web developers, backend engineers, and teams working on medium-to-large JavaScript projects where type safety prevents bugs and improves refactoring confidence.

§02

How it saves time or tokens

TypeScript catches type errors at compile time instead of runtime. Refactoring a function signature automatically flags every caller that needs updating. IDE autocompletion powered by type information speeds up development. Teams report fewer production bugs and faster onboarding because types serve as documentation.

§03

How to use

  1. Install TypeScript:
npm i -D typescript
npx tsc --init
  1. Write typed code:
interface User {
  id: number;
  email: string;
  role: 'admin' | 'user';
}

function greet(user: User): string {
  return `Hello, ${user.email} (${user.role})`;
}
  1. Compile and run:
npx tsc           # Compile once
npx tsc --watch   # Watch mode
§04

Example

// Generic API response type
interface ApiResponse<T> {
  data: T;
  error: string | null;
  status: number;
}

async function fetchUser(id: number): Promise<ApiResponse<User>> {
  const res = await fetch(`/api/users/${id}`);
  if (!res.ok) {
    return { data: null as any, error: res.statusText, status: res.status };
  }
  const data = await res.json();
  return { data, error: null, status: 200 };
}

// Type narrowing
const result = await fetchUser(1);
if (result.error) {
  console.error(result.error);
} else {
  console.log(result.data.email); // TypeScript knows data is User here
}
§05

Related on TokRepo

§06

Common pitfalls

  • Using any type everywhere, which defeats the purpose of TypeScript
  • Not enabling strict mode in tsconfig.json, missing many type safety benefits
  • Over-engineering types with complex generics when simpler types would suffice

Frequently Asked Questions

Can I adopt TypeScript gradually in an existing JavaScript project?+

Yes. TypeScript is a superset of JavaScript, so valid JS is valid TS. Rename files from .js to .ts one at a time, fix type errors, and increase strictness gradually. The allowJs option lets JS and TS coexist.

Does TypeScript have runtime overhead?+

No. TypeScript types are erased at compile time. The output is plain JavaScript with no runtime type checking. The compiled code runs at the same speed as hand-written JavaScript.

How does TypeScript work with React?+

TypeScript provides excellent React support. Use .tsx files for JSX. Type your props with interfaces, use generic hooks like useState<Type>(), and get full autocompletion for component APIs.

What is the difference between type and interface?+

Both define object shapes. Interfaces support declaration merging and are slightly better for object types. Types support unions, intersections, and mapped types. In practice, either works for most use cases.

Should I use TypeScript for small projects?+

For very small scripts, plain JavaScript may be faster to write. For anything with more than a few files or any code that other people will read, TypeScript pays for itself through better tooling and documentation.

Citations (3)

Discussion

Sign in to join the discussion.
No comments yet. Be the first to share your thoughts.

Related Assets