TypeScript¶

TypeScript Version History¶

Below is a table detailing the TypeScript version history in descending order, highlighting the release dates, version numbers, and notable changes for each version. TypeScript, developed by Microsoft, is a typed superset of JavaScript that compiles to plain JavaScript. It's designed to add static types to the language, among other features, to improve the developer experience and the maintainability of large codebases.

Version Number	Release Date	Notable Changes
4.9	November 2022	- Introduction of `satisfies` operator for type checking. - Improved inference for generic functions.
4.8	August 2022	- Control flow analysis for destructured discriminated unions. - Improved narrowing for `in` operator.
4.7	May 2022	- ECMAScript module support in Node.js. - Improved type narrowing and control flow analysis.
4.6	February 2022	- Support for control flow analysis of aliased conditions. - Improved recursion depth checks.
4.5	November 2021	- Awaited type and `Promise` improvements. - `--module es2022` and `--moduleResolution node16`.
4.4	August 2021	- Control flow analysis for computed properties. - New flag for exact optional property types (`--exactOptionalPropertyTypes`).
4.3	May 2021	- `override` keyword and template string type improvements. - Separate write types for properties.
4.2	February 2021	- Rest elements in tuple types. - Smarter type alias preservation.
4.1	November 2020	- Template literal types. - Key remapping in mapped types.
4.0	August 2020	- Variadic tuple types. - Labeled tuple elements. - Class property inference from constructors.
3.9	May 2020	- Improved inference and `Promise.all` typing. - Speed improvements in the compiler/checker.
3.8	February 2020	- Type-only imports and exports. - ECMAScript private fields.
3.7	November 2019	- Optional chaining and nullish coalescing. - Assertion functions.
3.6	August 2019	- Stricter checking for iterators and generators. - More accurate array spread.
3.5	May 2019	- The `Omit` helper type. - Improved speed for `--incremental` compilations.
3.4	March 2019	- Const assertions. - Incremental compilation support.
3.3	January 2019	- Improved handling of union types and intersection types.
3.2	November 2018	- Strict bind, call, and apply checking. - Object spread and rest on generic types.
3.1	September 2018	- Mapped types on tuples and arrays. - `unknown` type.
3.0	July 2018	- Project references for easier management of multi-project setups. - `unknown` type as a safer alternative to `any`.
2.9	May 2018	- Import types using `import()` syntax. - Support for `--resolveJsonModule`.
2.8	March 2018	- Conditional types. - `ReadonlyArray` and `readonly` tuples.
2.7	January 2018	- Strict class property initialization checks. - Fixed length tuples.
2.6	October 2017	- Stricter checking for function types. - `--strictFunctionTypes` flag.
2.5	September 2017	- Optional catch clause variables. - `--checkJs` flag for checking JavaScript files.
2.4	June 2017	- Support for dynamic `import()` expressions. - String enums.
2.3	April 2017	- `--strictNullChecks` flag improvements. - Generator and iterator support.
2.2	February 2017	- Object type for non-primitive types. - Mixin support.
2.1	December 2016	- Keyof and lookup types. - Mapped types.
2.0	September 2016	- Introduction of `null` and `undefined` types. - Control flow based type analysis.
1.8	February 2016	- String literal types. - JSX support.
1.7	November 2015	- Async/await (for ES6 targets). - Polymorphic `this` type.
1.6	September 2015	- Support for React/JSX. - Class expressions.
1.5	July 2015	- Decorators and metadata reflection API. - Destructuring in declarations and assignments.
1.4	January 2015	- Union types. - `let` and `const` support.
1.3	November 2014	- `protected` modifier. - Tuple types.
1.2	June 2014	- Enumeration types. - Generic constraint checking.
1.1	April 2014	- Performance improvements. - Minor syntax enhancements.
1.0	October 2012	- Initial release.

TypeScript is a superset of JavaScript, meaning it builds upon and extends JavaScript with additional features. Here's a detailed comparison between TypeScript and JavaScript:

Static Typing: TypeScript introduces static typing, allowing you to specify the data types of variables. This helps catch type-related errors during development, enhancing code reliability. For example:

   let age: number = 30;

Strong Typing: TypeScript enforces stricter type checking compared to JavaScript. This can prevent unexpected type conversions or operations. For instance:

   let name: string = "John";
   name = 123; // Error: Type 'number' is not assignable to type 'string'.

Interfaces and Classes: TypeScript supports interfaces and classes, making it easier to define custom data structures and create object-oriented code.

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

   class Student implements Person {
     constructor(public name: string, public age: number) {}
   }

Advanced Tooling: TypeScript offers robust tooling with features like auto-completion, code navigation, and refactoring support in modern development environments like Visual Studio Code.
Compilation: TypeScript code is transpiled into JavaScript before execution, allowing you to use the latest JavaScript features while targeting specific ECMAScript versions.

JavaScript:¶

Dynamic Typing: JavaScript is dynamically typed, meaning variables can change their data type during runtime. This can lead to unexpected behavior if not carefully managed.

   let age = 30;
   age = "John"; // No type error in JavaScript.

Loose Typing: JavaScript is more permissive regarding type conversions, which can sometimes result in unexpected outcomes.

   console.log(5 + "5"); // Outputs "55" (string concatenation) in JavaScript.

No Interfaces: JavaScript lacks built-in support for interfaces and classes, making it less suitable for complex object-oriented designs.
Tooling: While JavaScript has improved tooling over the years, it may not offer the same level of developer assistance as TypeScript.
Execution: JavaScript code is executed directly by browsers or Node.js without the need for transpilation.

In summary, TypeScript adds static typing, stricter type checking, and advanced tooling to JavaScript, making it a preferred choice for large-scale applications and projects where code maintainability and error prevention are crucial. JavaScript, on the other hand, is a versatile language used for a wide range of applications, including web development, and it remains essential for front-end and back-end web development. The choice between them depends on project requirements and developer preferences.

TypeScript vs. JavaScript: Use Cases¶

To provide a clearer understanding of when to use TypeScript or JavaScript, let's explore some common use cases for each:

When to Use TypeScript:¶

Large-scale Projects: TypeScript shines in large codebases where maintaining code quality and preventing type-related errors is crucial. It helps catch potential issues at compile-time rather than runtime.
Collaborative Development: In team-based development environments, TypeScript's type annotations and interfaces make it easier for team members to understand and collaborate on the codebase.
Enterprise Applications: For building complex, mission-critical applications in industries like finance, healthcare, or aerospace, TypeScript's strong typing provides an additional layer of security and reliability.
Library Development: TypeScript is an excellent choice for creating reusable libraries or frameworks that need to provide clear and well-documented APIs.
Transitioning from JavaScript: If you have an existing JavaScript project, TypeScript can be gradually adopted by adding type annotations to existing code, allowing for a smoother transition.

When to Use JavaScript:¶

Rapid Prototyping: JavaScript's loose typing and flexibility make it well-suited for quickly prototyping ideas or building small to medium-sized projects without the overhead of type definitions.
Front-End Web Development: JavaScript remains the primary language for client-side web development. Most web browsers support JavaScript directly, making it the go-to language for building interactive web applications.
Node.js Applications: When developing server-side applications with Node.js, JavaScript is the natural choice, and you can use popular frameworks like Express.js.
Small Scripts: For writing small scripts or one-off automation tasks, JavaScript's simplicity can be more convenient than setting up a TypeScript project.
Ecosystem Familiarity: If you are already comfortable with JavaScript and don't require the advanced features of TypeScript, sticking with JavaScript can simplify your development process.

In conclusion, TypeScript offers enhanced features and static typing for projects where type safety and code maintainability are paramount. JavaScript, on the other hand, remains essential for web development, especially on the front end, and is suitable for smaller projects and rapid prototyping. The choice between the two depends on the specific requirements of your project and your team's expertise.

Benefits of Using TypeScript¶

TypeScript provides several benefits when incorporated into a software development project. Here are some of the key advantages:

1. Static Typing and Type Safety:¶

TypeScript introduces static typing, allowing developers to specify the data types of variables, function parameters, and return values. This offers several advantages:

Early Error Detection: Type-related errors are caught during development at compile-time rather than runtime, reducing the likelihood of bugs in production.
Improved Code Quality: The use of type annotations makes code more self-documenting and helps maintain a higher level of code quality.
Enhanced Refactoring: IDEs and text editors can provide better code suggestions and refactoring tools based on type information.

2. Improved Code Maintainability:¶

TypeScript promotes clean and maintainable code through features like interfaces and classes, which enable developers to define clear and structured data contracts and object-oriented designs. This leads to:

Readability: Code becomes more readable and self-explanatory, making it easier for developers to understand and work with each other's code.
Modularity: TypeScript supports modules, facilitating the organization of code into reusable and manageable components.
Code Reusability: Interfaces and classes encourage code reusability and a more structured approach to development.

3. Enhanced Tooling:¶

TypeScript is well-supported by modern development environments like Visual Studio Code. This results in:

Code Completion: Auto-completion features provide suggestions as you type, reducing errors and speeding up development.
Code Navigation: Developers can easily navigate through codebases, making it simpler to understand and maintain large projects.
Integrated Development Experience: TypeScript integrates seamlessly with development tools, linters, and debugging utilities.

4. Ecosystem Compatibility:¶

TypeScript is designed to work with existing JavaScript code and libraries. This means:

Gradual Adoption: You can gradually add TypeScript to existing JavaScript projects by adding type annotations as needed, making migration less disruptive.
Access to JavaScript Ecosystem: TypeScript provides access to the vast JavaScript ecosystem, including popular libraries and frameworks, without compatibility issues.

5. Strong Community Support:¶

TypeScript has gained a strong and active community of developers. This leads to:

Rich Documentation: A wealth of tutorials, documentation, and community resources are available to assist developers in learning and using TypeScript effectively.
Third-Party Packages: Many third-party libraries and frameworks offer TypeScript typings, improving type safety when using these tools.

6. Better Collaboration:¶

TypeScript's type annotations and interfaces make codebases more understandable, promoting collaboration in development teams. Benefits include:

Reduced Misunderstandings: Type information helps prevent misunderstandings between team members about the expected shape of data and function interfaces.
Clearer APIs: Interfaces make it easier to define and document APIs, aiding in the development of reusable components and libraries.

7. Enhanced Productivity:¶

By reducing the likelihood of type-related bugs, improving code quality, and offering advanced tooling, TypeScript can lead to increased developer productivity and faster development cycles.

In summary, TypeScript's benefits include enhanced type safety, improved code maintainability, better tooling, compatibility with existing JavaScript code, a strong community, and increased productivity. These advantages make TypeScript a valuable choice for projects where code quality, maintainability, and collaboration are essential.

Static Typing in TypeScript¶

Static typing in TypeScript refers to the practice of explicitly specifying the data types of variables, function parameters, and return values at compile-time, before the code is executed. This is in contrast to dynamic typing, where data types are determined and checked at runtime, as is the case in JavaScript.

Here's a conceptual explanation of static typing and how it helps in code development:

1. Type Annotations:¶

In TypeScript, you can use type annotations to declare the data type of a variable or a function parameter. For example:

let age: number = 30;

In this example, age is explicitly declared as a number type. This means that age can only hold numeric values, and any attempt to assign a non-numeric value will result in a compile-time error.

2. Type Inference:¶

TypeScript also features type inference, which means that the compiler can often automatically determine the data type based on the value assigned. For instance:

let name = "John"; // TypeScript infers 'name' as a string.

Type inference helps reduce the need for explicit type annotations while still providing type safety.

3. Compile-Time Checks:¶

Static typing enables the TypeScript compiler to perform thorough type checks during the development process. These checks help in several ways:

Error Detection: Type-related errors, such as attempting to perform unsupported operations on a variable or passing the wrong data type to a function, are detected and reported as compile-time errors. This prevents type-related bugs from reaching the runtime environment.
Code Quality: Type annotations and checks lead to more self-documenting code, making it easier for developers to understand the intended data types and interfaces of variables and functions. This improves code quality and readability.
Enhanced Tooling: IDEs and code editors that support TypeScript can provide developers with auto-completion suggestions, type information, and real-time feedback about potential type issues, leading to a more productive development experience.

4. Type Safety:¶

Static typing promotes type safety in your codebase. This means that variables are less likely to hold unexpected or incompatible values, leading to fewer runtime errors. Type safety is especially valuable in large and complex codebases, as it helps prevent subtle bugs and ensures that data flows correctly through the application.

5. Documentation and Understanding:¶

By specifying data types through type annotations, TypeScript code becomes more self-explanatory. Developers can easily understand the expected data structures and function signatures, making collaboration and maintenance more straightforward.

In summary, static typing in TypeScript provides several benefits to code development:

Early error detection, preventing type-related bugs.
Improved code quality and readability.
Enhanced tooling support for developers.
Type safety to ensure data integrity.
Clearer documentation and understanding of code.

By incorporating static typing, TypeScript strikes a balance between the flexibility of JavaScript and the rigor of statically-typed languages, making it a valuable choice for projects where code reliability and maintainability are essential.

Declare Variables¶

In TypeScript, you can declare a variable with a specific type using type annotations or type inference. Here are examples of both methods:

1. Using Type Annotations (Explicit Type Declaration):¶

To explicitly declare the type of a variable, you can use a colon (:) followed by the desired type immediately after the variable name. Here's an example:

let age: number; // Declaring 'age' as a number type
age = 30;        // Assigning a numeric value to 'age'

let name: string; // Declaring 'name' as a string type
name = "John";   // Assigning a string value to 'name'

In the above code, we've declared two variables, age and name, with specific data types, number and string, respectively. These type annotations indicate the expected type of data that can be stored in each variable.

2. Using Type Inference (Implicit Type Declaration):¶

TypeScript also allows you to declare variables without explicitly specifying their types. Instead, the compiler infers the type based on the assigned value. Here's an example:

let age = 30;      // TypeScript infers 'age' as a number type
let name = "John"; // TypeScript infers 'name' as a string type

In this case, TypeScript uses type inference to determine that age should have a number type and name should have a string type based on the initial assignments.

3. Type Annotations for Function Parameters and Return Values:¶

You can also use type annotations to declare the types of function parameters and return values. Here's an example:

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

In this function add, both a and b are explicitly declared as number types, and the function is expected to return a number as well.

4. Custom Types and Interfaces:¶

In addition to basic data types like number and string, TypeScript allows you to create custom types and interfaces to define complex data structures. For example:

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

let user: Person = {
  name: "Alice",
  age: 25,
};

Here, we define a custom type Person using an interface and then declare a variable user of type Person. This ensures that user must adhere to the structure defined in the Person interface.

In summary, TypeScript provides various ways to declare variables with specific types:

Using type annotations (explicit type declaration).
Using type inference (implicit type declaration).
Specifying types for function parameters and return values.
Defining custom types and interfaces for complex data structures.

These mechanisms help you create more reliable and self-documenting code by clearly indicating the expected types of your variables and function parameters.

Type Assertion in TypeScript¶

Type assertion, also known as type casting, is a feature in TypeScript that allows a developer to explicitly specify the data type of a value when the TypeScript compiler cannot infer it accurately. This is typically used when you, as the developer, have more information about the type of a value than TypeScript can determine through type inference. Type assertions are used to inform the compiler about the expected type and suppress type-checking errors.

Here's an explanation of type assertions and when they should be used:

Syntax of Type Assertion:¶

Type assertion in TypeScript can be done in two ways:

Angle Bracket Syntax (Older Style):

   let variableName = <Type>value;

For example:

   let myValue = <string>"Hello";

As Keyword (Preferred Style):

   let variableName = value as Type;

For example:

   let myValue = "Hello" as string;

When to Use Type Assertion:¶

Type assertion should be used cautiously, and only when you are certain about the actual data type of a value. Here are some scenarios when type assertion can be beneficial:

Interoperability with JavaScript Libraries: When working with JavaScript libraries or APIs that do not provide type definitions, type assertion can be used to inform TypeScript about the types of values returned by those libraries. This is common when using third-party libraries or browser APIs.

   const result = document.querySelector("#myElement") as HTMLElement;

Migrating from JavaScript: During the gradual transition of a JavaScript codebase to TypeScript, you may need to use type assertions to initially assign types to variables or objects until you refactor the code to include proper type annotations.

   let myValue = someFunctionReturningAny() as string;

Union Types and Type Narrowing: Type assertion can be used in conjunction with type narrowing techniques (such as conditional checks) to tell TypeScript that a value should be considered as a specific type within a union type.

   let myValue: string | number = "Hello";

   if (typeof myValue === "string") {
     // Inside this block, TypeScript knows 'myValue' is a string.
     console.log(myValue.toUpperCase());
   }

Overriding Incorrect Inference: In some cases, TypeScript may infer a broader or more generic type than you intend. Type assertion can be used to override this inference and explicitly specify the intended type.

   let myData = ["apple", "banana", "cherry"];
   let firstFruit = myData[0] as string; // Explicitly specifying 'string' type.

Caution and Best Practices:¶

It's essential to exercise caution when using type assertions because they essentially instruct TypeScript to trust the developer's judgment regarding type safety. Here are some best practices:

Use type assertions sparingly, as they can lead to runtime errors if misused.
Whenever possible, prefer type annotations over type assertions for better code readability and maintainability.
Be confident about the type you are asserting, and ensure that the assertion is consistent with the actual data at runtime.

In summary, type assertion in TypeScript is a tool that allows you to manually specify the type of a value when TypeScript's type inference is insufficient. It should be used with care and in situations where you have a strong understanding of the actual data types involved, such as when working with external JavaScript code or gradually transitioning to TypeScript.

Interfaces vs Classes¶

In TypeScript, interfaces and classes serve distinct purposes and have different characteristics. Here's a detailed comparison of interfaces and classes:

Interfaces:¶

Purpose:
- Interfaces: Interfaces define contracts for object shapes and structures. They specify what properties and methods an object should have without providing an implementation. Interfaces are primarily used to establish a common structure for objects and ensure they adhere to that structure.
Implementation:
- Interfaces: Interfaces do not contain any actual code or implementation. They only declare the structure of objects, including property names, types, and method signatures.
Inheritance:
- Interfaces: Interfaces can extend other interfaces to inherit their members and can be implemented by multiple classes or objects.
Constructor:
- Interfaces: Interfaces do not have constructors because they are not used to create objects directly. They are used as blueprints for classes and objects.
Access Modifiers:
- Interfaces: Interface members (properties and methods) are always public and cannot have access modifiers like private or protected.
Inheritance vs. Implementation:
- Interfaces: Interfaces focus on inheritance, meaning a class can implement multiple interfaces to inherit their structure and define how it behaves.
Examples:

   interface Shape {
     area(): number;
   }

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

Classes:¶

Purpose:
- Classes: Classes are used to create objects that can have both data (properties) and behavior (methods). They define the blueprint for creating instances of objects with specific properties and methods.
Implementation:
- Classes: Classes contain actual implementation details, including constructor functions, properties, and methods. They define how objects are created and what they can do.
Inheritance:
- Classes: Classes can inherit from other classes using inheritance, allowing for code reuse and extension of behavior. TypeScript supports single inheritance.
Constructor:
- Classes: Classes have constructors that are used to initialize object instances when they are created. Constructors may accept parameters to set initial values.
Access Modifiers:
- Classes: Class members (properties and methods) can have access modifiers like private, protected, or public, controlling their visibility and accessibility.
Inheritance vs. Implementation:
- Classes: Classes focus on both inheritance (via superclass-subclass relationships) and implementation (defining behavior).
Examples:

   class Circle implements Shape {
     constructor(public radius: number) {}
     area(): number {
       return Math.PI * this.radius * this.radius;
     }
   }

   class Employee {
     private id: number;
     constructor(public name: string, id: number) {
       this.id = id;
     }
   }

Interfaces are used to define contracts for object structures and do not provide any implementation. They focus on inheritance and can be implemented by multiple classes or objects.
Classes are used to create objects with both data and behavior. They contain implementation details, constructors, methods, and properties. They support inheritance and encapsulation through access modifiers.

In practice, interfaces are often used to define common structures for objects, while classes are used to create objects with specific behavior and state. Both interfaces and classes are essential tools in TypeScript for designing and modeling software components.

Custom Types¶

In TypeScript, you can create custom types using type aliases and interfaces. Both constructs allow you to define custom data structures and shapes. Here's how you can create custom types using each approach:

Using Type Aliases:¶

Type aliases are created using the type keyword. They are useful for defining custom data types and can represent a variety of types, including primitive types, union types, and complex data structures.

1. Defining a Simple Type Alias:¶

type Age = number;

In this example, we've defined a type alias Age that represents a numeric value.

2. Creating Union Types:¶

type Result = "success" | "error";

Here, the Result type alias represents a value that can be either "success" or "error."

3. Creating Complex Data Structures:¶

type Point = {
  x: number;
  y: number;
};

The Point type alias defines a custom data structure with two properties, x and y, both of type number.

Using Interfaces:¶

Interfaces are used to define custom object shapes, including the structure of properties and method signatures. They are particularly helpful when modeling objects that adhere to a specific contract.

1. Defining an Interface for an Object Shape:¶

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

Here, the Person interface defines an object shape with two properties, name (a string) and age (a number).

2. Extending Interfaces:¶

You can extend interfaces to create more specialized interfaces. For example:

interface Employee extends Person {
  employeeId: string;
}

The Employee interface extends the Person interface, adding an employeeId property.

3. Using Optional Properties:¶

Interfaces can also include optional properties denoted by a ?:

interface Car {
  make: string;
  model: string;
  year?: number;
}

In this case, the year property is optional, meaning it may or may not be present in objects adhering to the Car interface.

Choosing Between Type Aliases and Interfaces:¶

Use type aliases when you want to create custom types that represent simple values, unions, or complex structures. They are versatile and can represent various types.
Use interfaces when you need to define the shape of objects, including properties and method signatures. Interfaces are primarily used for object-oriented programming and modeling object contracts.

In many cases, the choice between type aliases and interfaces depends on your specific use case and coding style preferences. TypeScript allows you to mix and match them as needed in your projects.

Generics in TypeScript¶

Generics in TypeScript are a powerful feature that allows you to create reusable and flexible components by parameterizing types. They enable you to write functions, classes, and interfaces that can work with a variety of data types, making your code more versatile and type-safe. Generics are denoted by angle brackets <T> or any other type parameter name.

Here's an explanation of generics in TypeScript and an example of how they can be used:

Generics in Functions:¶

Let's start with a simple example of a generic function. Suppose you want to create a function that swaps the values of two variables of any data type:

function swap<T>(a: T, b: T): [T, T] {
  return [b, a];
}

In this code: - <T> is a type parameter, representing a placeholder for the actual data type(s) that will be provided when calling the function. - The function takes two parameters, a and b, both of type T. - It returns a tuple [T, T] containing the swapped values.

Now, you can use this swap function with various data types:

let num1 = 10;
let num2 = 20;
let str1 = "Hello";
let str2 = "World";

console.log(swap(num1, num2)); // Output: [20, 10]
console.log(swap(str1, str2)); // Output: ["World", "Hello"]

The swap function works for both numbers and strings because it's generic and adapts to the provided data types.

Generics in Classes:¶

Generics can also be used in classes to create reusable data structures. Here's an example of a generic Stack class:

class Stack<T> {
  private items: T[] = [];

  push(item: T): void {
    this.items.push(item);
  }

  pop(): T | undefined {
    return this.items.pop();
  }
}

const numberStack = new Stack<number>();
numberStack.push(1);
numberStack.push(2);
console.log(numberStack.pop()); // Output: 2

const stringStack = new Stack<string>();
stringStack.push("A");
stringStack.push("B");
console.log(stringStack.pop()); // Output: "B"

In this example: - The Stack class is defined as a generic class with a type parameter T. - It can be instantiated with different types, such as number and string. - The push method allows you to add items of the specified type to the stack. - The pop method returns an item of type T or undefined if the stack is empty.

Benefits of Generics:¶

Generics provide several benefits in TypeScript: - Reusability: You can write code that works with various data types without duplicating logic. - Type Safety: TypeScript enforces type correctness, reducing the chance of runtime errors. - Abstraction: Generics enable you to create flexible and abstract components. - Code Clarity: Generics make code more self-documenting, as type information is explicit.

Generics are a fundamental feature in TypeScript, and they play a significant role in building robust and reusable software components.

Type Inference¶

Type inference is a fundamental feature in TypeScript that allows the compiler to automatically determine the data type of a variable based on its initialization value and how it is used within the code. TypeScript uses type inference to statically analyze and infer types during the compilation process. Here's an explanation of the role of type inference and how TypeScript determines the type of a variable:

Role of Type Inference:¶

Type inference serves several important purposes in TypeScript:

Static Typing: TypeScript aims to provide static typing, which means that the types of variables and expressions are known at compile-time, not just at runtime. Type inference plays a central role in achieving this goal.
Type Safety: Type inference helps catch type-related errors early in the development process, reducing the likelihood of bugs and runtime errors.
Code Clarity: By inferring types, TypeScript makes code more self-documenting, as developers can understand the expected types of variables and expressions without explicit type annotations.

Mechanism of Type Inference:¶

TypeScript employs the following mechanisms to determine the type of a variable:

Initialization Value: TypeScript often infers the type of a variable based on the value it is initialized with. For example:

   let name = "John"; // TypeScript infers 'name' as a string.
   let age = 30;      // TypeScript infers 'age' as a number.

In these cases, the types of name and age are inferred from their respective initialization values.

Contextual Typing: TypeScript considers the context in which a variable is used to infer its type. For instance, if you declare a variable and then assign it a value later, TypeScript infers its type based on the assigned value:

   let message;  // TypeScript infers 'message' as 'any'.
   message = "Hello, TypeScript!"; // 'message' is now a string.

Initially, message is inferred as any because it has no initialization value. After assigning a string, its type becomes string.

Type Inference with Arrays and Objects: TypeScript can infer array and object types based on their contents:

   let fruits = ["apple", "banana", "cherry"]; // 'fruits' is inferred as 'string[]'.
   let person = { name: "Alice", age: 25 };    // 'person' is inferred as '{ name: string, age: number }'.

Here, TypeScript infers the array type and object shape from the provided values.

Type Inference for Function Return Types: When you define a function without specifying its return type, TypeScript infers the return type based on the return statement:

   function add(a: number, b: number) {
     return a + b; // TypeScript infers the return type as 'number'.
   }

The return type of add is inferred as number because the function returns the result of adding two numbers.

Type Inference in Control Flow Analysis: TypeScript performs control flow analysis to narrow down variable types based on conditional statements and type guards. For example:

   let data: string | number = "Hello";
   if (typeof data === "string") {
     // Inside this block, 'data' is inferred as 'string'.
     console.log(data.toUpperCase());
   } else {
     // Inside this block, 'data' is inferred as 'number'.
     console.log(data.toFixed(2));
   }

TypeScript narrows the type of data within each block based on the condition.

In summary, type inference in TypeScript relies on variable initialization values, contextual typing, context-based analysis, and control flow analysis to determine the types of variables and expressions. This mechanism helps ensure type safety and provides a smoother development experience by reducing the need for explicit type annotations in many cases.

The "any" Type¶

In TypeScript, the any type is a special type that represents a value of any data type. It essentially disables static type checking for the variable it is applied to. While the any type can be useful in certain situations, it should be used cautiously, as it bypasses TypeScript's type safety features. Here's a discussion of when the any type should be used and when it is discouraged:

When to Use the "any" Type:¶

Migration from JavaScript: The any type can be helpful when transitioning an existing JavaScript codebase to TypeScript. It allows you to gradually introduce static typing to your code without making extensive changes all at once.

   let data: any = fetchDataFromAPI(); // The API response type is unknown.

Working with Dynamic Data: When dealing with data from sources like external APIs or user input where the data's shape is unknown at compile time, the any type can be used temporarily until the data's structure is better understood.

   const userInput: any = getUserInput();
   // Later, when you have more information about 'userInput':
   const username: string = userInput.username;

Opting Out of Type Checking: In rare cases, you might want to explicitly disable type checking for a particular variable or piece of code due to specific requirements or limitations. The any type provides a way to do this.

   let config: any = loadConfigFile();
   // Explicitly indicating that you are intentionally bypassing type checking.
   // Use with caution.

When to Discourage the Use of the "any" Type:¶

Loss of Type Safety: The primary drawback of using the any type is that it removes the benefits of static type checking. Type-related errors won't be caught by the TypeScript compiler, potentially leading to runtime errors.
Reduced Code Clarity: Code that heavily relies on the any type can become less self-documenting and harder to understand, as type information is not evident from the code itself.
Compatibility with TypeScript Features: The any type does not take advantage of TypeScript's type inference, auto-completion, and other tooling features, which are designed to improve code quality and developer productivity.
Maintenance Challenges: As codebases grow, it can become increasingly challenging to maintain and refactor code that extensively uses the any type. This can lead to difficulties in understanding and modifying the code over time.
Potential for Bugs: When using the any type, you risk introducing type-related bugs that might go unnoticed until runtime. These bugs can be challenging to debug and fix.

Alternative Approaches:¶

Instead of relying on the any type, consider the following alternatives in TypeScript:

Type Annotations: Whenever possible, provide explicit type annotations for variables, function parameters, and return values to leverage TypeScript's type checking and take full advantage of the language's features.
Union Types: Use union types (|) to represent values that can have multiple types while still maintaining type safety. This approach allows you to define specific types that are valid for a variable.
Unknown Type: Starting with TypeScript 3.0, you can use the unknown type, which is a safer alternative to any as it requires explicit type assertions or type checks before using the value.

let data: unknown = fetchDataFromAPI();
if (typeof data === "string") {
  const username: string = data; // Type check required
}

In conclusion, while the any type has its uses, it should be employed sparingly and with a clear understanding of the trade-offs involved. It is generally discouraged in TypeScript codebases that aim to leverage the language's static type checking for improved code quality and maintainability. Consider alternative approaches that provide better type safety and code clarity when possible.

Access Modifiers¶

Access modifiers in TypeScript are keywords that define the visibility and accessibility of class members (properties and methods) within a class and its subclasses. TypeScript provides three primary access modifiers: public, private, and protected. These modifiers control how class members can be accessed from outside the class.

Here's an overview of each access modifier and how they affect class members:

1. `public` Access Modifier:¶

Visibility: Class members with the public access modifier are accessible from anywhere, both within the class and from external code.
Example:

class Person {
  public name: string;

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

  greet() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

const person = new Person("John");
console.log(person.name); // Accessing 'name' property with 'public' access.
person.greet();           // Accessing 'greet' method with 'public' access.

In this example, the name property and greet method have public access and can be accessed externally.

2. `private` Access Modifier:¶

Visibility: Class members with the private access modifier are only accessible within the class in which they are defined. They are not accessible from external code or even subclasses.
Example:

class Person {
  private age: number;

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

  getAge() {
    return this.age;
  }
}

const person = new Person(30);
console.log(person.getAge()); // Accessing 'getAge' method, which accesses 'age' property.
console.log(person.age);      // Error: 'age' is private and cannot be accessed directly.

In this example, the age property has private access and can only be accessed through the getAge method within the class.

3. `protected` Access Modifier:¶

Visibility: Class members with the protected access modifier are accessible within the class in which they are defined and in derived (child) classes. They are not accessible from external code.
Example:

class Animal {
  protected species: string;

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

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

const dog = new Dog("Canine");
dog.bark();                 // Accessing 'bark' method from 'Dog' class.
console.log(dog.species);   // Error: 'species' is protected and cannot be accessed externally.

In this example, the species property has protected access, allowing it to be accessed within the Animal class and its derived class Dog.

public: Members are accessible from anywhere, both within and outside the class.
private: Members are only accessible within the class where they are defined.
protected: Members are accessible within the class and its derived classes (subclasses).

Access modifiers help enforce encapsulation and control the visibility of class members, contributing to the overall design, maintainability, and security of TypeScript code. The choice of access modifier depends on the desired level of encapsulation and whether you want to expose or restrict access to class members.

Asynchronous Programming: async/await and Promises¶

TypeScript provides robust support for asynchronous programming using two key features: async/await and Promises. These mechanisms enable you to write non-blocking, asynchronous code that can perform tasks such as fetching data from APIs, reading files, or waiting for events without freezing the application. Here's an overview of how TypeScript supports asynchronous programming:

Promises:¶

A Promise is a built-in TypeScript feature that represents a value that may not be available yet but will be resolved in the future. It is typically used to handle asynchronous operations, such as making HTTP requests or reading files, where the result is not immediately available.

Promises have three states: - Pending: The initial state when the Promise is created and hasn't resolved or rejected yet. - Fulfilled (Resolved): The state when the Promise successfully completes its operation, and a value is available. - Rejected: The state when an error occurs during the Promise's execution.

Here's an example of using Promises in TypeScript:

function fetchData(): Promise<string> {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = "Async data";
      resolve(data);
      // If an error occurs: reject(new Error("Something went wrong"));
    }, 1000);
  });
}

fetchData()
  .then((result) => {
    console.log("Data received:", result);
  })
  .catch((error) => {
    console.error("Error:", error);
  });

In this example: - fetchData returns a Promise that simulates fetching data asynchronously. - The then method is used to handle the successful resolution of the Promise. - The catch method is used to handle any errors that occur during the Promise execution.

`async/await`:¶

async/await is a powerful feature in TypeScript that simplifies asynchronous code and makes it look more like synchronous code, improving code readability and maintainability. It allows you to write asynchronous code that appears to run sequentially, making it easier to understand and debug.

Here's how async/await is used in TypeScript:

async function fetchData(): Promise<string> {
  return new Promise((resolve) => {
    setTimeout(() => {
      const data = "Async data";
      resolve(data);
    }, 1000);
  });
}

async function processAsyncData() {
  try {
    const result = await fetchData();
    console.log("Data received:", result);
  } catch (error) {
    console.error("Error:", error);
  }
}

processAsyncData();

In this example: - fetchData is an asynchronous function returning a Promise. - processAsyncData is an async function that uses await to wait for the fetchData Promise to resolve. - The code inside processAsyncData looks sequential, even though it's asynchronous.

Comparison:¶

Promises: Promises provide a more granular and explicit way to handle asynchronous operations using then and catch. They are suitable for more complex scenarios and offer fine-grained control over the asynchronous flow.
async/await: async/await simplifies asynchronous code by making it appear synchronous, which can be easier to read and write. It's especially useful for cases where you want to wait for multiple asynchronous operations to complete sequentially.

Both Promises and async/await have their strengths, and you can choose the approach that best fits your project's requirements and coding style. TypeScript seamlessly integrates with both mechanisms, making it easier to write efficient and maintainable asynchronous code.

Decorators¶

Decorators in TypeScript are a powerful and flexible feature that allows you to add metadata, modify the behavior of classes, methods, properties, or parameters, and even create custom annotations in your code. They are typically used to enhance and extend the functionality of classes and class members. Decorators are applied using the @decoratorName syntax.

The primary purposes of decorators in TypeScript are:

Annotation: You can add metadata or annotations to your code that can be used by tools, frameworks, or libraries for various purposes, such as routing in web applications, validation, logging, or dependency injection.
Modification of Behavior: Decorators can modify the behavior of class members, methods, or properties. For instance, you can create decorators to add logging, access control, or validation logic to methods or properties.
Extensibility: Decorators provide a way to extend and customize the behavior of classes and their members without modifying their source code directly. This promotes code reusability and separation of concerns.

Example of Using Decorators:¶

Here's an example of how to use decorators in TypeScript:

// Decorator Factory Function
function logMethod(target: any, key: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;

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

  return descriptor;
}

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

  @logMethod
  subtract(a: number, b: number): number {
    return a - b;
  }
}

const calculator = new Calculator();

console.log(calculator.add(5, 3));      // Calls 'add' method with logging.
console.log(calculator.subtract(10, 2)); // Calls 'subtract' method with logging.

In this example: - We define a decorator factory function logMethod that takes three parameters: target (the class prototype), key (the method name), and descriptor (the property descriptor of the method). - Inside the logMethod decorator, we intercept the method execution, log the method name and arguments before calling the original method, and log the result after the method completes. - We apply the @logMethod decorator to the add and subtract methods in the Calculator class. - When calling the methods of the Calculator instance, the decorator adds logging functionality.

The output will show method calls with logging information:

Calling method add with arguments: [5,3]
Method add returned: 8
8
Calling method subtract with arguments: [10,2]
Method subtract returned: 8
8

Decorators in TypeScript offer a way to extend and enhance the behavior of classes and class members with reusable and modular code. They are widely used in various TypeScript libraries and frameworks to provide additional functionality and customization options.

Module Systems¶

Module systems in TypeScript are a way to organize and structure your code by encapsulating and exporting functionality. TypeScript's module system provides a mechanism for creating reusable pieces of code and managing dependencies within a project. It builds upon the ES6 module system but introduces some differences and additional features to better support TypeScript's static typing.

Here's an overview of module systems in TypeScript and how they differ from ES6 modules:

TypeScript Module System:¶

TypeScript supports several module system formats, including CommonJS, AMD, SystemJS, and UMD, but the most common one is ES6 modules. TypeScript extends the ES6 module system with some additional features:

Static Typing: TypeScript's module system enforces static typing, which means that you declare the types of exported and imported values explicitly using type annotations or type inference. This ensures type safety and better tooling support.
Declaration Files (.d.ts): TypeScript allows you to use declaration files to describe the types and shape of modules or libraries that are written in JavaScript. This enables TypeScript to integrate seamlessly with existing JavaScript code.
Export and Import Syntax: TypeScript uses the export and import keywords to define and consume modules. The import statement supports various import styles, including default imports, named imports, and namespace imports.

   // Exporting a value from a module
   export const myValue = 42;

   // Importing the value in another module
   import { myValue } from './myModule';

Namespace Modules: TypeScript allows you to use namespaces to group related types and values within a module. This is useful for organizing and avoiding naming collisions.

   // Namespace module
   namespace MyNamespace {
     export const value = 42;
   }

   // Importing from a namespace
   import { MyNamespace } from './myModule';
   console.log(MyNamespace.value);

Differences from ES6 Modules:¶

While TypeScript's module system builds upon ES6 modules, there are some key differences:

Type Annotations: TypeScript introduces type annotations for exports and imports, allowing you to specify the expected types of values. ES6 modules do not have built-in support for type annotations.
Declaration Files: TypeScript supports declaration files (.d.ts) that provide type information for existing JavaScript modules or libraries. ES6 modules do not have this feature.
Namespace Modules: TypeScript introduces namespace modules (namespaces) for organizing related types and values within a module. ES6 modules do not have the concept of namespaces.
CommonJS and AMD: TypeScript allows you to use module systems like CommonJS and AMD alongside ES6 modules. This flexibility is beneficial when working with various module formats in different environments.

In practice, TypeScript's module system enhances the ES6 module system by adding static typing, declaration files, and namespaces, making it a powerful choice for writing modular and type-safe code. It maintains compatibility with ES6 modules, ensuring that TypeScript can work seamlessly with both TypeScript and JavaScript codebases.

The Role of "tsconfig.json"¶

The tsconfig.json file plays a central role in TypeScript projects as it serves as the configuration file that TypeScript uses to understand how to compile TypeScript code. It allows you to specify various compiler options, project settings, and file inclusion/exclusion rules. Here's an explanation of the role of tsconfig.json and some common configuration options:

Role of "tsconfig.json":¶

Configuration Settings: tsconfig.json contains a set of configuration options that dictate how TypeScript should compile your code. It helps TypeScript understand your project's structure and requirements.
Compiler Options: One of the primary purposes of tsconfig.json is to specify compiler options. These options control TypeScript's behavior during compilation, such as generating JavaScript output, enabling strict type checking, and setting module formats.
File Inclusion/Exclusion: You can define which files TypeScript should include or exclude from compilation. This is crucial for managing large codebases with many source files.
Project References: In larger projects with multiple subprojects or dependencies, you can use project references to specify how different parts of the project relate to each other.
Module Resolution: You can configure how TypeScript resolves module imports, whether using CommonJS, ES6 modules, or other module formats.
Type Definitions: You can include references to type definition files (.d.ts) or type declaration packages (e.g., @types/xyz) to provide type information for external libraries or modules.
Target Environment: You can specify the target environment for your code, such as browser, Node.js, or other JavaScript runtime environments.

Common Configuration Options:¶

Here are some common configuration options you can include in your tsconfig.json:

compilerOptions: This is the most extensive section of tsconfig.json where you can specify TypeScript compiler options. Common options include:
- target: Specifies the ECMAScript version you want to target (e.g., "ES5" or "ES6").
- module: Defines the module format to use (e.g., "CommonJS", "ES6", "UMD").
- outDir: Specifies the output directory for compiled JavaScript files.
- strict: Enables strict type checking.
- noImplicitAny: Disallows the use of the any type implicitly.
- allowJs: Allows TypeScript to compile JavaScript files.
- esModuleInterop: Enables interoperability with ES6 modules.
include and exclude: These options determine which files should be included or excluded from the compilation process. You can use patterns to match file paths.
files: An array of file paths to include in the compilation, useful when you want fine-grained control over the file list.
references: Specifies project references when working with larger projects split into subprojects or dependencies.
**typeRoots and types: These options allow you to specify type definition file locations or type declaration packages.
**rootDir and baseUrl: Used to configure the base directory for source files and the base URL for module imports.
**resolveJsonModule: Enables importing JSON files as modules.
**lib: Specifies the set of built-in TypeScript libraries available for use.
**declaration and declarationDir: Enable and configure generation of type declaration files (.d.ts).
**noEmit: Prevents TypeScript from emitting JavaScript files and is useful when you only want type checking without compilation.
**jsx and jsxFactory: Configures support for JSX syntax and specifies the JSX factory function.
**strictNullChecks: Enhances type safety by checking for null and undefined types.

A typical tsconfig.json might look like this:

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

In this example, the compilerOptions section specifies various compiler settings, while include and exclude define which source files should be compiled. The file structure and configuration options can vary depending on your project's requirements, but tsconfig.json serves as the central configuration hub for TypeScript projects.

TypeScript¶

TypeScript¶

TypeScript Version History¶

JavaScript:¶

TypeScript vs. JavaScript: Use Cases¶

When to Use TypeScript:¶

When to Use JavaScript:¶

Benefits of Using TypeScript¶

1. Static Typing and Type Safety:¶

2. Improved Code Maintainability:¶

3. Enhanced Tooling:¶

4. Ecosystem Compatibility:¶

5. Strong Community Support:¶

6. Better Collaboration:¶

7. Enhanced Productivity:¶

Static Typing in TypeScript¶

1. Type Annotations:¶

2. Type Inference:¶

3. Compile-Time Checks:¶

4. Type Safety:¶

5. Documentation and Understanding:¶

Declare Variables¶

1. Using Type Annotations (Explicit Type Declaration):¶

2. Using Type Inference (Implicit Type Declaration):¶

3. Type Annotations for Function Parameters and Return Values:¶

4. Custom Types and Interfaces:¶

Type Assertion in TypeScript¶

Syntax of Type Assertion:¶

When to Use Type Assertion:¶

Caution and Best Practices:¶

Interfaces vs Classes¶

Interfaces:¶

Classes:¶

Custom Types¶

Using Type Aliases:¶

1. Defining a Simple Type Alias:¶

2. Creating Union Types:¶

3. Creating Complex Data Structures:¶

Using Interfaces:¶

1. Defining an Interface for an Object Shape:¶

2. Extending Interfaces:¶

3. Using Optional Properties:¶

Choosing Between Type Aliases and Interfaces:¶

Generics in TypeScript¶

Generics in Functions:¶

Generics in Classes:¶

Benefits of Generics:¶

Type Inference¶

Role of Type Inference:¶

Mechanism of Type Inference:¶

The "any" Type¶

When to Use the "any" Type:¶

When to Discourage the Use of the "any" Type:¶

Alternative Approaches:¶

Access Modifiers¶

1. public Access Modifier:¶

2. private Access Modifier:¶

3. protected Access Modifier:¶

Asynchronous Programming: async/await and Promises¶

Promises:¶

async/await:¶

Comparison:¶

Decorators¶

Example of Using Decorators:¶

Module Systems¶

TypeScript Module System:¶

Differences from ES6 Modules:¶

The Role of "tsconfig.json"¶

Role of "tsconfig.json":¶

Common Configuration Options:¶

1. `public` Access Modifier:¶

2. `private` Access Modifier:¶

3. `protected` Access Modifier:¶

`async/await`:¶