In this post, we’ll take a closer look at what TypeScript really is and what makes it unique as a programming language.
Ever been coding in JavaScript and suddenly thought, “Wait, why did this variable turn into a string?” You’re expecting a number, but somehow it’s now a string and your calculations are completely off. If you’ve experienced this frustration, you’ll immediately understand why TypeScript is such a welcome addition to the JavaScript ecosystem.
I’ll admit, I was skeptical at first. “Do we really need types in JavaScript?” But once I started using it, my perspective completely changed—especially as projects grew larger.
1. What Exactly is TypeScript?
JavaScript with a Type Safety Layer
TypeScript is a programming language released by Microsoft in 2012. Here’s the core concept: TypeScript = JavaScript + Type System
Visit the TypeScript official website and you’ll see this simple tagline: “JavaScript with syntax for types.” That one sentence captures the essence of TypeScript.
What Does “Superset” Mean?
TypeScript is often called a “superset of JavaScript.” What does that mean? Simply put: TypeScript can do everything JavaScript can do, plus it adds a type system on top.
Here’s the breakdown:
- ✅ JavaScript code → Works as-is in TypeScript
- ✅ TypeScript code → Compiles to JavaScript
- ✅ JavaScript features + Type system = TypeScript
For example, this JavaScript code:
function greet(name) {
return "Hello, " + name;
}
Can be copied directly into a TypeScript file and it works perfectly. Just change the extension from .js to .ts. That’s what superset means.
How TypeScript Works: Compilation is Key
Here’s an important point: Browsers don’t understand TypeScript directly. They only understand JavaScript.
So TypeScript goes through this process:
TypeScript code (.ts)
↓ [Compilation]
JavaScript code (.js)
↓ [Execution]
Browser/Node.js runs it
The magic happens during compilation:
- Type checking catches errors
- Type information is stripped away
- Pure JavaScript code is generated
Here’s a real example:
TypeScript code (hello.ts):
function add(a: number, b: number): number {
return a + b;
}
After compilation (hello.js):
function add(a, b) {
return a + b;
}
Notice how all the type information (: number) disappears, leaving only clean JavaScript that runs anywhere.
TypeScript in 2025
TypeScript continues to evolve. As of October 2025:
- Current version: TypeScript 5.9.3
- Coming soon: TypeScript 6.0 (preparation for 7.0)
- Exciting news: TypeScript 7.0 will be rewritten in Go, promising 10x faster performance
Check out Microsoft’s official announcement to see how committed the team is to this language.
2. Why Do So Many Developers Choose TypeScript?
Type Checking Catches Errors Before Runtime
JavaScript’s biggest problem is that you only discover errors when you run the code. TypeScript solves this.
JavaScript’s problem:
function calculateTotal(price, quantity) {
return price * quantity;
}
// All of these run without warnings
calculateTotal(1000, 2); // 2000 - correct
calculateTotal("1000", 2); // "10001000..." - wait, what?
calculateTotal(1000); // NaN - undefined gets multiplied
calculateTotal(1000, "two"); // NaN - string times number
You won’t know there’s a problem until you run it—maybe when users are already using your app.
TypeScript’s solution:
function calculateTotal(price: number, quantity: number): number {
return price * quantity;
}
calculateTotal(1000, 2); // ✅ Works
calculateTotal("1000", 2); // ❌ Error! Red squiggle while typing
calculateTotal(1000); // ❌ Error! Missing argument
calculateTotal(1000, "two"); // ❌ Error! String not allowed
Your IDE alerts you instantly as you type—no running required!
Powerful IDE Support: Auto-completion Gets a Massive Upgrade
TypeScript makes editors like Visual Studio Code significantly smarter.
interface Product {
id: number;
name: string;
price: number;
category: string;
inStock: boolean;
}
const laptop: Product = {
id: 1,
name: "MacBook Pro",
price: 2500,
category: "Electronics",
inStock: true
};
// The moment you type the dot, you get perfect suggestions!
laptop. // Auto-complete shows: id, name, price, category, inStock
Because it knows the types, it provides precise suggestions. This isn’t just about typing less—it genuinely speeds up development.
Stability at Scale
As projects grow, multiple files become interconnected. Changing file A might break file B. TypeScript catches these issues during compilation.
Companies like Google, Microsoft, Airbnb, Slack, and Shopify have adopted TypeScript. Slack’s engineering team noted that “after switching to TypeScript, both our stability and developer sanity improved significantly.”
3. Getting Started with TypeScript
Prerequisites: Install Node.js
You’ll need Node.js first. Download the LTS version from the Node.js official website.
Verify installation:
node -v
npm -v
Installing TypeScript
Global installation (recommended):
npm install -g typescript
Verify installation:
tsc -v
# Version 5.9.3 (as of October 2025)
Per-project installation (even better):
npm install typescript --save-dev
This approach lets you manage different TypeScript versions per project.
Creating Your First TypeScript Project
Step 1: Create a project folder
mkdir my-first-ts
cd my-first-ts
Step 2: Generate configuration
tsc --init
This creates a tsconfig.json file with TypeScript compiler options.
Step 3: Write TypeScript code
Create index.ts:
// Define user information structure
interface User {
id: number;
name: string;
email: string;
}
// Specify parameter and return types
function createUser(name: string, email: string): User {
return {
id: Math.floor(Math.random() * 1000),
name: name,
email: email
};
}
// Create object with type annotation
const newUser: User = createUser("Sarah Johnson", "sarah@example.com");
console.log(`User created: ${newUser.name} (${newUser.email})`);
Step 4: Compile
tsc index.ts
This generates index.js!
Step 5: Run
node index.js
Success! You should see: “User created: Sarah Johnson (sarah@example.com)”
4. Core TypeScript Syntax
Basic Types
// Primitives
let age: number = 30;
let name: string = "John Smith";
let isActive: boolean = true;
// Arrays
let numbers: number[] = [1, 2, 3, 4, 5];
let names: Array<string> = ["Alice", "Bob"];
// Objects
let person: { name: string; age: number } = {
name: "Emily Davis",
age: 32
};
Interfaces
Define reusable types with interfaces:
interface Product {
id: number;
name: string;
price: number;
inStock: boolean;
}
const laptop: Product = {
id: 1,
name: "MacBook Pro",
price: 2500,
inStock: true
};
Function Type Annotations
// Regular function
function add(a: number, b: number): number {
return a + b;
}
// Arrow function
const multiply = (a: number, b: number): number => a * b;
// Optional parameters
function greet(name: string, greeting?: string): string {
return greeting ? `${greeting}, ${name}!` : `Hello, ${name}!`;
}
Union Types and Type Aliases
// Union types: one of several types
type Status = "pending" | "approved" | "rejected";
function updateStatus(status: Status): void {
console.log(`Status: ${status}`);
}
updateStatus("approved"); // ✅
updateStatus("cancelled"); // ❌ Error!
// Type alias
type Point = {
x: number;
y: number;
};
const location: Point = { x: 10, y: 20 };
5. TypeScript in Real Projects
Using TypeScript with React
Create a React project with TypeScript:
npx create-react-app my-app --template typescript
Simple component example:
import React from 'react';
// Define Props type
interface ButtonProps {
text: string;
onClick: () => void;
disabled?: boolean;
}
// Functional component with types
const CustomButton: React.FC<ButtonProps> = ({
text,
onClick,
disabled = false
}) => {
return (
<button onClick={onClick} disabled={disabled}>
{text}
</button>
);
};
export default CustomButton;
Check out the React TypeScript documentation for more details.
TypeScript with Node.js (Express)
import express, { Request, Response } from 'express';
const app = express();
const PORT = 3000;
interface UserResponse {
id: number;
name: string;
email: string;
}
app.get('/api/users/:id', (req: Request, res: Response) => {
const userId = parseInt(req.params.id);
if (isNaN(userId)) {
return res.status(400).json({ error: 'Invalid user ID' });
}
const user: UserResponse = {
id: userId,
name: `User${userId}`,
email: `user${userId}@example.com`
};
res.json(user);
});
app.listen(PORT, () => {
console.log(`Server running on port ${PORT}`);
});
6. TypeScript Pros and Cons
Advantages
1. Type Safety Dramatically Reduces Bugs Catching errors at compile time means far fewer runtime surprises, especially in large projects.
2. Exceptional IDE Support Auto-completion, refactoring, and code navigation all work significantly better than with JavaScript. VS Code, built with TypeScript, offers particularly great integration.
3. Improved Code Readability and Maintainability Type definitions serve as inline documentation. Code remains understandable months later.
4. Modern JavaScript Features Use the latest ECMAScript features while still compiling to older JavaScript for browser compatibility.
Disadvantages
1. Learning Curve Understanding the type system takes time. There’s a real barrier for developers coming from JavaScript.
2. More Code to Write Adding type definitions increases code length. For small projects, this can feel like overkill.
3. Compilation Time JavaScript runs immediately, but TypeScript requires compilation. Larger projects mean longer compile times.
4. The any Temptation When types get tricky, it’s tempting to use any, which defeats the purpose of TypeScript.
7. When Should You Use TypeScript?
TypeScript Shines In
- Team projects: Types facilitate communication and prevent misunderstandings
- Large-scale applications: The bigger the codebase, the more valuable types become
- Long-term maintenance: For projects you’ll maintain for years, TypeScript pays dividends
- Open source libraries: Users can understand your API more easily
JavaScript is Fine For
- Small scripts: Quick, throwaway code doesn’t need types
- Simple personal projects: If you’re the only one who’ll read it, types might be overkill
- Stable legacy code: If it works well in JavaScript, no need to migrate
8. Common Questions
Q: How much JavaScript do I need to know before learning TypeScript? Basic syntax knowledge (variables, functions, objects, arrays) is enough to start. Many developers actually deepen their JavaScript understanding through TypeScript.
Q: Is it hard to convert existing JavaScript projects? You can migrate gradually. JavaScript and TypeScript files can coexist, so you can convert piece by piece.
Q: Does TypeScript make code slower? No. TypeScript compiles to JavaScript, and that JavaScript runs with identical performance. Only the development compilation step adds time.
Q: Is TypeScript still popular in 2025? Absolutely. TypeScript consistently ranks among the most loved languages. All major frameworks—Angular, React, Vue—provide first-class TypeScript support.
TypeScript isn’t just JavaScript with types bolted on. It’s a powerful tool for writing safer, more maintainable code.
Initially, explicitly typing everything might feel tedious. But as your project grows, as your team expands, and as you revisit code months later, you’ll appreciate what TypeScript brings to the table.
Not every project needs TypeScript, but for long-term work or team development, the initial learning investment pays off.
To learn more:
Start with a small project and experience TypeScript’s benefits firsthand. You’ll have that “aha, now I get why everyone uses this” moment soon enough. 🙂