Getting Started with TypeScript

TypeScript has become an essential skill for modern JavaScript development. Whether you are building a small frontend project or a large-scale enterprise application, TypeScript helps you write more reliable, maintainable code.

In this tutorial, you will learn what TypeScript is, why it has become so popular, and how to set up your first TypeScript project. By the end, you will have a working TypeScript environment and understand the core concepts that will guide you through the rest of this series.

What is TypeScript?

TypeScript is a strongly typed programming language that builds on JavaScript. It was developed by Microsoft and released in 2012, designed to address some of JavaScript’s shortcomings, particularly around type safety and large-scale application development.

JavaScript is dynamically typed, meaning variable types are determined at runtime. This flexibility is powerful but can lead to unexpected bugs that only surface in production. TypeScript adds a type system on top of JavaScript, catching errors during development rather than at runtime.

// JavaScript - types are determined at runtime
function greet(name) {
  return "Hello, " + name.toUpperCase();
}

// TypeScript - types are checked during development
function greet(name: string): string {
  return "Hello, " + name.toUpperCase();
}

In the TypeScript version, the : string annotations tell the compiler that name should be a string and the function returns a string. If you try to pass a number or object, TypeScript will show an error in your editor before you even run the code.

Why Use TypeScript?

TypeScript offers several compelling benefits:

• Error Prevention: Catch bugs early in development with compile-time type checking
• Better IDE Support: Enjoy improved autocomplete, refactoring, and navigation
• Self-Documenting Code: Types serve as inline documentation
• Safer Refactoring: Change code with confidence knowing TypeScript will catch breaking changes
• Modern JavaScript: Access the latest JavaScript features with cross-browser compatibility

Installing TypeScript

Before you can start writing TypeScript, you need to install it. The easiest way is through npm (Node Package Manager), which comes with Node.js.

Installing Node.js

If you do not have Node.js installed, download it from the official website or use a version manager like nvm:

# Check if Node.js is installed
node --version

# Check if npm is installed
npm --version

If both commands return version numbers, you are ready to proceed.

Installing TypeScript Globally

Install the TypeScript compiler (tsc) globally so you can use it from any directory:

npm install -g typescript

# Verify installation
tsc --version

Installing TypeScript Locally

For projects, it is often better to install TypeScript as a development dependency:

mkdir my-typescript-project
cd my-typescript-project
npm init -y
npm install --save-dev typescript

This approach ensures that different projects can use different TypeScript versions.

Your First TypeScript File

Now that TypeScript is installed, let us create your first TypeScript program.

Creating the Project

Create a new file called index.ts in your project directory:

// index.ts
function add(a: number, b: number): number {
  return a + b;
}

const result = add(5, 10);
console.log("The sum is:", result);

This simple program defines a function that adds two numbers and logs the result.

Compiling TypeScript

Compile your TypeScript file to JavaScript using the TypeScript compiler:

tsc index.ts

This creates an index.js file with the compiled JavaScript:

// index.js (compiled from TypeScript)
function add(a, b) {
  return a + b;
}
var result = add(5, 10);
console.log("The sum is:", result);

Running the Code

Execute the compiled JavaScript:

node index.js
# Output: The sum is: 15

Basic Types in TypeScript

TypeScript provides several basic types that form the foundation of the type system.

Primitive Types

TypeScript supports three primitive types:

// String
let message: string = "Hello, TypeScript";

// Number (all numbers, including floats)
let count: number = 42;
let price: number = 19.99;

// Boolean
let isActive: boolean = true;
let isComplete: boolean = false;

Type Inference

TypeScript can automatically infer types when you provide an initial value:

// TypeScript infers the type from the initial value
let name = "Alice";     // inferred as string
let age = 25;           // inferred as number
let isStudent = false; // inferred as boolean

While you can omit type annotations, explicitly writing them improves code readability and provides better documentation.

Arrays

Define arrays using type[] or Array syntax:

let numbers: number[] = [1, 2, 3, 4, 5];
let names: Array<string> = ["Alice", "Bob"];
let mixed: (string | number)[] = [1, "two", 3];

Objects

Define object types with explicit property types:

let person: {
  name: string;
  age: number;
  email: string;
} = {
  name: "Alice",
  age: 25,
  email: "alice@example.com"
};

Any and Unknown

When you are unsure about a type, TypeScript provides two escape hatches:

// any - disables type checking (avoid when possible)
let anything: any = "hello";
anything = 42;
anything = true;

// unknown - type-safe any
let something: unknown = "hello";
// You must narrow the type before using it
if (typeof something === "string") {
  console.log(something.toUpperCase());
}

Use any sparingly, as it defeats the purpose of TypeScript’s type system. Prefer unknown when you need to accept any value but will handle it carefully.

The TypeScript Configuration File

The tsconfig.json file controls how TypeScript compiles your code.

Creating a Config File

Generate a default configuration:

tsc --init

This creates a tsconfig.json with sensible defaults:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true
  }
}

Key Compiler Options

Understanding these options will help you configure TypeScript for your needs:

Option	Description
target	JavaScript version to compile to (ES5, ES6, ES2020, etc.)
strict	Enable all strict type checking options
module	Module system to use (CommonJS, ESNext, etc.)
outDir	Output directory for compiled files
rootDir	Root directory of input files
noImplicitAny	Error on expressions with implied any type

Watching for Changes

Instead of running tsc manually each time, use watch mode:

tsc --watch

This automatically recompiles your files when they change.

Working with an IDE

TypeScript truly shines when paired with a good IDE. Visual Studio Code, developed by Microsoft, provides excellent TypeScript support out of the box.

Visual Studio Code

VS Code includes TypeScript support and provides:

• Real-time type checking and error highlighting
• Intelligent autocomplete
• Go-to-definition and find references
• In-line documentation on hover
• Refactoring tools

If you are using another editor, most modern editors have TypeScript extensions available.

Common TypeScript Errors

As you start writing TypeScript, you will encounter some common errors. Understanding them helps you fix them quickly.

Type Mismatch

// Error: Type '"5"' is not assignable to type 'number'
let num: number = "5";

Fix: Use the correct type or convert the value.

Property Does Not Exist

let user = { name: "Alice" };
// Error: Property 'age' does not exist on type '{ name: string; }'
console.log(user.age);

Fix: Add the property to the object definition or use optional properties.

Implicit Any

function greet(name) {  // Parameter 'name' implicitly has an 'any' type
  return "Hello, " + name;
}

Fix: Add a type annotation or enable noImplicitAny in your config.

Where to Go From Here

You now have a solid foundation in TypeScript. Here is what to explore next:

• Types and Interfaces: Define custom types for your data structures
• Functions: Learn about function types, overloads, and generic functions
• Classes: Understand object-oriented programming in TypeScript
• Modules: Organize code across multiple files

The next tutorial in this series covers types and interfaces in detail, building on what you have learned here.

Conclusion

TypeScript transforms JavaScript development by adding powerful type checking that catches errors before they reach production. In this tutorial, you learned what TypeScript is, why it matters, and how to set up your development environment. You also explored basic types and the TypeScript configuration file.

The investment in learning TypeScript pays dividends in code quality, developer productivity, and maintainability. As you continue through this series, you will discover more advanced features that make TypeScript an indispensable tool for modern web development.