TypeScript from Zero to Advanced — Typing, Generics, and Patterns for Solid Code • Meteora Web Agency

Are you struggling with a JavaScript project that keeps throwing "undefined is not a function" errors at runtime? Do you spend more time debugging than building new features? We at Meteora Web have been there. When we manage platforms for our clients — custom WooCommerce e‑commerce, CRM systems in Laravel with Vue frontends, React apps — knowing that a wrong type can crash the entire system is not an option. TypeScript isn't a fad; it's a concrete answer to an economic problem. Every bug caught at compile time is development time you don't have to pay for in post‑launch support. Every typed function is living documentation that your future team will thank you for.

In this pillar page we cover TypeScript from zero to advanced: from tsconfig.json configuration to Generics, from Utility Types to integration with React and Node.js. No academic manual – just what we use every day in production. Ready?

Why is TypeScript better than plain JavaScript for real projects?

JavaScript is fantastic to start with, but when the code surpasses 10,000 lines – or when you work in a team – the lack of types becomes a cost. A parameter passed as a string instead of a number is only discovered at runtime, maybe in production. We've seen entire shopping carts break because of a forgotten typeof check. With TypeScript, the compiler (or your IDE) warns you before execution.

Measurable benefits:

15‑20% bug reduction according to academic studies (e.g., TypeScript vs JavaScript: A Study on Code Quality).
Safe refactoring: change a type and the compiler flags all violations.
Autocompletion and inline documentation: your editor becomes an extension of your brain.
Fewer unit tests needed: type‑checking already covers many edge cases.

Action: If you're starting a new project, begin with TypeScript directly. If you have an existing JS project, enable allowJs in tsconfig and start renaming files from .js to .ts one by one, beginning with the most critical modules.

How to configure TypeScript correctly with tsconfig.json?

The tsconfig.json file is the heart of configuration. We almost always use these settings as a base:

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "lib": ["ES2020"],
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "outDir": "./dist",
    "rootDir": "./src"
  },
  "include": ["src"],
  "exclude": ["node_modules", "dist"]
}

Explanation:

strict: true – enables all rigorous checks (noImplicitAny, strictNullChecks, etc.). This is TypeScript's main value.
target: ES2020 – allows async/await, Promise, Map, Set without polyfills.
module – for Node.js we use commonjs; for modern frontends or bundlers we use ES2020 or ESNext.
esModuleInterop – avoids import/export issues with CommonJS modules.
skipLibCheck – speeds up compilation by skipping checks on external .d.ts files.

Action: Create a new project with npx tsc --init, then tweak it with the settings above. Run npm install typescript --save-dev and compile with npx tsc.

What are the basic TypeScript types and how to use them?

TypeScript extends JavaScript types with a few fundamental ones:

any – disables type‑checking. Avoid almost always.
unknown – like any, but forces a check before using the value.
never – represents a value that never occurs (e.g., a function that always throws).
void – for functions that return nothing.
null and undefined – with strictNullChecks enabled they are not automatically assignable.

let name: string = "Mario";
let age: number = 30;
let isAdmin: boolean = false;

// unknown requires a type guard
let input: unknown = "hello";
if (typeof input === "string") {
  console.log(input.toUpperCase());
}

// never
function error(message: string): never {
  throw new Error(message);
}

Action: Review your code: turn every any into unknown and add type guards where needed. Enable noImplicitAny to catch untyped variables.

Interface vs Type: when to use which in TypeScript?

Both interface and type let you define data structures, but they have practical differences:

Interface – can be extended (extends), and redeclared (declaration merging). Ideal for objects and classes.
Type – can create unions, intersections, mapped types. More flexible for complex compositions.

interface User {
  name: string;
  age?: number;
}

interface Admin extends User {
  role: "admin";
}

type ID = string | number;
type Role = "user" | "admin";
type FullUser = User & { role: Role };

Rule of thumb: Use interface for objects that represent entities (User, Product) and type for aliases of primitives, unions, or tuples. In our projects we prefer interface for APIs and type for utility.

Action: Pick a part of your code and convert object definitions from type to interface, checking if you need declaration merging.

How do Generics work in TypeScript for reusable code?

Generics let you write functions, classes, and interfaces that work with types without knowing them in advance. It's like having a type placeholder that gets bound at use time.

function firstElement<T>(array: T[]): T | undefined {
  return array[0];
}

const firstNum = firstElement([1, 2, 3]); // number
const firstStr = firstElement(["a", "b"]); // string

Constraints with extends to limit allowed types:

function getLength<T extends { length: number }>(item: T): number {
  return item.length;
}

getLength("hello"); // ok, string has length
getLength([1,2]); // ok

Practical use: Generics are the backbone of libraries like React (props typing), Express (typed Request/Response), and utility types such as Pick, Omit. We use them daily to create generic hooks or typed middleware.

Action: Write a generic function that accepts an array and returns an object with the first and last element. Type the return object as well.

Which Utility Types in TypeScript do you really need?

TypeScript provides a set of utility types that transform existing types. Here are the most used:

Partial<T> – makes all properties optional.
Required<T> – makes all properties required.
Readonly<T> – makes properties read‑only.
Pick<T, K> – extracts a subset of properties.
Omit<T, K> – excludes a set of properties.
Record<K, T> – creates an object with keys of type K and values of type T.

interface Product {
  id: number;
  name: string;
  price: number;
}

// For partial updates
const update: Partial<Product> = { price: 29.99 };

// For a report without id
const report: Omit<Product, "id"> = { name: "Shoes", price: 99 };

// To map users by ID
const map: Record<number, User> = { 1: { name: "Mario" } };

Action: Review your interfaces and use Partial for update functions, Pick for partial views, Readonly for immutable objects.

How to use TypeScript with React for type‑safe components?

With React, TypeScript dramatically improves the development experience. Here are the essentials:

Typed Props

interface ButtonProps {
  label: string;
  onClick: () => void;
  disabled?: boolean;
  variant?: "primary" | "secondary";
}

const Button: React.FC<ButtonProps> = ({ label, onClick, disabled, variant }) => {
  return <button onClick={onClick} disabled={disabled} className={variant}>{label}</button>;
};

Generic Hooks

function useForm<T>(initial: T) {
  const [values, setValues] = useState<T>(initial);
  const handleChange = (key: keyof T, value: T[keyof T]) => {
    setValues(prev => ({ ...prev, [key]: value }));
  };
  return { values, handleChange };
}

TypeScript also lets you precisely type events and refs:

const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
  setValue(e.target.value);
};

Caution: use React.FC carefully because it automatically adds children. Prefer explicit interfaces for children when needed.

Action: If you work with React, add TypeScript to your project with npm install @types/react @types/react-dom and start typing components one by one.

How to integrate TypeScript with Node.js and Express?

For typed backends, TypeScript is a powerful ally. With Express, however, the typing of request and response is not automatic.

import express, { Request, Response, NextFunction } from 'express';

interface User {
  id: number;
  name: string;
}

const app = express();

app.get('/api/users/:id', (req: Request, res: Response) => {
  const userId = parseInt(req.params.id);
  // ... logic
  const user: User = { id: userId, name: 'Mario' };
  res.json(user);
});

// Typed middleware
app.use((err: Error, req: Request, res: Response, next: NextFunction) => {
  console.error(err.stack);
  res.status(500).send('Error!');
});

To better handle requests with a body, you can create custom interfaces and even extend Express's Request object using declaration merging.

Action: In an existing Node.js project, install @types/express and convert your first endpoint to TypeScript. Add strict to see where types are missing.

Are Decorators in TypeScript really useful?

Decorators are an experimental feature (currently stage 2) that lets you attach metadata to classes, methods, and properties. Frameworks like NestJS use them for dependency injection, routing, and validation.

function log(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  const original = descriptor.value;
  descriptor.value = function (...args: any[]) {
    console.log(`Called ${propertyKey} with`, args);
    return original.apply(this, args);
  };
}

class MyClass {
  @log
  greet(name: string) {
    return `Hello ${name}`;
  }
}

To enable them, set experimentalDecorators: true in tsconfig.json. We rarely use them outside of NestJS and validation libraries like class-validator. If you're not working with those frameworks, you probably don't need them. Better to focus on more modern patterns like functional composition.

Action: If you use NestJS or TypeORM, study how decorators simplify model declarations. Otherwise, skip this feature.

How to migrate a project from JavaScript to TypeScript without pain?

Migration can be gradual. Proven strategy:

Install TypeScript and create a tsconfig.json with allowJs: true and strict: false initially.
Rename files from .js to .ts starting with those with fewest dependencies.
Enable strict: true only after typing most of the modules.
Use // @ts-expect-error temporarily to block known errors you'll fix later.
For files you don't want to type yet, keep the .js extension and import them normally.

We migrated a Laravel+Vue project with 20,000 lines in about 2 weeks by working module by module, starting with the backend API.

Action: Pick an isolated module (e.g., a utility function) and convert it to TypeScript with basic types. Measure how many bugs the type‑checking catches.

Summary: what to do now

Start now: if you don't use TypeScript, install it in your current project with allowJs and begin with one file.
Enable strict: true: it's the setting that gives the most value. Tackle warnings one by one.
Use Generics for reusable functions and components – they reduce duplicated code.
Utility Types to avoid reinventing the wheel: Partial, Pick, Omit save time.
Don't fear errors: every compilation error is a bug that won't reach production.

TypeScript is not decoration: it's a tool that increases code quality and reduces maintenance costs. We at Meteora Web use it every day – from Laravel/Vue stacks to custom React platforms – and the results speak for themselves: fewer bugs, more productive teams, happier clients. If you want to dive deeper into a specific topic, contact us or check the official documentation and cheatsheets. Happy coding.