Introduction to TypeScript

Introduction to TypeScript

TypeScript is a strongly typed superset of JavaScript developed and maintained by Microsoft. First released in 2012, it adds optional static type checking, interfaces, generics, and other powerful features on top of standard JavaScript. Every valid JavaScript program is also a valid TypeScript program, which means you can adopt TypeScript incrementally in existing projects without rewriting your entire codebase. TypeScript compiles (or more accurately, transpiles) down to plain JavaScript that runs in any browser, on Node.js, or in any JavaScript runtime.

Why TypeScript?

JavaScript is a dynamically typed language, which gives it flexibility but also makes it prone to subtle bugs that only surface at runtime. TypeScript addresses this by catching type-related errors at compile time, long before your code reaches production. Large-scale applications maintained by teams of developers benefit enormously from TypeScript because the type system serves as living documentation that describes the shape of data flowing through the program. Companies such as Google, Airbnb, Slack, and Stripe have adopted TypeScript for their front-end and back-end codebases.

Installing TypeScript

TypeScript requires Node.js. Once Node.js is installed, you can install the TypeScript compiler globally using npm. The compiler is invoked with the tsc command.

# Install TypeScript globally
npm install -g typescript

# Verify the installation
tsc --version
# Output: Version 5.4.5 (or later)

# Initialize a TypeScript project with a tsconfig.json
tsc --init

Your First TypeScript Program

Create a file called hello.ts. The .ts extension tells the compiler this is a TypeScript file. Write a simple function with type annotations and compile it.

// hello.ts
function greet(name: string): string {
  return `Hello, ${name}! Welcome to TypeScript.`;
}

const message: string = greet("Developer");
console.log(message);

// Compile: tsc hello.ts
// Run:     node hello.js

When you run tsc hello.ts, the compiler produces a hello.js file with the type annotations stripped away. If you pass the wrong type — for example greet(42) — the compiler reports an error before any JavaScript is generated. This compile-time safety net is the core value proposition of TypeScript.

The tsconfig.json File

Real projects use a tsconfig.json file to configure compiler options such as the target JavaScript version, module system, strict mode, and output directory. Running tsc --init generates a well-commented template you can customize.

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

Tip: Always enable "strict": true in new projects. It turns on a family of stricter checking flags that catch more bugs and encourage better coding patterns.

Key Takeaways

• TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.
• Install it globally with npm install -g typescript and compile files with tsc.
• Type annotations are added after variable names or parameters using a colon syntax, e.g. name: string.
• Use tsconfig.json to configure compiler options for your project.
• Enabling strict mode catches the most errors and is recommended for all new projects.