TypeScript Comprehensive Documentation

Introduction

TypeScript is a strongly typed superset of JavaScript that compiles to plain JavaScript. It offers features such as static typing, interfaces, and advanced tooling capabilities that enhance productivity and code quality. This documentation is designed to provide a complete learning path for TypeScript, starting with JavaScript prerequisites and covering TypeScript basics, intermediate, and advanced concepts. Additionally, it includes comprehensive interview questions to ensure thorough preparation for job interviews.

Whether you are a beginner or an experienced developer, this guide will help you master TypeScript and become confident in applying it to real-world projects.

Prerequisites

Before diving into TypeScript, you should have a solid understanding of JavaScript. Key concepts include:

• Variables and Data Types
• Functions
• Objects and Arrays
• Promises and Async/Await
• ES6+ features like Arrow Functions, Template Literals, and Destructuring

Key Features

• Static Typing:
  • TypeScript introduces static typing, allowing developers to declare the types of variables, parameters, and return values at compile-time.
  • Static typing helps catch potential errors during development, offering a level of code safety that may not be achievable in pure JavaScript.
• Compatibility with JavaScript:
  • TypeScript is a superset of JavaScript, meaning that any valid JavaScript code is also valid TypeScript code.
  • Developers can gradually adopt TypeScript in existing JavaScript projects without the need for a full rewrite.
• Tooling Support:
  • TypeScript comes with a rich set of tools and features for development, including code editors (like Visual Studio Code) with built-in TypeScript support.
  • The TypeScript compiler (tsc) translates TypeScript code into plain JavaScript, allowing it to run in any JavaScript environment.
• Enhanced IDE Experience:
  • IDEs (Integrated Development Environments) that support TypeScript offer improved code navigation, autocompletion, and better refactoring capabilities.
  • TypeScript's type information enhances the overall development experience.
• Interfaces and Type Declarations:
  • TypeScript introduces concepts like interfaces and type declarations, enabling developers to define clear contracts for their code.
  • Interfaces help document the shape of objects, making it easier to understand and maintain the code.
• Compilation:
  • TypeScript code is transpiled to JavaScript during the compilation process, ensuring that the resulting code is compatible with various JavaScript environments and browsers.

Types of Languages

Strongly Typed vs Loosely Typed

The terms strongly typed and loosely typed refer to how programming languages handle types, particularly how strict they are about type conversions and type safety.

Strongly Typed Languages

• Compile-Time Enforcement: The data type of a variable is strictly enforced during compilation. This means that the compiler checks and ensures that variables are used in a way that is consistent with their types at compile time.
• Type Safety: The compiler or interpreter guarantees that operations are performed only on compatible types. This ensures that type-related errors are caught early in the development process.
• Early Error Detection: Type errors are identified and addressed at compile-time, providing early feedback to developers. This leads to increased reliability and reduces the likelihood of runtime errors.
• Examples of Strongly Typed Languages: Java, C#, TypeScript, Rust
• Benefits:
  • Lesser runtime errors
  • Stricter codebase
  • Easy to catch errors at compile time

Example: Code doesn’t work ❌

#include <iostream>
 
int main() {
  int number = 10;
  number = "text"; // Error: Cannot assign a string to an integer variable
  return 0;
}

Explanation:

• C++ is a statically-typed language, meaning variable types must be declared and are enforced at compile-time.
• In the given code, number is declared as an integer (int), and attempting to assign a string ("text") to it results in a compile-time error.
• The type mismatch between the declared type and the assigned value leads to a compilation failure.

Loosely Typed Languages

Loosely typed languages do not require explicit type definitions, allowing variables to change types dynamically.

• Runtime Type Association: Data types are associated with values at runtime. Unlike strongly typed languages, type information is not strictly bound during compilation but rather at the time of execution.

• Dynamic Type Changes: Variables can change types during execution, offering more adaptability. This flexibility allows for a dynamic approach to variable assignments and operations.

• Runtime Error Discovery: Type errors may be discovered during runtime, potentially leading to unexpected behaviors. This characteristic provides more freedom but requires careful handling.

• Examples: Python, JavaScript, Perl, Ruby

• Benefits:

  • Easy to write code
  • Fast to bootstrap
  • Low learning curve

Example: Code does work ✅

function main() {
  let number = 10;
  number = "text"; // No error, dynamic typing
  return number;
}

Explanation:

• JavaScript is a dynamically-typed language, allowing variables to change types during runtime.
• In the provided JavaScript code, number is initially assigned the value 10 (a number), and later, it is assigned the value "text" (a string).
• JavaScript allows this flexibility, and the code executes without type-related errors.

Considerations:

• Statically-typed languages like C++ provide early error detection during compilation, ensuring type consistency.
• Dynamically-typed languages like JavaScript offer flexibility but may require careful handling to avoid unexpected runtime errors.

Why Typescript

JavaScript is a powerful and widely used programming language, but it has a dynamic typing system, which means variable types are determined at runtime. While dynamic typing provides flexibility, it can lead to runtime errors that are challenging to catch during development.

What is TypeScript?

TypeScript is a programming language developed and maintained by Microsoft. It is a strict syntactical superset of JavaScript and adds optional static typing to the language.

Where/How Does TypeScript Code Run?

• TypeScript code never runs in your browser. Your browser can only understand JavaScript.
• JavaScript is the runtime language (the thing that actually runs in your browser or Node.js runtime).
• TypeScript is something that compiles down to JavaScript.
• When TypeScript is compiled down to JavaScript, you get type checking (similar to C++). If there is an error, the conversion to JavaScript fails.

TypeScript Compiler

• tsc is the official TypeScript compiler that you can use to convert TypeScript code into JavaScript.
• There are many other famous compilers/transpilers for converting TypeScript to JavaScript. Some popular ones are:
  • esbuild
  • swc

TypeScript: Bridging the Gap

People realized that JavaScript is a very powerful language but lacks types. TypeScript was introduced as a new language to add types on top of JavaScript, combining the flexibility of JavaScript with the safety and robustness of strong typing.

Conclusion

The choice between strongly typed and loosely typed languages depends on project requirements, developer preferences, and the balance between early error detection and flexibility during development. Each type has its advantages and considerations, influencing their suitability for specific use cases.

TypeScript offers the best of both worlds by giving you static typing while still keeping the flexibility of JavaScript. It has become popular for large projects where catching errors early and maintaining code quality are important.