let name: string = "John";
    let age: number = 30;
    let isStudent: boolean = true;
    let hobbies: string[] = ["coding", "reading", "gaming"];
  

How to define optional properties in TypeScript?

Summary:

Detailed Answer:

What is the use of 'readonly' modifier in TypeScript?

Summary:

Detailed Answer:

The 'readonly' modifier in TypeScript is used to make a property or variable read-only, meaning that its value cannot be changed once it is assigned or initialized. This provides immutability to the property or variable, ensuring that it cannot be accidentally modified or reassigned.

By declaring a property or variable as 'readonly', it signals to other developers that the value should not be changed and enforces this restriction at compile-time. This can help prevent bugs and improve code clarity, as developers can trust that a 'readonly' property will not be modified.

The 'readonly' modifier can be applied to properties within a class or interface, as well as function parameters. When applied to a parameter, it restricts the caller from modifying the value passed to the function.

• Example:

class Car {
  readonly brand: string;
  
  constructor(brand: string) {
    this.brand = brand;
  }
}

const myCar = new Car('Tesla');
myCar.brand = 'BMW'; // Error: Cannot assign to 'brand' because it is a read-only property.

• Explanation:

In the above example, the 'brand' property of the 'Car' class is declared as 'readonly'. Therefore, once a value is assigned to it in the constructor, it cannot be changed later on. The attempt to assign a new value to 'myCar.brand' results in a compilation error.

The 'readonly' modifier is particularly useful when working with immutable data structures or when dealing with values that should not be modified throughout the execution of the program.

Explain the differences between 'public', 'private', and 'protected' access modifiers.

Summary:

Detailed Answer:

Access modifiers in TypeScript allow us to control the accessibility of class members (properties and methods) from outside the class. TypeScript provides three access modifiers: public, private, and protected.

1. Public: Public access modifier allows class members to be accessed from anywhere, both within and outside of the class. This is the default access modifier in TypeScript if no access modifier is specified.

• Example:

class Person {
  public name: string;

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

let person = new Person("John");
console.log(person.name); // Output: John

2. Private: Private access modifier restricts access to class members only within the same class. They cannot be accessed from outside the class or even from child classes.

• Example:

class Person {
  private age: number;

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

  getAge(): number {
    return this.age; // Can access 'age' within the class
  }
}

let person = new Person(25);
console.log(person.age); // Error: Property 'age' is private
console.log(person.getAge()); // Output: 25

3. Protected: Protected access modifier allows class members to be accessed within the same class as well as from its child classes. However, they cannot be accessed from outside of the class hierarchy.

• Example:

class Person {
  protected address: string;

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

class Employee extends Person {
  getFullAddress(): string {
    return this.address; // Can access 'address' through inheritance
  }
}

let employee = new Employee("123 Main Street");
console.log(employee.address); // Error: Property 'address' is protected
console.log(employee.getFullAddress()); // Output: 123 Main Street

In summary, the public modifier allows access from anywhere, private restricts access to within the class, and protected allows access within the class and its child classes.

How to implement inheritance in TypeScript?

Summary:

Detailed Answer:

class Animal {
  constructor(public name: string, public age: number) {}

  eat() {
    console.log(`${this.name} is eating.`);
  }
}

class Dog extends Animal {
  bark() {
    console.log(`${this.name} is barking.`);
  }
}

const dog = new Dog("Lucky", 3);
console.log(dog.name);   // Output: Lucky
console.log(dog.age);    // Output: 3
dog.eat();               // Output: Lucky is eating.
dog.bark();              // Output: Lucky is barking.

class Cat extends Animal {
  eat() {
    console.log(`${this.name} is eating quietly.`);
  }
}

const cat = new Cat("Whiskers", 5);
cat.eat();    // Output: Whiskers is eating quietly.

What is a module loader in TypeScript?

Summary:

Detailed Answer:

A module loader in TypeScript is a tool or runtime mechanism that is responsible for loading and executing modules in a TypeScript application.

In TypeScript, a module is a file that contains code and declarations that can be imported or exported to/from other modules. Module loaders help in resolving module dependencies, handling the loading and execution of modules, and ensuring that the required modules are available when needed.

There are several module loaders available in TypeScript:

1. CommonJS: CommonJS is a module loader that is commonly used in Node.js environments. It uses the require() function to import modules, and the module.exports or exports keywords to export modules.

// importing modules
const module1 = require('./module1');
const module2 = require('./module2');

// exporting modules
function foo() {
  // some functionality
}

module.exports = foo;

2. AMD (Asynchronous Module Definition): AMD is a module loader that is primarily used in web browsers. It focuses on loading modules asynchronously, allowing for better performance in web applications. It uses the define() function to define modules and the require() function to import modules.

// defining modules
define(['module1', 'module2'], function(module1, module2) {
  // module functionality
});

// importing modules
require(['module1', 'module2'], function(module1, module2) {
  // module functionality
});

3. SystemJS: SystemJS is a universal module loader that can handle modules written in any module format, including CommonJS, AMD, and ES modules. It provides a flexible and powerful way to load and execute modules in a TypeScript application.

// importing modules
import { module1, module2 } from './modules';

// exporting modules
export function foo() {
  // some functionality
}

Module loaders are essential in TypeScript applications as they enable modular code organization, code reusability, and dependency management. They make it easier to work with large-scale applications by allowing developers to split their code into smaller, manageable modules.

Explain the 'namespace' feature in TypeScript.

Summary:

Detailed Answer:

Some important line in the answer

The 'namespace' feature in TypeScript allows developers to organize their code into logical containers and avoid global scope pollution. It provides a way to structure and encapsulate code within a named namespace, similar to modules in other programming languages.

• Namespaces: Namespaces are simply a way to group related code together. They can be used to encapsulate variables, functions, classes, and interfaces.
• Declaration: Namespaces can be declared using the 'namespace' keyword, followed by the desired namespace name.

    
    namespace MyNamespace {
        // code goes here
    }
    

• Using Namespaces: To use the code within a namespace, it needs to be referenced using the dot notation.

    
    MyNamespace.myFunction();
    

• Nested Namespaces: Namespaces can also be nested within other namespaces by using the dot notation.

    
    namespace OuterNamespace {
        export namespace InnerNamespace {
            // code goes here
        }
    }
    
    OuterNamespace.InnerNamespace.myFunction();
    

• Exporting: When code within a namespace needs to be accessible outside the namespace, it needs to be explicitly exported using the 'export' keyword.

    
    namespace MyNamespace {
        export function myFunction() {
            // code goes here
        }
    }
    

Overall, namespaces in TypeScript provide a way to organize and modularize code, making it easier to manage and prevent naming collisions. However, it is important to note that namespaces should be used sparingly and not as a replacement for modules, especially when working on larger projects.

What is a type assertion in TypeScript?

Summary:

Detailed Answer:

Type Assertion in TypeScript:

In TypeScript, type assertion is a way to tell the compiler about the specific type of a variable when the compiler is unable to infer it automatically. It is like type casting in other programming languages.

• Syntax:

variableName as Type
or
<Type>variableName

• Example:

let num: any = 5;
let strLength: number = (num as string).length;
or
let num: any = 5;
let strLength: number = (<string>num).length;

In the above example, the variable "num" is of type "any" which means it can hold any type of value. Here, we are asserting the type of "num" to the type "string" using type assertion. Then, we are accessing the "length" property of the string.

• Usage:

Type assertion is commonly used in scenarios such as:

• When migrating JavaScript code to TypeScript, where types are not explicitly defined.
• When working with union types or any type, where the type needs to be narrowed down to a specific type.
• When using a library that does not have type definitions.

• Precautions:

It is important to note that type assertion does not perform any runtime type checking or validation. It is just a way to inform the compiler about the type. If the assertion is incorrect, it may lead to unexpected runtime errors.

It is recommended to use type assertion carefully and diligently, and rely more on TypeScript's type inference capabilities wherever possible.

How to use interfaces with classes in TypeScript?

Summary:

Detailed Answer:

How to use interfaces with classes in TypeScript?

In TypeScript, interfaces can be used to define the structure and contract of a class. By implementing an interface, a class is required to provide the properties and methods specified by the interface.

To use an interface with a class, the "implements" keyword is used:

interface Animal {
  name: string;
  sound: string;
  
  makeSound(): void;
}

class Dog implements Animal {
  name: string;
  sound: string;
  
  constructor(name: string, sound: string) {
    this.name = name;
    this.sound = sound;
  }
  
  makeSound(): void {
    console.log(this.sound);
  }
}

const dog = new Dog("Buddy", "Woof");
dog.makeSound(); // Output: "Woof"

In the example above, the class "Dog" implements the "Animal" interface. This means that the class is required to have properties "name" and "sound", as well as a method "makeSound".

The "implements" keyword ensures that the class adheres to the interface contract. If the class does not provide all the properties or methods defined by the interface, a compile-time error will occur.

By using interfaces with classes, it becomes easier to create reusable and maintainable code. Interfaces define the shape and behavior of objects, allowing for consistent usage across different classes.

• Interface: An interface is used to define the structure and contract that a class must adhere to. It specifies the properties and methods that a class must provide.
• Class: A class is an object-oriented programming construct that encapsulates data and behavior. It can implement one or more interfaces to fulfill their contract.
• Implements keyword: The "implements" keyword is used to indicate that a class adheres to an interface. It establishes the relationship between the interface and the class.

What is 'ambient declaration' in TypeScript?

Summary:

Detailed Answer:

An ambient declaration in TypeScript is a way to declare types and interfaces for existing JavaScript code or for APIs that exist in the runtime environment. It allows you to describe the shape and structure of external code without actually providing an implementation. Ambient declarations provide a way to extend the TypeScript type system to work with code that is not written in TypeScript.

Ambient declarations are commonly used when working with JavaScript libraries or frameworks that do not have built-in TypeScript support. By providing ambient declarations, developers can benefit from TypeScript's static type checking and IntelliSense features while working with external code.

There are two main ways to create ambient declarations in TypeScript:

1. Declaration Files: Declaration files have a .d.ts extension and are used to declare types, interfaces, and global variables specific to a particular module or library. These files can be created manually, or they can be downloaded from DefinitelyTyped, a community-driven repository of declaration files for popular JavaScript libraries.
2. Triple-Slash Directives: Triple-slash directives are special comments placed at the top of a TypeScript file that reference external declaration files. These directives instruct the TypeScript compiler to include the definitions from the referenced declaration files in the current compilation.

Here's an example of an ambient declaration for the jQuery library:

/// <reference types="jquery" />

$(document).ready(function() {
  $('button').click(function() {
    console.log('Button clicked');
  });
});

In this example, the triple-slash directive references the jQuery declaration file, which provides type information for the jQuery library. This allows TypeScript to provide IntelliSense and type checking for jQuery code.

Ambient declarations are a powerful feature of TypeScript that enable developers to integrate with existing JavaScript codebases and leverage TypeScript's type system and tooling. They provide a way to describe the structure of external code and enhance the development experience when working with JavaScript libraries and frameworks.

TypeScript Interview Questions For Experienced

What is 'Module Resolution' in TypeScript?

Summary:

Detailed Answer:

Module Resolution

In TypeScript, module resolution is the mechanism used to locate and load external modules (files) in a TypeScript application. It determines how the compiler searches for and resolves dependencies between different modules, allowing them to be imported and used in a TypeScript file.

There are two main strategies for module resolution in TypeScript:

1. Classic Resolution (default): This strategy is used when the targeted module is not an ES2015 module. It follows a set of rules to locate the module file.
2. Node Resolution: This strategy is used when the targeted module is an ES2015 module or when the --esModuleInterop flag is enabled. It relies on Node.js module resolution algorithm and the node_modules directory structure.

Module resolution can be specified in the tsconfig.json file by setting the moduleResolution option to either "node" or "classic". If not provided, the TypeScript compiler will use the default strategy (classic resolution).

In Classic Resolution, TypeScript compiler looks for modules using several rules:

• Relative Paths: If the module path starts with "./" or "../", the compiler resolves it relative to the importing file.
• Absolute Paths: If the module path starts with "/", the compiler resolves it relative to the root of the project.
• Non-relative Paths: If the module path does not start with "./", "../", or "/", the compiler looks up the module in a set of predefined locations, including the node_modules directories and type declaration files.

In Node Resolution, the compiler first follows the same rules as in Classic Resolution. If the module is not found, it uses Node.js module resolution algorithm, which looks for the module using the node_modules directory structure.

// Example of module resolution in TypeScript

// Classic Resolution
import { MyModule } from './my-module';
import { AnotherModule } from 'another-module';

// Node Resolution
import * as _ from 'lodash';

In conclusion, module resolution is an important aspect of TypeScript that determines how the compiler locates and loads external modules. By understanding the different strategies and rules involved in module resolution, developers can effectively import and use modules in their TypeScript applications.

What is Type Guard in TypeScript?

Summary:

Detailed Answer:

Type Guard in TypeScript

TypeScript is a statically typed superset of JavaScript that provides optional type annotations and type checking at compile time. One of the key features in TypeScript is the concept of Type Guards.

A Type Guard is a special syntax that allows the TypeScript compiler to narrow down the type of a variable within a conditional block. It helps in performing type analysis during runtime to determine the specific type of the variable.

• Instanceof Type Guard: The instanceof type guard is used to check if an object is an instance of a specific class. It returns a boolean value indicating whether the object is an instance of the specified class or not. Here's an example:

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

class Cat extends Animal {
    purr() {
        console.log("Cat is purring");
    }
}

function isCat(animal: Animal): animal is Cat {
    return animal instanceof Cat;
}

let animal: Animal = new Cat("Whiskers");

if (isCat(animal)) {
    animal.purr(); // Compiles successfully as the type is narrowed down to Cat
}

• Type Predicate: Type Predicates are user-defined functions that return a type predicate. It can be used to perform type narrowing based on custom logic. Here's an example:

type Fish = { swim: () => void };
type Bird = { fly: () => void };

function isFish(animal: Fish | Bird): animal is Fish {
    return typeof (animal as Fish).swim !== "undefined";
}

function move(animal: Fish | Bird) {
    if (isFish(animal)) {
        animal.swim(); // Compiles successfully as the type is narrowed down to Fish
    } else {
        animal.fly(); // Compiles successfully as the type is narrowed down to Bird
    }
}

Type Guards are a powerful feature in TypeScript that helps in writing more robust and type-safe code. It allows developers to perform conditional operations based on the specific type of a variable, leading to better code quality and fewer runtime errors.

How to use decorators in TypeScript?

Summary:

Detailed Answer:

Using decorators in TypeScript

In TypeScript, decorators are a way to add metadata to classes or class members (properties, methods, accessors, etc.) and modify their behavior at runtime. Decorators are declared using the @ symbol followed by the decorator name, and are usually placed just before the class or class member that they are decorating.

To use decorators in TypeScript, you need to enable the "experimentalDecorators" option in your tsconfig.json file by setting it to true. This allows TypeScript to compile decorators into JavaScript code.

Here is an example of how to use decorators in TypeScript:

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

    @Logger
    class MyClass {
        constructor() {
            console.log('Creating an instance of MyClass...');
        }
    }

    const myInstance = new MyClass();

In this example, the Logger decorator is declared as a function and takes the target (which represents the constructor function of the class being decorated) as a parameter. When the MyClass class is instantiated, the Logger decorator logs a message to the console before the class constructor is called.

Decorators can also take additional parameters to customize their behavior. For example:

    function logProperty(target: any, key: string) {
        console.log('Logging property...');
        console.log(key);
        console.log(target[key]);
    }

    class MyClass {
        @logProperty
        myProperty: string = 'Hello, world!';
    }

    const myInstance = new MyClass();

In this example, the logProperty decorator logs information about the myProperty property of the MyClass class when an instance of MyClass is created.

• Advantages of using decorators:
• Decorators provide a clean and declarative way to add functionality to classes or class members without modifying their original code.
• They can be easily applied or removed, making the code more flexible and maintainable.
• Decorators enable aspect-oriented programming, allowing you to separate cross-cutting concerns from the core logic of your application.
• Limitations of decorators:
• Decorators are still an experimental feature in TypeScript, so their behavior may change in future versions.
• Decorators can only be used with classes and class members, and not with variables or functions.
• Decorators are not supported in all JavaScript environments, so they may not work in some runtime environments or with older browsers.

What are Generics in TypeScript?

Summary:

Detailed Answer:

Generics in TypeScript

Generics in TypeScript are a feature that allows the creation of reusable components or functions that can work with various types. They provide a way to define functions or classes that can work with different data types, making the code more flexible and reusable.

• Benefits of Generics:

1. Type Safety: Generics ensure that the type of data used in a generic component or function is maintained consistently throughout the code. This helps catch type errors at compile time rather than at runtime, leading to more robust and reliable software.

2. Code Reusability: Generics make it possible to write generic code that can work with a wide range of data types. This eliminates the need to duplicate code for each specific data type and promotes code reuse.

• Using Generics:

Generics can be used in various contexts in TypeScript:

1. Functions: Generics can be used to create functions that work with different types of data. The type parameter is declared using angle brackets (<>) after the function name and is used as a placeholder for the actual data type:

function printArray(arr: T[]): void {
  for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
  }
}

// Example usage
let numbers: number[] = [1, 2, 3, 4];
let strings: string[] = ["Hello", "World"];

printArray(numbers); // Output: 1, 2, 3, 4
printArray(strings); // Output: Hello, World

2. Classes: Generics can also be used with classes to create reusable components. The type parameter is declared using angle brackets (<>) after the class name and can be used in the class properties, methods, and constructors:

class Box<T> {
  private item: T;

  constructor(item: T) {
    this.item = item;
  }

  getItem(): T {
    return this.item;
  }
}

// Example usage
let stringBox = new Box<string>("Hello");
console.log(stringBox.getItem()); // Output: Hello

let numberBox = new Box<number>(42);
console.log(numberBox.getItem()); // Output: 42

Generics provide powerful tools for creating reusable and type-safe code in TypeScript. By leveraging generics, developers can improve code quality, reduce code duplication, and enhance the maintainability of their software.

Explain the 'keyof' keyword in TypeScript.

Summary:

Detailed Answer:

The 'keyof' keyword in TypeScript is a type operator that allows you to obtain a union type of all the keys of a given object type. It essentially creates a new type that represents all possible property names in the object.

Here is an example to illustrate the usage of 'keyof':

type Person = {
  name: string;
  age: number;
  gender: string;
};

type PersonKeys = keyof Person;

// PersonKeys is now a union type: 'name' | 'age' | 'gender'

In the example above, we create an object type 'Person' with three properties: 'name', 'age', and 'gender'. By applying the 'keyof' operator on 'Person', we obtain a new type 'PersonKeys' that is a union of all the keys in 'Person'.

Using the 'keyof' operator allows us to enforce type safety when working with object property names. It enables us to access properties dynamically and perform type checking at compile-time, preventing potential runtime errors.

• Advantages of 'keyof':

• Enables compile-time type checking: By using 'keyof' with indexed types or generics, we can ensure that we only access valid property names.
• Facilitates dynamic property access: We can use the resulting union type to access properties dynamically without resorting to 'key in object' checks or 'object[key]' syntax.
• Improved code documentation: By capturing all the keys in a type, it provides a clear reference for the available properties.

Overall, the 'keyof' keyword in TypeScript is a powerful tool that allows us to work with object properties in a type-safe and efficient manner. It brings compile-time safety when accessing object properties and facilitates dynamic property access.

What is 'Conditional Types' in TypeScript?

Summary:

Detailed Answer:

Conditional Types in TypeScript:

Conditional types are a feature in TypeScript that allow you to create types that depend on conditions or other types. They are used to perform type inference based on the values of other types, enabling you to define more complex and flexible types.

Conditional types make use of conditional expressions, which are expressions that evaluate to either true or false at compile time. These expressions can be used to define different types based on specific conditions.

• Basic Syntax: Conditional types are defined using the following syntax:

type MyType = T extends SomeCondition ? TypeA : TypeB;

• Explanation: In the above example, MyType is a conditional type that takes a generic type T as an argument. It checks if T extends SomeCondition, and if true, it assigns TypeA to MyType; otherwise, it assigns TypeB.

• Common Use Cases: Conditional types can be used in various scenarios, such as:

1. Mapping Types: You can use conditional types to map one type to another based on certain conditions or transform the types in specific ways.

        type Convert = T extends string ? number : T;
        
        type ConvertedString = Convert; // ConvertedString will be number
        type ConvertedBoolean = Convert; // ConvertedBoolean will be boolean
    

2. Distributive Types: Conditional types can distribute over union types, allowing you to create types that operate on each element of a union type individually.

        type StringOrNumber = T extends string ? string : number;
        
        type Result = StringOrNumber<'a' | 'b' | 1 | 2>; // Result will be 'a' | 'b' | number
    

3. Filtering Types: Conditional types can be used to filter out specific types from a union type based on certain conditions.

        type ExcludeFalsy = T extends falsy ? never : T;
        
        type NonFalsyValues = ExcludeFalsy<'' | 0 | false | null | undefined>; // NonFalsyValues will be never
    

Conditional types provide a powerful tool to create polymorphic types that can adapt based on specific conditions or types. They enable more precise type checking and inference in TypeScript, allowing for increased flexibility and type safety.

How to create custom type guards in TypeScript?

Summary:

Detailed Answer:

Explain the 'infer' keyword in TypeScript.

Summary:

Detailed Answer:

The 'infer' keyword in TypeScript is used in conditional types to infer or deduce the type of a type parameter based on the type of another parameter or expression.

When defining generic types or conditional types, TypeScript allows us to use the 'infer' keyword to capture the type that will be inferred by the compiler. This can be useful when working with complex type systems and conditional logic.

Here is an example to illustrate the usage of the 'infer' keyword:

    type ExtractReturnType = T extends (...args: any[]) => infer R ? R : any;
    
    function sum(a: number, b: number): number {
        return a + b;
    }
    
    type Result = ExtractReturnType; // Result will be inferred as 'number'

In the above example, the 'ExtractReturnType' type takes a generic type parameter 'T' and checks if it extends a function type '(...args: any[]) => infer R'. If it does, the inferred return type 'R' is captured by the 'infer' keyword and assigned to the conditional type 'R'. If it doesn't extend a function type, 'any' is assigned as the default type.

By using the 'infer' keyword, we can extract and use the inferred type when defining other types or performing further type transformations.

• Advantages of using 'infer':
• The 'infer' keyword allows us to capture and use the inferred type within a conditional type.
• It helps in writing more generic and reusable type definitions.
• It enables type inference based on the input or output type of a function or expression.

Overall, the 'infer' keyword is a powerful tool in TypeScript's type system that enables the capture and usage of inferred types within conditional types, allowing for more flexible and generic type definitions.

What is the use of 'mapped types' in TypeScript?

Summary:

Mapped types in TypeScript allow for the creation of new types based on an existing type by mapping over its properties. They are useful for creating new types with modified or transformed properties, such as making all properties optional or readonly. This helps in reducing code duplication and providing flexibility in type definitions.

Detailed Answer:

Mapped types in TypeScript are a powerful tool that allow you to create new types based on existing ones. They provide a way to transform and manipulate the properties of an object type, allowing you to create new types with modified or filtered properties.

One common use case for mapped types is to create readonly versions of existing types. This can be done using the Readonly utility type provided by TypeScript. The Readonly utility takes an object type as input and returns a new type with all properties marked as readonly:

type Person = {
  name: string;
  age: number;
};

type ReadonlyPerson = Readonly;

const person: ReadonlyPerson = {
  name: 'John',
  age: 25
};

// The following line would result in a type error, because the 'name' property is readonly
person.name = 'Alice';

Another use case for mapped types is to create partial versions of existing types. This can be done using the Partial utility type provided by TypeScript. The Partial utility takes an object type as input and returns a new type with all properties marked as optional:

type Book = {
  title: string;
  author: string;
  year: number;
};

type PartialBook = Partial;

const book: PartialBook = {
  title: 'TypeScript in Action'
};

// The 'author' and 'year' properties are optional, so the following line is allowed
book.author = 'John Doe';

Furthermore, mapped types can also be used to pick or omit properties from an object type. This can be done using the Pick and Omit utility types provided by TypeScript:

type SensitiveData = {
  id: number;
  password: string;
  email: string;
  address: string;
};

type PublicData = Pick;

const publicData: PublicData = {
  id: 123,
  email: '[email protected]'
};

// The 'password' and 'address' properties are omitted, so the following line is not allowed
publicData.password = 'password123';

In summary, mapped types in TypeScript provide a convenient way to manipulate and transform object types. They allow you to create new types with modified or filtered properties, making your code more expressive and type-safe.

What are 'intersection types' and 'union types' in TypeScript?

Summary:

Detailed Answer:

Intersection types

Intersection types in TypeScript allow you to combine multiple types into one, creating a new type that has all the properties and methods from each individual type. It represents the intersection of two or more types, meaning a value of this type must satisfy all the individual types involved.

• Example: Suppose we have two types: 'Person' and 'Employee'. We can create an intersection type called 'PersonEmployee' that represents a person who is also an employee:

    type Person = {
      name: string;
      age: number;
    };
    
    type Employee = {
      id: number;
      salary: number;
    };
    
    type PersonEmployee = Person & Employee;
    
    const personEmployee: PersonEmployee = {
      name: "John",
      age: 30,
      id: 123,
      salary: 5000
    };

• Explanation: In the example, we define two types 'Person' and 'Employee', and then we create an intersection type 'PersonEmployee' using the '&' operator. This intersection type represents a person who is also an employee, and it has all the properties from both types. We can then declare a variable 'personEmployee' of the 'PersonEmployee' type and assign it an object that satisfies both 'Person' and 'Employee' types.

Union types

Union types in TypeScript allow a value to have more than one type, meaning a value of this type can be any of the specified types. It represents the union of two or more types, and the value of a union type can be one of the specified types.

• Example: Suppose we have two types: 'StringOrNumber' and 'BooleanOrObject'. We can create a union type called 'CombinedType' that represents a value that can be either a string or a number, or a boolean or an object:

    type StringOrNumber = string | number;
    type BooleanOrObject = boolean | object;
    type CombinedType = StringOrNumber | BooleanOrObject;
    
    let value: CombinedType;
    
    value = "Hello"; // Valid
    value = 123; // Valid
    value = true; // Valid
    value = { key: "value" }; // Valid

• Explanation: In the example, we define two types 'StringOrNumber' and 'BooleanOrObject', and then we create a union type 'CombinedType' using the '|' operator. This union type represents a value that can be either a string or a number, or a boolean or an object. We can then declare a variable 'value' of the 'CombinedType' type and assign it a value of any of the specified types.

How to create utility types in TypeScript?

Summary:

Detailed Answer:

Utility types in TypeScript

In TypeScript, utility types are pre-defined types that provide convenient ways to manipulate and transform existing types. These utility types are built into TypeScript and can be used to create new types based on existing types.

• Partial: The Partial utility type allows you to make all properties of a given type optional. It takes an object type as an argument and returns a new type with all properties marked as optional.

type Person = {
  name: string;
  age: number;
};

type PartialPerson = Partial<Person>;
// The PartialPerson type now has optional properties
// name?: string;
// age?: number;

• Readonly: The Readonly utility type allows you to create a new type with all properties of a given type marked as readonly. It takes an object type as an argument and returns a new type with readonly properties.

type Person = {
  name: string;
  age: number;
};

type ReadonlyPerson = Readonly<Person>;
// The ReadonlyPerson type now has readonly properties
// readonly name: string;
// readonly age: number;

• Required: The Required utility type allows you to make all properties of a given type required. It takes an object type as an argument and returns a new type with all properties marked as required.

type PartialPerson = {
  name?: string;
  age?: number;
};

type RequiredPerson = Required<PartialPerson>;
// The RequiredPerson type now has required properties
// name: string;
// age: number;

• Pick: The Pick utility type allows you to create a new type by picking a subset of properties from a given type. It takes an object type and a list of property names as arguments and returns a new type with only the specified properties.

type Person = {
  name: string;
  age: number;
  address: string;
};

type PersonNameAndAge = Pick<Person, 'name' | 'age'>;
// The PersonNameAndAge type only contains the 'name' and 'age' properties

• Omit: The Omit utility type allows you to create a new type by omitting specified properties from a given type. It takes an object type and a list of property names as arguments and returns a new type without the specified properties.

type Person = {
  name: string;
  age: number;
  address: string;
};

type PersonWithoutAge = Omit<Person, 'age'>;
// The PersonWithoutAge type does not contain the 'age' property

These are just a few examples of the utility types available in TypeScript. The utility types provide powerful and concise ways to manipulate and transform types in TypeScript projects, making it easier to work with complex types and improve type safety.

Explain the 'this' type in TypeScript.

Summary:

Detailed Answer:

The 'this' type in TypeScript refers to the type of the current object or instance that a function is being called on.

In JavaScript, the value of 'this' is determined by how a function is called. It can refer to different objects depending on the context. However, in TypeScript, the 'this' type allows for capturing and preserving the type shape of the object on which the function is invoked.

Here's an example to illustrate how 'this' works in TypeScript:

class Person {
  name: string;
  
  constructor(name: string) {
    this.name = name;
  }
  
  sayHello() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

const person = new Person("John");
person.sayHello(); // Output: Hello, my name is John

In the above example, the 'this' type within the sayHello() method refers to the type 'Person', because the method is being called on an instance of the Person class.

The 'this' type is useful for maintaining type safety within TypeScript. It allows the compiler to infer and use the correct type information when accessing properties or calling methods on an object. Additionally, it helps prevent errors by catching potential type mismatches at compile-time.

It's worth noting that in TypeScript, 'this' is considered to be an implicit parameter within a function. This means that if a function expects a specific type as 'this' parameter, it can be explicitly annotated using the 'this' type annotation:

function logName(this: Person) {
  console.log(`Logging name: ${this.name}`);
}

const person = new Person("John");
logName.call(person); // Output: Logging name: John

In the above example, the 'this' parameter is explicitly annotated as 'Person', ensuring that the function is called with the correct type.

The 'this' type is an important aspect of TypeScript that helps ensure type safety and maintain the type shape of objects across function calls.

What is 'declaration merging' in TypeScript?

Summary:

Detailed Answer:

Declaration merging in TypeScript refers to the process of combining multiple declarations with the same name into a single definition. It allows developers to extend or combine types and interfaces without the need for complex inheritance or explicit redefinition.

Declaration merging can be useful in scenarios where you need to add additional properties or methods to an existing type or interface, and provides a way to create a more cohesive and organized codebase.

Here are a few examples of how declaration merging can be used in TypeScript:

• Merging interfaces: When two interfaces with the same name are declared, TypeScript automatically merges them by combining their properties and methods into a single interface.

    interface Animal {
      name: string;
    }

    interface Animal {
      age: number;
    }

    const animal: Animal = {
      name: "Leo",
      age: 5
    };
  

• Merging interfaces with classes: TypeScript allows you to merge interfaces with classes, which can be useful when you want to add additional properties or methods to instances of a class.

    class Person {
      name: string;
      age: number;
    }

    interface Person {
      address: string;
    }

    const person: Person = {
      name: "John Doe",
      age: 25,
      address: "123 Main St"
    };
  

• Merging namespaces: TypeScript allows you to merge multiple namespaces with the same name into a single namespace, combining their properties and functions.

    namespace Math {
      export function multiply(a: number, b: number): number {
        return a * b;
      }
    }

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

    console.log(Math.multiply(2, 3)); // Output: 6
    console.log(Math.add(2, 3)); // Output: 5
  

Overall, declaration merging in TypeScript provides a powerful way to extend and combine types and interfaces, making the code more reusable, modular, and easier to maintain.

How to use 'type guards' with 'custom type predicates' in TypeScript?

Summary:

Detailed Answer:

TypeScript is a statically typed programming language developed by Microsoft. It is a superset of JavaScript and provides optional static typing, which enables developers to catch potential errors during development and improve code maintainability. One powerful feature of TypeScript is the ability to use 'type guards' with 'custom type predicates' to refine the type information of variables.

A 'type guard' is a runtime check that allows TypeScript to narrow down the type of a variable within a conditional block. When a type guard is true, it provides additional type information to the TypeScript compiler, enabling more precise type checking and autocompletion.

A 'custom type predicate' is a user-defined type guard that checks a variable against a specific condition and returns a boolean value indicating whether the condition is satisfied. Custom type predicates are typically defined as functions with a return type of 'variable is Type', where 'variable' is the name of the input parameter and 'Type' is the desired type.

Here's an example of how to use 'type guards' with 'custom type predicates' in TypeScript:

function isString(value: unknown): value is string {
  return typeof value === 'string';
}

function doSomething(value: unknown) {
  if (isString(value)) {
    // TypeScript now knows that 'value' is a string
    console.log(value.toUpperCase());
  } else {
    console.log('Input value is not a string');
  }
}

doSomething('Hello'); // Output: HELLO
doSomething(42); // Output: Input value is not a string

• Line 1: Defines a custom type predicate 'isString' that checks if a value is a string.
• Line 5: Uses the 'isString' type guard to narrow down the type of 'value' within the conditional block.
• Line 7: TypeScript now knows that 'value' is a string, allowing us to use string-specific methods or properties.
• Lines 9-12: Demonstrates how the 'doSomething' function behaves when passed different types of values.

Using 'type guards' with 'custom type predicates' can greatly enhance TypeScript's type checking capabilities and improve the overall safety and correctness of your code.

Explain the 'Implicit This Parameter' in TypeScript.

Summary:

Detailed Answer:

Implicit This Parameter in TypeScript

In TypeScript, the concept of "Implicit This Parameter" refers to the automatic binding of the "this" keyword within class methods. It allows access to the instance properties and methods of a class without explicitly specifying the object on which the method is called.

• Background: In JavaScript, the value of the "this" keyword is determined dynamically at runtime. It typically refers to the object that invokes the function. However, in TypeScript, the "this" keyword can have a static type annotation to provide more precise type checking during development.

When a class method is declared in TypeScript, it implicitly receives a special parameter called "this". The "this" parameter has the same type as the class itself and represents the instance of the class being used at runtime.

class MyClass {
  private value: number = 42;
  
  getValue(): number {
    return this.value;
  }
}

const myObject = new MyClass();
console.log(myObject.getValue()); // Output: 42

In the above example, the "getValue" method is defined within the "MyClass" class. The "this" parameter allows the method to access the "value" property of the class instance without having to explicitly provide the object.

This implicit binding of the "this" parameter makes the code more concise and readable by reducing the need for repetitive variable declarations or explicit use of the object name.

It is important to note that arrow functions in TypeScript do not have their own "this" object. Instead, they inherit the "this" value from the surrounding lexical scope. This behavior makes arrow functions particularly useful in scenarios where the "this" context needs to be preserved across different scope levels.

• Advantages:

• Enhanced Readability: The implicit this parameter reduces the noise in the code by removing the need to explicitly reference the object on which the method is called.
• Type Safety: Using the implicit this parameter provides type-checking benefits in TypeScript, ensuring that the methods are invoked on the correct type of object.
• Arrow Function Consistency: The implicit this parameter aligns with the behavior of arrow functions, where the this value is inherited from the surrounding context.

What are 'Conditional Expressions' in TypeScript?

Summary:

Detailed Answer:

Conditional Expressions in TypeScript

In TypeScript, conditional expressions are used to make decisions based on certain conditions. They allow you to choose between different values or actions based on the outcome of a condition.

Conditional expressions in TypeScript are typically used in if-else statements or ternary expressions, which evaluate a condition and perform different operations depending on the result.

• If-else statements: In TypeScript, you can use if-else statements to execute a block of code if a certain condition is true, and another block if the condition is false. Here is an example:

if (condition) {
   // code to execute if condition is true
} else {
   // code to execute if condition is false
}

• Ternary expressions: Ternary expressions are a compact way of writing if-else statements in TypeScript. They have the following syntax:

condition ? expression1 : expression2

If the condition is true, expression1 is evaluated and returned. Otherwise, expression2 is evaluated and returned. Here is an example:

let result = (num % 2 === 0) ? "Even" : "Odd";

In the example above, if the number stored in the num variable is even, the result will be "Even". Otherwise, it will be "Odd".

Conditional expressions are useful in TypeScript when you need to make decisions and perform different actions based on certain conditions. They allow you to write more flexible and dynamic code.

How to use 'type parameter defaults' in TypeScript?

Summary:

To use 'type parameter defaults' in TypeScript, you can define a default value for a type parameter by using the syntax ``. This allows you to specify a default value for the type parameter in case no explicit value is provided when invoking the generic type. For example: ``` function myFunction(arg: T): void { // ... } myFunction("hello"); // T is inferred as string myFunction(123); // T is inferred as number myFunction(true); // T is explicitly set to boolean ```

Detailed Answer:

In TypeScript, you can use type parameter defaults to provide default values for type parameters in generic types or functions. This allows you to define a default type for a generic parameter if no type is explicitly provided when calling the generic type or function.

To use type parameter defaults in TypeScript, you need to define the type parameter with a default value using the `=` syntax.

    function myFunction(arg: T): T {
        return arg;
    }

    const result1 = myFunction(42); // Specify type argument explicitly
    const result2 = myFunction("Hello"); // Default to string type

In the above example, the `myFunction` function has a generic type parameter `T` with a default value of `string`. When calling the function without specifying the type argument, it defaults to `string`.

• Type parameter defaults in generic types: You can also use type parameter defaults when defining generic types. Here's an example:

    interface MyArray {
        length: number;
        push(...items: T[]): number;
        pop(): T | undefined;
    }

    const myArray: MyArray = {
        length: 0,
        push(...items: number[]): number {
            return this.length += items.length;
        },
        pop(): number | undefined {
            return this.length ? --this.length : undefined;
        }
    };

In the above example, the `MyArray` interface is defined with a generic type parameter `T` that defaults to `any`. This allows you to create instances of `MyArray` without explicitly specifying the type argument.

Type parameter defaults provide flexibility and convenience when working with generics in TypeScript. They allow you to define a default type for a generic parameter, which is used when the type argument is not explicitly provided. This feature makes your code more reusable and easier to work with in different scenarios.

Summary:

Detailed Answer:

Recursive Type Aliases

In TypeScript, recursive type aliases allow us to define a type that refers to itself. This means that a type can have a reference to another type that is the same as itself. Recursive types are useful when dealing with data structures that have a recursive nature, such as linked lists, trees, or graphs.

Recursive type aliases can be defined using the `type` keyword followed by the name of the type and the type definition. To create a recursive type alias, we can use a union type or an intersection type.

• Union Type: A recursive type alias that uses a union type creates a type that can be either the base case or a recursive case. The base case represents the end of the recursion, while the recursive case represents an iteration of the structure.

type LinkedList = T | { value: T, next: LinkedList };

• Intersection Type: A recursive type alias that uses an intersection type allows us to add additional properties to the recursive case. This can be useful when defining more complex data structures.

type Tree = { value: T, left?: Tree, right?: Tree };

Recursive type aliases can also be used with other type operators and modifiers, such as `Partial`, `Readonly`, or `keyof`, to create more specialized recursive types.

type PartialTree = Partial>;
type ReadonlyLinkedList = Readonly>;

Using recursive type aliases, we can create expressive and self-referential type definitions that accurately model recursive data structures in TypeScript. This allows us to leverage the power of the type system to catch potential errors and provide better tooling support.

What are the 'Triple-Slash Directives' in TypeScript?

Summary:

Detailed Answer:

Triple-Slash Directives in TypeScript:

Triple-slash directives are special comments in TypeScript that provide instructions to the TypeScript compiler. These directives start with three slashes ('///') and can be placed at the top of a TypeScript file, before any code.

Triple-slash directives are used to:

1. Reference external dependencies: Using triple-slash directives, you can reference external libraries or type definitions that are required for your TypeScript file to compile successfully. It helps the TypeScript compiler to locate and include the necessary files during the compilation process.
2. Declare module dependencies: Triple-slash directives allow you to declare the dependency on another module or script. It helps TypeScript to understand the import and export statements correctly.
3. Generate declaration files: By adding a triple-slash directive with the 'reference' keyword and the path to another TypeScript file, you can instruct the TypeScript compiler to include the referenced file's declarations in the generated declaration file (.d.ts).
4. Control the output file structure: Triple-slash directives can be used to control the output file structure when generating JavaScript files from TypeScript code. By using the 'outFile' directive, you can specify the name and location of the output file.
5. Set compiler options: Triple-slash directives can be used to set or override compiler options. For example, you can enable strict mode or specify a target ECMAScript version using these directives.

Here is an example of triple-slash directives used in a TypeScript file:

/// 
/// 

import { myFunction } from './myModule';

// TypeScript code here

How to use 'Type guards and type assertions' together in TypeScript?

Summary:

Detailed Answer:

    
        function isNumber(value: any): value is number {
            return typeof value === 'number';
        }
    

    
        const value: unknown = 123;

        if (isNumber(value)) {
            // Within this block, the type of 'value' is narrowed down to 'number'
            console.log(value.toFixed(2));
        }
    

    
        const value: unknown = 'Hello TypeScript';

        if (isNumber(value)) {
            // This line will result in a compile-time error, as 'value' is still considered 'unknown'
            console.log(value.toFixed(2));
        }

        // Using a type assertion to treat 'value' as 'string'
        console.log((value as string).toUpperCase());
    

What are 'Literal Type Widening' and 'Numeric Separators' in TypeScript?

Summary:

Detailed Answer:

'Literal Type Widening' in TypeScript:

'Literal Type Widening' refers to the behavior in TypeScript where the type of a variable or parameter is widened from its specific literal value to a broader type. In other words, when a literal type is assigned to a variable or parameter, TypeScript will automatically infer a broader type for it instead of preserving the exact literal type. This widens the type to provide more flexibility when working with the variable or parameter.

• Example: Consider the following code snippet:

```typescript
let a = 10; // Type of 'a' is number
let b = "hello"; // Type of 'b' is string
let c = true; // Type of 'c' is boolean
```

Here, the types of variables 'a', 'b', and 'c' are automatically inferred by TypeScript based on the values assigned to them. These types are widened to their respective broader types instead of being preserved as literals.

• Advantages:

• Allows for more flexibility when working with literal values.
• Enables the use of variables or parameters in a wider range of contexts.

'Numeric Separators' in TypeScript:

'Numeric Separators' in TypeScript refer to a feature that allows for improved readability of numeric literals by using underscore (_) as a separator between groups of digits. This feature is particularly useful when working with large numbers that may be difficult to read or understand at a glance.

• Example:

```typescript
let population = 7_594_000_000; // Equivalent to 7,594,000,000
```

Here, the underscore (_) serves as a visual separator and does not affect the value of the numeric literal. It improves readability and makes the number easier to comprehend.

• Advantages:

• Enhances code readability by making large numbers more understandable.
• Minimizes the risk of errors when dealing with complex or lengthy numeric literals.

Explain the 'unknown' vs 'any' types in TypeScript.

Summary:

Detailed Answer:

'unknown' vs 'any' types in TypeScript

In TypeScript, the 'unknown' and 'any' types are used to handle situations when the type of a value is not known at compile-time. However, there are significant differences between these two types and when to use them.

The 'any' type allows for values of any type and essentially disables type checking, making it less desirable compared to other more specific types. It is often used when the type of a variable is uncertain or when working with external JavaScript libraries without type definitions.

On the other hand, the 'unknown' type was introduced in TypeScript 3.0 as a safer alternative to 'any'. With 'unknown', the type is still not known, but you cannot perform any operations on an 'unknown' value without first narrowing its type explicitly or using type assertions. This enforces type safety and prevents unintentional misuse.

• Example: Declaring variables with 'any' and 'unknown'

let value1: any;
let value2: unknown;

• Type assignment: Using 'any' and 'unknown'

value1 = 10; // No type checking
value2 = 10; // No type checking

const result1 = value1.toFixed(2); // No compiler error
const result2 = value2.toFixed(2); // Compiler error: Object is of type 'unknown'

As shown in the example, using 'any' allows for any operation to be performed on the value without restriction, while using 'unknown' enforces strict type checking and prevents potential runtime errors. It is generally recommended to use 'unknown' instead of 'any' whenever possible to ensure type safety.

In summary, both 'unknown' and 'any' provide flexibility in handling uncertain types in TypeScript. However, 'unknown' provides better safety by enforcing explicit type narrowing or type assertions, reducing the likelihood of runtime errors. It is generally considered a safer alternative to 'any' and should be preferred in TypeScript codebases.