Textnotes

Typescript Interview Questions & Answers

What is TypeScript and how does it differ from JavaScript?

TypeScript is a statically-typed superset of JavaScript, developed and maintained by Microsoft. It enables enhanced code maintainability and predictability. After compiling, TypeScript code is transpiled into standard, browser-compatible JavaScript.

Key distinctions between TypeScript and JavaScript include the use of type annotations, the ability to work with existing JavaScript code, and more.

TypeScript Features & Benefits

• Type System: Offers static typing, allowing developers to define the type of variables, parameters, and return values. This helps catch errors during development, reducing runtime issues.
• Advanced Language Features: Incorporates modern ECMAScript syntax and features, often before they are rolled out in JavaScript. Additionally, TypeScript brings functional programming patterns, classes, and access modifiers (such as public and private)
• Compatibility with JavaScript: TypeScript can interpret existing JavaScript code with minor or no modifications.
• Tooling and Extra Safety: Provides enhanced autocompletion, refactoring, and documentation via TypeScript-aware tools. TypeScript helps catch and rectify common programming errors without needing to run the code.
• ECMAScript Compatibility: TypeScript allows developers to target different ECMAScript versions, ensuring the generated JavaScript is compatible with the targeted browsers.
• Code Structure & Readability: Promotes maintainability by enforcing a defined coding structure and fostering code clarity.

TypeScript's Role in Modern Development

• Workplace Adaptability: TypeScript is used in an extensive range of projects, from small utilities to large-scale applications.
• Community Support: Supported by a vibrant developer community, TypeScript benefits from frequent updates, bug fixes, and useful extensions.
• On-Going Development: A robust language server furnishes accurate tooling feedback, such as linting and error suggestions in real time.
• Rapid Enhancement: The TypeScript team consistently introduces new features and reinforces existing ones.

Can you explain what is meant by "TypeScript is a superset of JavaScript"?

TypeScript is often described as a "superset of JavaScript" because every valid JavaScript code is also a valid TypeScript code.

TypeScript is designed in a way that it fully embraces existing JavaScript syntax and functionality. This ensures a smooth transition for developers wishing to adopt or migrate to TypeScript.

Key TypeScript Features On Top of JavaScript

• Type Definitions: TypeScript introduces static typing through type annotations. These are optional, enabling gradual adoption for existing codebases that might not need them.
• Newer JavaScript Features: TypeScript extends JavaScript syntax, providing support for the latest ECMAScript standards more effectively through its compiler, even when the underlying JavaScript engine might not support them yet.
• Tooling and Error Detection: TypeScript offers robust type-checking, increased code readability, and stronger compile-time error detection.

Code Demonstration
Here is the TypeScript code:

        
            let num: number = 5;
            num = "this will raise a type error";
        
    

What are the basic types available in TypeScript?

TypeScript provides an assortment of basic types for different kinds of data, such as numbers, strings, boolean values, arrays, tuples and more.
Common Basic Types in TypeScript

• Boolean: Represents true/false values.
• Number: Applies to both integer and floating-point numbers.
• String: Refers to textual data.
• Array: Offers a flexible way to work with structured data.
• Tuple: Enables the definition of arrays with a fixed number of elements, each potentially of a different data type.
• Enum: Provides a set of named constants such as days or colors.
• Any: Offers a dynamic type, which can be used to bypass type-checking. It's typically best to be avoided, as it defeats the purpose of using TypeScript, which is primarily focused on static typing. However, there are certain use cases where it becomes necessary.
• Void: Typically used as the return type for functions that don't return a value.
• Null and Undefined: Allow for the assignment of null and undefined values, respectively. However, this isn’t enabled by default, and these are probably better handled using the strict mode settings in TypeScript.
• Never: Represents the type of values that never occur. For instance, the return type of a function that doesn't reach its end or always throws an error.
• Object: Any JavaScript object.
• Function: Denotes a function type.

Code Example: Basic TypeScript Types
Here is the TypeScript code:

        
// Boolean
let isActive: boolean = true;

// Number
let age: number = 30;

// String
let title: string = "Manager";

// Array
let scores: number[] = [85, 90, 78];
// or use a compact form: let scores: Array = [85, 90, 78];

// Tuple
let employee: [string, number, boolean] = ['John', 35, true];

// Enum
enum WeekDays { Monday, Tuesday, Wednesday, Thursday, Friday }
let today: WeekDays = WeekDays.Wednesday;

// Any
let dynamicData: any = 20;

// Void
function greet(): void {
  console.log("Hello!");
}

// Null and Undefined
let data: null = null;
let user: undefined = undefined;

// Never
function errorMessage(message: string): never {
  throw new Error(message);
}

// Object
let person: object = {
  name: 'John',
  age: 30
};

// Function
let calculate: Function;
calculate = function (x: number, y: number): number {
  return x + y;
};
        
    

How do you declare variables in TypeScript?

In TypeScript, variable declarations support different methodologies for declaring variables and their associated types.
Variable and Type Declaration Methods

• var
  This declaration can lead to variable hoisting and has global scope or function-level scope.

                  
                      var score: number = 100;
                  
              

• let
  Use let when you want to define variables within a block scope. This is the recommended default choice:

                  
                      let playerName: string = "John";
                  
              

• const
  const allows you to declare constants and is especially useful for maintaining data integrity:

                  
                      const apiKey: string = "your-api-key-here";
                  
              

• Function Scope
  All three methods (var, let, and const) are confined to their immediate function scope:

                  
                      function doSomething() {
                          let tempValue: number = 42;
                          var result: boolean = true;
                      }
                  
              

Rules for Variable Declaration and Initialization

• Order Matters: In TypeScript, a variable must be declared before being used. This is not a requirement in JavaScript, but good JavaScript practice is to declare a variable before using it.
  If you're dealing with complex or interconnected codes, it's a good practice to use the let and const declarations that ensure the block-level scoping, thus helping with potential hoisting issues.
• Static Types: TypeScript requires that you declare the data type of a variable (or let the system infer it) and then initialize it with a value of exactly the same type:

                  
                      let count: number;  // Declaration
                      count = 42;  // Allowed
                      count = "42";  // Error! Type 'string' is not assignable to type 'number'.
  
                  
              

• Type Inference: TypeScript can often infer the variable's type based on its initialization value. This reduces the need to specify a type explicitly.

                  
                      let word = "hello!";  // TypeScript infers the type as 'string' because of the initialization.
                  
              

Best Practices for Variable Declarations

• Use const Where You Can: This approach isn't always possible, especially when dealing with object properties. However, favor const for better code readability and to prevent accidental data mutations.
• Prefer let over var: let adheres better to block-level scoping and offers more predictability in the code.
• Initialize at Declaration: Although TypeScript allows initializations after declarations, it's best to declare and initialize variables simultaneously to improve code clarity and type safety.
• Prefer Type Annotations: Explicitly specifying variable types can improve code readability. However, when the variable type is obvious from the initialization, type inference should suffice.

What are Interfaces in TypeScript and how do they work?

In TypeScript, an interface defines the structure and types of its members. It acts as a contract for the required properties and methods, ensuring that implementing classes or objects match this structure.
Key Features of Interfaces

• Type Consistency: Objects that adhere to an interface's structure are considered compatible with it.
• Optional and Readonly Members: Interfaces allow for optional attributes and readonly members with the ? and readonly keywords respectively.
• Call Signatures: Interfaces can define method types, specifying function parameter and return types.
• Index Signatures: Useful for specifying that an object can have any number of properties, all of a certain type.

Core Use-Cases

• Standardizing Objects: Ensuring that disparate objects share a common structure for increased cohesiveness and ease of use.
• Contract Enforcement: Enforcing property and method requirements on classes to reduce errors and improve maintainability.

Code Example: Basic Interface
Here is the TypeScript code:

        
            interface Point {
                 x: number;
                 y: number;
            }

            function printPoint(p: Point) {
                console.log(`Point coordinates: (${p.x}, ${p.y})`);
            }

            let pointA = { x: 3, y: 7 }; // This object matches Point's structure
            let pointB = { x: 8 }; // This object is missing the 'y' property

            printPoint(pointA); // Output: Point coordinates: (3, 7)
            printPoint(pointB); // Compile-time error due to incorrect structure
        
    

Describe the Enum type and when you might use it.

The Enum is a data type that simplifies the representation and management of discrete, named values. It's a foundational tool to ensure type safety in TypeScript and a number of vital use-cases:

• Reducing 'Magic Values': When ensuring readability and preventing repetitive literal values, such as 1, 2, or 'red'
• Configuring Behaviour: influencing functionalities sets of associated values, such as HTTP methods, ordering or customer types.
• Ensuring Type Safety and Efficiency: The predefined set of valid members and a clear data type ensures that value assignments and operations are unequivocal and consistent.

Core Components

• Key: a unique identifier, typically a number or string.
• Value: Data associated with the key. If not provided, the key is used as the value.

Standard, String, and Heterogeneous Enums

• Standard Enum: Every key and value are of the same data type, typically numbers.
• >String Enum: All keys and values must be strings, ensuring consistent data representation.
• Heterogeneous Enum: Defines keys with both number or string values. However, due to the mixed-type nature of these enums, it's best to steer clear of them in most cases.

Code Example: Standard Enum
Here is the TypeScript code:

        
            enum HttpMethods {
                GET,
                POST,
                PUT,
                DELETE
            }

            const requestType: HttpMethods = HttpMethods.GET;
            // ❌ This is not allowed due to type safety
            // const requestType2: HttpMethods = 'GET';
        
    

In the example, the key GET is implicitly assigned the value 0.
Code Example: String Enum
Here is the TypeScript code:

        
            enum MediaTypes {
                Image = 'image',
                Video = 'video',
                Audio = 'audio'
            }

            const selectedType: MediaTypes = MediaTypes.Image;

            // ❌ This is not allowed due to type safety
            // const selectedType2: MediaTypes = MediaTypes.Video;

            // ✅ Accessing the value
            const associatedText: string = MediaTypes.Image;

            // ❌ This is not allowed due to type safety
            // const invalidType: MediaTypes = 'image';
        
    

the Enum helps ensure the proper data type and its values.

Pragmatic Use of Enums While Enums are a powerful tool for maintaining type safety, simplify associating related sets of values.
However, a consideration is that an Enum value can be inferred or forced to be of any key and underlying value type.
Potential Downsides of Enums

• Compilation Impact: When used in a broader context, or in data structures like arrays or maps, TypeScript generates additional code to convert Enum keys to their associated values.
• Memory Usage: Every usage of an Enum requires memory allocation for its value.

When a simple constant would suffice or if there's a need for a more dynamic relationship between keys and values, detailed types would be a better alternative.