Introduction to TypeScript

TypeScript is a statically typed superset of JavaScript developed by Microsoft. It enhances JavaScript by adding type definitions, making it easier to catch errors during development and improving code maintainability.

• Website: typescriptlang.org

• Latest Version: Check the official site for updates.

Why Use TypeScript?

1. Static Typing: Provides type safety, reducing runtime errors.

2. Improved IDE Support: Better autocompletion, refactoring, and debugging.

3. Object-Oriented Programming Features: Supports classes, interfaces, and inheritance.

4. Cross-Browser Compatibility: Transpiles to plain JavaScript, which runs everywhere.

Installing TypeScript

Prerequisites

• Install Node.js.

Installation

Install TypeScript globally via npm:

npm install -g typescript

Verify the installation:

tsc --version

Setting Up a TypeScript Project

1. Initialize the Project

Run the following command in your project folder:

npm init -y

2. Install TypeScript

npm install typescript --save-dev

3. Create a Configuration File

Generate a tsconfig.json file:

tsc --init

4. Modify tsconfig.json

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

Basic TypeScript Concepts

1. Simple Types

let isDone: boolean = true;let age: number = 25;let name: string = "John";let list: number[] = [1, 2, 3];

2. Enums

enum Color {  Red,  Green,  Blue}let color: Color = Color.Green;

3. Functions

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

4. Interfaces

interface User {  id: number;  name: string;}let user: User = { id: 1, name: "Alice" };

5. Classes

class Person {  private name: string;  constructor(name: string) {    this.name = name;  }  greet(): string {    return `Hello, ${this.name}`;  }}let person = new Person("John");console.log(person.greet());

Advanced TypeScript Features

1. Generics

function identity<T>(arg: T): T {  return arg;}let output = identity<string>("Hello");

2. Union and Intersection Types

let value: string | number;value = "Hello";value = 42;interface A {  propA: string;}interface B {  propB: number;}type AB = A & B;let obj: AB = { propA: "Test", propB: 123 };

3. Utility Types

• Partial: Makes all properties optional.

• Readonly: Makes all properties readonly.

interface User {  id: number;  name: string;}let readonlyUser: Readonly<User> = { id: 1, name: "Alice" };// readonlyUser.id = 2; // Error

Compiling TypeScript

To compile TypeScript into JavaScript, run:

tsc

Run the compiled JavaScript file:

node dist/index.js

Debugging TypeScript

1. Use sourceMap in tsconfig.json to enable source maps.

2. Debug TypeScript files directly in modern IDEs like VS Code.

Best Practices

1. Use Strict Mode: Enables stricter type checks for safer code.

2. Organize Code: Use modules to structure your code effectively.

3. Avoid any: Use specific types to ensure type safety.

4. Leverage Utility Types: Simplify common type transformations.

5. Keep TypeScript Updated: Regularly update to benefit from new features.

Resources for Learning

1. Official Documentation

2. TypeScript Handbook

3. GitHub Repository