What Is TypeScript? Fundamentals and Moving From JavaScript

If you have been wondering what TypeScript is, the short answer is this: it is an open-source language built by Microsoft that adds a static type system on top of JavaScript. Every valid piece of JavaScript you write is also valid TypeScript; by adding types you catch bugs in your editor, before the code ever runs. In this guide you will learn the fundamentals of the type system, how to use interface, and how to add TypeScript to an existing project gradually.

What TypeScript is and why it exists

JavaScript is dynamically typed: a variable can be text one moment and a number the next. In small scripts that flexibility is convenient, but as a project grows, errors like "undefined is not a function" blow up at runtime, right in front of your user. TypeScript catches those bugs at compile time instead.

TypeScript itself does not run in the browser. The tsc (TypeScript Compiler) transpiles your code down to plain JavaScript, and the types are erased from that output. Types belong entirely to the development phase; they add zero overhead in production.

function greet(name: string): string {
  return `Hello, ${name}`;
}

greet("Aslain"); // OK
greet(42);        // Error: type 'number' is not assignable to 'string'

The basic types

The primitive types you will use most are the same as in JavaScript: string, number, boolean. To those you add arrays, null, undefined, and the special any type.

let title: string = "Blog";
let reading: number = 5;
let published: boolean = true;
let tags: string[] = ["web", "typescript"];

// Tuple: fixed length and order
let coordinate: [number, number] = [41.0, 28.9];

An important note: most of the time you do not have to write the type by hand. TypeScript performs type inference. When you write let reading = 5, the compiler already knows it is a number. Reserve explicit annotations mainly for function parameters and return values.

Avoid the any type as much as you can; it means "turn off type checking" and throws away everything TypeScript gives you. When you genuinely do not know the type, use the safer unknown type: it forces you to perform a check before you use the value.

Shaping objects with interface and type

In real applications you mostly describe the shape of objects. There are two tools for that: interface and type. Let us define a user:

interface User {
  id: number;
  name: string;
  email: string;
  role?: "admin" | "member"; // ? = optional field
}

const u: User = {
  id: 1,
  name: "Aslain",
  email: "hello@aslain.dev",
};

Here the role? field is optional, and "admin" | "member" is a union type that says the value can only be one of those two strings. Write a different string and the compiler will warn you.

interface and type are interchangeable in most situations. A practical rule of thumb: prefer interface for object shapes and type for unions and aliases. One advantage of interface is that it can be extended through inheritance:

interface Author extends User {
  postCount: number;
}

Functions and generics

Annotating a function's parameters and return value makes the code act like its own documentation. When you want to reuse the same logic across different types, generics step in:

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

const num = firstItem([1, 2, 3]);     // type: number
const text = firstItem(["a", "b"]);   // type: string

Here T is a placeholder. Whatever type of array you call the function with, the return type matches it. Generics are the foundation of structures like Array and Promise<T>, and they combine type safety with flexibility.

Gradually adopting TypeScript in an existing project

TypeScript's greatest strength is that you do not have to convert an existing JavaScript project in one go. The migration can be done step by step:

• 1. Install and configure. Run npm install --save-dev typescript, then npx tsc --init to create a tsconfig.json.
• 2. Start loose. Begin with "strict": false and "allowJs": true so TypeScript runs alongside your existing .js files.
• 3. Convert file by file. Rename one file to .ts, fix its type errors, then move on to the next.
• 4. Tighten up. As the project stabilizes, switch to "strict": true; this enables all the strict checks, including strictNullChecks, which catches the most bugs.

A solid starting point for tsconfig.json:

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "outDir": "./dist"
  },
  "include": ["src"]
}

For third-party libraries, @types/... packages usually provide type definitions (for example npm i -D @types/node). Many modern libraries ship their type definitions inside the package, so you do not need to install anything extra.

Frequently Asked Questions

Do I need to know JavaScript before learning TypeScript?

Yes. TypeScript is a layer on top, not a separate language. If you are comfortable with JavaScript fundamentals like functions, scope, async/await, and objects, the type layer clicks very quickly. Without a solid JavaScript base, the type errors are hard to make sense of.

Does TypeScript slow my project down?

Not at runtime; the types are erased during compilation and the production code is plain JavaScript. The only added cost is the build step, which takes seconds with modern tooling and prevents a large number of bugs in return.

Is using any forbidden?

Not forbidden, but it should be a last resort. It is useful to temporarily bypass a type, but permanent any usage switches off type checking. When you do not know the type, prefer safer alternatives like unknown, or Record<string, T> for flexible objects.

Want to move to a type-safe foundation? To migrate your existing JavaScript project to TypeScript or build a type-safe application from scratch, get in touch and let's lay a solid base together.