Skip to main content

TypeScript Tutorial

TypeScript is a strongly-typed superset of JavaScript that compiles to plain JavaScript. It offers optional static typing, interfaces, and other features to improve the developer experience and make large-scale applications more manageable.

Installing TypeScript​

To get started with TypeScript, you need to install it globally using npm.

Step 1: Install Node.js and npm​

If you don’t have Node.js and npm installed, visit the official Node.js website to download and install them.

Step 2: Install TypeScript​

Run the following command to install TypeScript globally on your system:

npm install -g typescript

Setting Up a TypeScript Project​

Step 1: Initialize the Project​

Create a new directory for your project and initialize it with npm:

mkdir my-typescript-project
cd my-typescript-project
npm init -y

Step 2: Create a tsconfig.json File​

You can generate a tsconfig.json file to configure the TypeScript compiler:

tsc --init

This will generate a tsconfig.json file where you can adjust compiler options.

TypeScript Types​

TypeScript supports many types including:

  • string
  • number
  • boolean
  • array
  • object
  • any

Example: Using Types​

let name: string = "Alice";
let age: number = 30;
let isActive: boolean = true;

Array Types​

let fruits: string[] = ["apple", "banana", "cherry"];
let numbers: Array<number> = [1, 2, 3];

any Type​

let value: any = "Hello";
value = 10;  // This is allowed with the `any` type

TypeScript Functions​

In TypeScript, you can define functions with type annotations for both parameters and the return value.

function greet(name: string): string {
  return "Hello, " + name;
}

Function with Optional Parameter​

function greet(name: string, age?: number): string {
  return age ? `Hello, ${name}, Age: ${age}` : `Hello, ${name}`;
}

Working with Classes​

TypeScript adds features like access modifiers and type annotations to JavaScript classes.

Example: Defining a Class​

class Person {
  name: string;
  age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  greet(): string {
    return `Hello, my name is ${this.name} and I am ${this.age} years old.`;
  }
}

let person = new Person("Alice", 30);
console.log(person.greet());

Modules and Namespaces​

TypeScript allows you to use modules and namespaces to organize your code.

Importing and Exporting Modules​

// greet.ts
export function greet(name: string): string {
  return "Hello, " + name;
}

// app.ts
import { greet } from './greet';
console.log(greet("Alice"));

Compiling TypeScript​

To compile TypeScript files to JavaScript, use the tsc command:

tsc app.ts

This will generate an app.js file.

To compile all TypeScript files in your project, run:

tsc

Conclusion​

TypeScript is a powerful language that helps catch errors early through static typing. It enhances JavaScript with object-oriented features and helps manage large-scale applications. With the installation and basic concepts covered in this tutorial, you can now start building TypeScript applications.

Content Review​

The content in this repository has been reviewed by chevp. Chevp is dedicated to ensuring that the information provided is accurate, relevant, and up-to-date, helping users to learn and implement programming skills effectively.

About the Reviewer​

For more insights and contributions, visit chevp's GitHub profile: chevp's GitHub Profile.