0x04. Typescript PART 1

JavaScript - TypeScript - ReadOnly - Optional attributes -Index signature:

Shaza Ali

Jan 10, 2024

TypeScript, an extension of JavaScript, introduces several basic types that help in static typing.

Here's a brief overview of some basic types with examples:

Boolean:

Represents true/false values.
Example: let isCompleted: boolean = false;

Tuple:

Allows an array with a fixed number of elements whose types are known, but need not be the same.

Example: let x: [string, number] = ["hello", 10];

Enum:

A way of giving more friendly names to sets of numeric values.

enum Color {Red, Green, Blue}

let c: Color = Color.Green;

Void:

Used for functions that do not return a value.

function warnUser(): void { alert("This is a warning message"); }

Interfaces, Classes, and functions

1. Interfaces

Interfaces in TypeScript define the shape of an object. They are used to specify what properties or methods an object should have.

readonly, Optional attributes and Index signature:

In TypeScript, the readonly keyword in an interface is used to make a property immutable. Once a property is set, it cannot be changed. This is particularly useful for ensuring that certain properties of an object remain constant after their initial assignment.

To make an attribute optional in a TypeScript interface, you can use the ? symbol after the attribute name.

Optional properties in TypeScript interfaces are properties that an object might have, but are not required to have. This means you can create objects that do not include these optional properties.

To add the possibility of including any number of additional attributes without specifying their names in a TypeScript interface, you can use an index signature. An index signature allows an object to have additional properties beyond those explicitly defined in the interface.

`age(number)` this attribute should always be defined

let person1: Person = { name: "Alice", age: 30 };

let person2: Person = { name: "Bob", age: 31, email: "bob@example.com" };

let person3: Person = { name: "Charlie", age: 28, email: "charlie@example.com", hobby: "Gardening", phoneNumber: "123-456-7890" };

2. Classes

They encapsulate data for the object and methods to operate on that data.

In TypeScript, you can use an interface to define a contract for classes. This means that any class that implements the interface is required to adhere to the structure defined by that interface. This structure can include properties and methods with their respective types.

Example Interface

Suppose we have an interface IPerson for a person with a name and a method to display the name.

interface IPerson {

name: string;

display(): void;

}

Example Class

Using interfaces in this way promotes consistent structure across classes,

3. Functions:

Annotations ensure that the functions are used correctly.

Writing an interface for a function:

Writing an interface for a function in TypeScript involves defining the structure of the function, such as the types of its parameters and its return type. This is especially useful when you want to enforce a certain function signature in multiple places in your codebase.

interface AddFunction {

(num1: number, num2: number): number;

}

You can now use this interface to define a function that conforms to this structure:

const add: AddFunction = (x, y) => { return x + y; }; 
console.log(add(5, 10)); // Outputs: 15

Union Types

To illustrate the concept of using union types for both input parameters and return types in a TypeScript function:

Function as a type predicate:

In TypeScript, a function can be used as a type predicate to help the compiler understand the type of an object. A type predicate looks like variable is Type in the function's return type. It's used to check if an object is of a specific type.

In this example, `isBird` is a function that checks if `pet` has a `fly` method. If `isBird(pet)` returns `true`, TypeScript understands that `pet` is a `Bird` in that part of the code.

Namespaces:

Namespaces in TypeScript are used to organize code into groups and prevent naming conflicts, especially in larger applications. A namespace is a way to group related functions, interfaces, classes, and other types under a single name.

Merging Declarations:

In TypeScript, merging declarations is a powerful feature that allows you to combine two or more separately declared types into a single type. This is often used with interfaces and namespaces but can also apply to other constructs like classes and functions.

In this example, the `Album` class and `Album.AlbumLabel` class inside the `Album` namespace are merged. This pattern is often used in TypeScript to simulate the behavior of static classes.

Run TypeScript file

To run a TypeScript file, you need to compile it to JavaScript first using the TypeScript compiler (tsc), and then run the resulting JavaScript file with Node.js.

Here are the steps: