Beginner’s Guide to TypeScript

Beginner’s guide to typescript

TypeScript is a statically typed superset of JavaScript that compiles to plain JavaScript. It adds optional static types to JavaScript to enable IDEs to provide a richer environment for spotting common errors as you type the code.

Installing TypeScript

To start using TypeScript, you need to install it via npm (Node Package Manager):

npm install -g typescript

Basic Types
TypeScript introduces several basic types such as ‘number’, ‘string’, ‘boolean’, ‘array’, ‘tuple’, ‘enum’, ‘any’, ‘void’, ‘null’, and ‘undefined’. These help you define the type of variables and function parameters.

// Examples of basic types
let age: number = 25;
let name: string = 'Fatima';
let isAdmin: boolean = true;
let numbers: number[] = [1, 2, 3];
let tuple: [string, number] = ['Fatima', 26];

Functions
Functions in TypeScript can specify types for parameters and return values, enhancing readability and maintainability of code.

// Function with type annotations
function add(x: number, y: number): number {
 return x + y;
}
console.log(add(2, 3)); // Output: 5

Interfaces
Interfaces are used to enforce a contract on a class. When a class implements an interface, it must include all the properties and methods specified by that interface.

// Example of an interface
interface Person {
 name: string;
 age: number;
}
function greet(person: Person) {
 return `Hello, ${person.name}!`;
}
let alice = { name: 'Fatima', age: 25 };
console.log(greet(alice)); // Output: Hello, Fatima!

Classes
Classes in TypeScript allow you to use object-oriented programming techniques such as inheritance, encapsulation, and abstraction.

// Example of a Shape class
class Shape {
    constructor(public name: string) {}

    displayDescription() {
        console.log(`This is a ${this.name}.`);
    }
}

// Example of a Circle class extending Shape
class Circle extends Shape {
    constructor(public name: string, public radius: number) {
        super(name);
    }
// Create instances of Circle
let circle = new Circle('Circle', 5);
circle.displayDescription(); // Output: This is a Circle.

Arrays
Arrays in TypeScript allow you to store collections of elements and operate on them efficiently. TypeScript enhances arrays with type annotations, ensuring type safety during development.

// Example of arrays
let numbers: number[] = [1, 2, 3];
let names: Array<string> = ['Alice', 'Bob', 'Charlie'];
numbers.push(4);
console.log(numbers); // Output: [1, 2, 3, 4]
for (let num of numbers) {
 console.log(num); // Output: 1, 2, 3, 4 (each on a new line)
}

Loops
Loops are essential for iterating over arrays, objects, and performing repetitive tasks in TypeScript. TypeScript supports various types of loops (‘for’, ‘while’, ‘do…while’, ‘for…of’, ‘for…in’) to cater to different use cases.

// Example of loops
let fruits: string[] = ['Apple', 'Banana', 'Cherry'];
for (let i = 0; i < fruits.length; i++) {
 console.log(fruits[i]); // Output: Apple, Banana, Cherry (each on a new line)
}
fruits.forEach(fruit => {
 console.log(fruit); // Output: Apple, Banana, Cherry (each on a new line)
});
for (let fruit of fruits) {
 console.log(fruit); // Output: Apple, Banana, Cherry (each on a new line)
}

Modules
TypeScript uses ES6-style module syntax, promoting better organization and modularity of code.

// Example of modules
// file: math.ts
export function add(x: number, y: number): number {
 return x + y;
}
// file: main.ts
import { add } from './math';
console.log(add(2, 3)); // Output: 5

Where is TypeScript used?

1. Web Development

TypeScript is extensively used in web development to build large-scale, maintainable web applications. Popular frameworks and libraries like Angular, React, and Vue.js offer strong TypeScript support.

• Angular: Angular is built with TypeScript, and it provides a robust framework for building client-side applications with a clean structure.
• React: Many developers use TypeScript with React to take advantage of type checking and auto-completion, which enhances development speed and code reliability.
• Vue.js: Vue.js also supports TypeScript, allowing developers to build dynamic user interfaces with type safety.

2. Server-Side Development

TypeScript is used for server-side development with Node.js. Using TypeScript in server-side development improves the reliability and maintainability of server-side code.

• Express.js: Developers use TypeScript with Express.js to build RESTful APIs with improved type safety and better tooling support.
• NestJS: NestJS is a framework for building efficient, reliable, and scalable server-side applications. It uses TypeScript out of the box.

3. Mobile App Development

TypeScript is used in mobile app development with frameworks like React Native and NativeScript.

• React Native: TypeScript is used with React Native to build cross-platform mobile applications with improved code quality and developer productivity.
• NativeScript: NativeScript allows developers to use TypeScript to build native iOS and Android apps from a single codebase.

4. Desktop App Development

TypeScript is used in desktop app development with frameworks like Electron, which allows developers to build cross-platform desktop applications using web technologies.

• Electron: TypeScript is commonly used with Electron to build desktop applications that run on Windows, macOS, and Linux.

5. Library and Framework Development

Many popular libraries and frameworks are written in TypeScript to ensure type safety and improve maintainability.

• TypeScript Libraries: Libraries like RxJS, D3, and others have TypeScript definitions or are written in TypeScript to provide a better development experience.

6. Tooling

TypeScript is used to build developer tools, including linters, transpilers, and editors.

• VS Code: Visual Studio Code, a popular code editor, is built using TypeScript, which contributes to its performance and extensibility.

7. Game Development

TypeScript is also used in game development, particularly for web-based games, where it provides a strong type system and improved tooling.

• Phaser: Phaser is a popular HTML5 game framework that can be used with TypeScript to develop games with better type safety and tooling support.

8. Enterprise Applications

Many large enterprises use TypeScript to develop complex applications due to its scalability and maintainability benefits.

• Microsoft: As the creator of TypeScript, Microsoft uses it extensively across many of its projects, including Office 365 and Azure.
• Airbnb: Airbnb uses TypeScript to improve the reliability and maintainability of their web applications.
• Slack: Slack uses TypeScript for its desktop application to enhance code quality and developer productivity.

9. Test Automation

• Playwright: Provides native TypeScript support, enabling robust and efficient cross-browser test automation.
• Cypress: Modern end-to-end testing framework for web applications, supports TypeScript through TypeScript typings for improved type safety and IDE support.
• WebDriverIO: Popular framework for web application testing, supports TypeScript natively with strong typing for interactions with Selenium WebDriver.
• Protractor: Specifically designed for Angular and AngularJS applications, built on WebDriverJS, supports TypeScript for writing tests with Angular-specific capabilities.
• TestCafe: Open-source end-to-end testing framework for web applications, supports TypeScript out of the box, enhancing code quality and developer productivity.
• Jest: JavaScript testing framework primarily for unit testing, supports TypeScript for writing unit tests with type-checked assertions and enhanced test organization.

Conclusion:
TypeScript’s static typing, coupled with familiar JavaScript syntax, makes it a powerful tool for modern web development and automation testing.