TypeScript

• Good understanding of JavaScript/TypeScript (ES6+, async/await, modules)
• TypeScript Problem Solving Questions
• unknown vs any
• Types of decorators in typescript
• Why decorators in typescript ?
• syntax for inheritance in typescript
• Angular typescript example

Good understanding of JavaScript/TypeScript (ES6+, async/await, modules)

• ES6+ (ECMAScript 2015 and later): This is the modern standard for JavaScript, introducing significant enhancements that improve code readability and structure. Key features include:
  • let and const: Block-scoped variable declarations that prevent common bugs associated with the older var keyword.
  • Arrow Functions: A more concise syntax for writing functions, which also provides a more intuitive handling of the this keyword.
  • Classes: Syntactical sugar over JavaScript's existing prototype-based inheritance, making object-oriented programming more familiar to developers from other languages.
  • Destructuring: A convenient way to extract values from arrays or properties from objects into distinct variables.
  • Promises: Objects representing the eventual completion (or failure) of an asynchronous operation and its resulting value, which help manage "callback hell".
• async/await: Introduced in ES2017, async/await is built on top of Promises and provides a syntax that makes asynchronous code look and behave more like synchronous code, making it much easier to read and debug.
  • The async keyword declares a function that always returns a Promise.
  • The await keyword is used inside an async function to pause execution until a Promise settles (resolves or rejects), returning the resolved value.
  • Proper error handling is achieved using standard try...catch blocks within async functions.
• Modules (import/export): ES6 introduced a native, standardized module system for organizing code into separate, reusable files.
  • export statements are used to share functions, objects, or variables from a module file.
  • import statements are used to access those exports in other files.
  • This modular approach helps in building scalable applications and managing dependencies efficiently.
• TypeScript: As a statically typed superset of JavaScript, TypeScript builds on ES6+ syntax and adds powerful features like type safety, type inference, and type annotations. This allows errors related to types to be caught at compile time rather than runtime, leading to more robust and maintainable code, especially in large-scale applications

TypeScript Problem Solving Questions

---

---

 

use https://www.typescriptlang.org/play/?#code/Q

unknown vs any

Types of decorators in typescript

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

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

    function log(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
        const originalMethod = descriptor.value;
        descriptor.value = function (...args: any[]) {
            console.log(`Calling ${propertyKey} with arguments: ${JSON.stringify(args)}`);
            const result = originalMethod.apply(this, args);
            console.log(`${propertyKey} returned: ${JSON.stringify(result)}`);
            return result;
        };
        return descriptor;
    }

    class Calculator {
        @log
        add(a: number, b: number) {
            return a + b;
        }
    }

    function configurable(value: boolean) {
        return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
            descriptor.configurable = value;
        };
    }

    class Point {
        private _x: number;
        constructor(x: number) {
            this._x = x;
        }

        @configurable(false)
        get x() {
            return this._x;
        }
    }

    import "reflect-metadata";

    const formatMetadataKey = Symbol("format");

    function format(formatString: string) {
        return Reflect.metadata(formatMetadataKey, formatString);
    }

    function getFormat(target: any, propertyKey: string) {
        return Reflect.getMetadata(formatMetadataKey, target, propertyKey);
    }

    class Post {
        @format("DD/MM/YYYY")
        createdAt: Date;
        constructor(createdAt: Date) {
            this.createdAt = createdAt;
        }
    }

    import "reflect-metadata";

    const requiredMetadataKey = Symbol("required");

    function required(target: Object, propertyKey: string | symbol, parameterIndex: number) {
        let existingRequiredParameters: number[] = Reflect.getOwnMetadata(requiredMetadataKey, target, propertyKey) || [];
        existingRequiredParameters.push(parameterIndex);
        Reflect.defineMetadata(requiredMetadataKey, existingRequiredParameters, target, propertyKey);
    }

    class GreeterWithValidation {
        greet(@required message: string) {
            return "Hello, " + message;
        }
    }

Why decorators in typescript ?

{
  "compilerOptions": {
    "target": "ES5",
    "experimentalDecorators": true
  }
}

function Logger(constructor: Function) {
  console.log('Logging...');
  console.log(constructor);
}

@Logger
class User {
  name: string;

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

const user = new User('Alice');

syntax for inheritance in typescript

// Base Class (Parent/Superclass)
class BaseClass {
  // Properties and methods of the base class
  property1: string;

  constructor(value: string) {
    this.property1 = value;
  }

  method1(): void {
    console.log(`BaseClass method1: ${this.property1}`);
  }
}

// Derived Class (Child/Subclass)
class DerivedClass extends BaseClass {
  // Properties and methods specific to the derived class
  property2: number;

  constructor(baseValue: string, derivedValue: number) {
    // Call the constructor of the base class using super()
    super(baseValue);
    this.property2 = derivedValue;
  }

  method2(): void {
    console.log(`DerivedClass method2: ${this.property2}`);
    // Call a method of the base class using super.methodName()
    super.method1();
  }
}

// Example usage
const myDerivedObject = new DerivedClass("Hello from Base", 123);
myDerivedObject.method1(); // Inherited from BaseClass
myDerivedObject.method2(); // Specific to DerivedClass

Angular typescript example

import { Component } from '@angular/core';

@Component({
  selector: 'app-hello', // The tag used in HTML, e.g., <app-hello></app-hello>
  template: `<h1>{{ title }}</h1>
             <p>Welcome to the Angular application!</p>`, // Inline HTML template
  standalone: true // Marks the component as standalone (modern approach)
})
export class HelloComponent {
  title = 'Hello world!'; // A TypeScript property available to the template
}

import { bootstrapApplication } from '@angular/platform-browser';
import { HelloComponent } from './hello.component';

bootstrapApplication(HelloComponent)
  .catch(err => console.error(err));

interface Product {
  id: number;
  name: string;
  price: number;
}

const productList: Product[] = [
  { id: 1, name: 'Laptop', price: 999 },
  { id: 2, name: 'Phone', price: 499 }
];

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class ProductService {
  getProducts(): Product[] {
    // Logic to fetch data (e.g., from an API using HttpClient)
    return productList;
  }
}

// In a component class (.ts file)
username: string = 'JaneDoe';

deleteItem(index: number): void {
  // Logic to handle an event
  console.log(`Deleting item at index ${index}`);
}

<!-- In the corresponding template (.html file) -->
<input [(ngModel)]="username"> <!-- Two-way binding -->
<button (click)="deleteItem(i)">Delete</button> <!-- Event binding -->
<p>{{ username }}</p> <!-- Interpolation -->