Introduction to TypeScript

TypeScript is a statically typed superset of JavaScript that adds optional static types to the language. It provides a way to ensure that your code is correct and robust by catching errors early during the development process. This guide will help you get started with TypeScript, understand its key features, and learn best practices for using it effectively.

What is TypeScript?

TypeScript is a programming language developed and maintained by Microsoft. It is designed for the development of large applications and transpiles to JavaScript. TypeScript adds static type definitions, which can help catch errors at compile time rather than at runtime.

Why Use TypeScript?

• Static Typing: Helps catch errors early in the development process.
• Enhanced IDE Support: Provides better autocompletion, navigation, and refactoring.
• Improved Code Quality: Encourages better documentation and design.

Setting Up TypeScript

Installing TypeScript

To install TypeScript, you need to have Node.js installed on your machine. Once you have Node.js, you can install TypeScript globally using npm:

npm install -g typescript

Configuration

Create a tsconfig.json file to configure the TypeScript compiler. This file can be generated using the following command:

tsc --init

A basic tsconfig.json file might look like this:

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "strict": true,
    "outDir": "./dist",
    "rootDir": "./src",
    "esModuleInterop": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

TypeScript Basics

Types

TypeScript adds a variety of type annotations to JavaScript. Here are some basic types:

let isDone: boolean = false;
let age: number = 25;
let name: string = "John";
let list: number[] = [1, 2, 3];
let tuple: [string, number] = ["hello", 10];
let unknownValue: unknown = "Hello";

Interfaces

Interfaces define the shape of an object. They are a powerful way to define contracts within your code.

interface Person {
  firstName: string;
  lastName: string;
  age: number;
  greet: () => string;
}

const user: Person = {
  firstName: "John",
  lastName: "Doe",
  age: 25,
  greet: function() {
    return `Hello, my name is ${this.firstName} ${this.lastName}`;
  }
};

console.log(user.greet());

Classes

Classes in TypeScript are similar to those in other object-oriented languages like Java or C#. They provide a way to define blueprints for objects.

class Animal {
  private name: string;

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

  public move(distanceInMeters: number): void {
    console.log(`${this.name} moved ${distanceInMeters} meters.`);
  }
}

let dog = new Animal("Dog");
dog.move(10);

Functions

Functions in TypeScript can have typed parameters and return types.

function add(a: number, b: number): number {
  return a + b;
}

const sum: number = add(5, 10);
console.log(sum); // 15

Advanced TypeScript Features

Generics

Generics provide a way to create reusable components. They allow a type to be a parameterized.

function identity<T>(arg: T): T {
  return arg;
}

let output1 = identity<string>("myString");
let output2 = identity<number>(100);

Enums

Enums allow us to define a set of named constants.

enum Direction {
  Up,
  Down,
  Left,
  Right
}

let dir: Direction = Direction.Up;
console.log(dir); // 0

Decorators

Decorators are a special kind of declaration that can be attached to a class, method, accessor, property, or parameter.

function sealed(target: Function): void {
  Object.seal(target);
  Object.seal(target.prototype);
}

@sealed
class Greeter {
  greeting: string;
  constructor(message: string) {
    this.greeting = message;
  }
  greet() {
    return "Hello, " + this.greeting;
  }
}

TypeScript with JavaScript Libraries

TypeScript can be used with JavaScript libraries by installing type definitions. For example, to use TypeScript with jQuery:

npm install @types/jquery

Then you can use jQuery in your TypeScript files:

import * as $ from "jquery";

$(document).ready(() => {
  console.log("jQuery is ready!");
});

FAQs