**Course Title:** Mastering TypeScript: From Basics to Advanced Applications **Section Title:** Working with Types and Interfaces **Topic:** Primitive and complex types: arrays, tuples, and enums Now that we've covered the basics of TypeScript and control structures, it's time to dive into working with more complex types. In this topic, we'll explore arrays, tuples, and enums, and how they can help you write more robust and maintainable code. ### Arrays Arrays in TypeScript are used to store multiple values of the same type in a single variable. They are defined using square brackets `[]` and are similar to arrays in JavaScript. Here's an example of an array declaration: ```typescript let names: string[] = ['John', 'Alice', 'Bob']; ``` In this example, we declare an array of strings `names` and assign three string values to it. Typescript also supports array methods such as `push()`, `pop()`, `forEach()`, etc. Here's how to use them: ```typescript names.push('Mary'); // adds 'Mary' to the end of the array console.log(names.pop()); // removes and returns the last element of the array names.forEach((name) => console.log(name)); // prints each element of the array ``` #### Key Characteristics of Arrays: * Arrays can store multiple values of the same type. * Arrays can be dynamically resized. * Array indices start at 0. * Arrays can store any type of value (string, number, boolean, etc.). ### Tuples Tuples are a feature in TypeScript that allows us to define an array-like structure where each element can be a different type. They are particularly useful for returning multiple values from a function. Tuples are defined by encasing the types of the elements in square brackets `[type1, type2, type3]`. Here's an example: ```typescript let student: [string, number, boolean] = ['Alice', 24, true]; ``` In this example, the `student` tuple contains three values: a string, a number, and a boolean. You can also destructure the values of a tuple: ```typescript const [name, age, isAdmitted] = student; console.log(name, age, isAdmitted); // prints the individual values of the student tuple ``` Note that tuple types do not imply any specific order on the elements. The type of an array and a tuple with the same types in a different order are two distinct types. Here's another example that highlights this distinctness: ```typescript const tup1: [string, number] = ['Test', 123]; // no error const tup2: [number, string] = [456, 'Sample']; // Type 'string' is not assignable to type 'number'. const wrongTup: [number, string] = [789, 'Example']; const correctTup: [string, number] = tup1; ``` #### Key Characteristics of Tuples: * Each element of a tuple must be assigned a type. * Each element of a tuple must be in the correct order. * In practice, a TS developer can't 'access' an element by specifying its direct index. Developers will have to use _element functions_, like head and tail, or use rest parameters together with tuple destructuring syntax. ### Enums Enums are used to define named values. They can make code easier to read and maintain by providing more descriptive names for sets of numeric values. By default, enums are numbers in TypeScript, meaning each enum member's value will be a number. Here's an example of a numeric enum: ```typescript enum Direction { Up = 1, Down = 2, Left = 3, Right = 4 } ``` However, we can instead make an enum to represent a collection of constants with fixed numeric identifiers. To achieve this, we should adjust our `Direction` enum to represent values instead, which aren't needed directly. Here's an updated enum: ```typescript enum Direction { Left = 1 << 0, Top = 1 << 1, Right = 1 << 2, Down = 1 << 3 } const TOP_RIGHT = Direction.Right | Direction.Top; // you can then add a value console.log(TOP_RIGHT.toString(2).padStart(4,'0')); // prints '1001' ``` We can also create enums for non-numerical values. For example, if a certain constant needs to represent non-numerical data that developers could make the type match a constant that is generated dynamically: ```typescript enum Image { ImgUrl = 'image1.jpg', ImgExtn = '.jpg' } function getImage(image: Image.ImgUrl | string): string { return image; } console.log(getImage(Image.ImgUrl)); // logs 'image1.jpg'; console.log(getImage('image3.jpg')); //logs 'image3.jpg'; ``` The ability to have string-based enums, but with additional rules on usage might be helpful to the programmer. There are few rules on usage: * While using string-based enums, developers still need to refer them in our enum. * Also, ensure the value belongs to specific numeric enums – as TypeScript performs auto-completion for same-level properties that include an enum. Since enum is really simple constant that has both the value, for which developers can place a dynamic generated JavaScript constant name. #### Key Characteristics of Enums: * Enums are used to define a value. * Enums allow developers to modify TS behaviour. ### Practice Exercise 1. Create an enum to represent the status of an order. The enum should have values `Open`, `InTransit`, `Delivered`, and `Cancelled`. Assign `InTransit` as the default value. 2. Create a tuple to store the name, address, and phone number of a customer. 3. Write a function to process an array of products. Each product should have an id, name, and price. The function should return a new array with the prices of all products increased by 10%. Don't forget to experiment and test the explanations above yourself. Please leave a comment or ask for help by replying to this message if you have any questions on these topics. In the next topic, we will cover creating and using interfaces to define object shapes in TypeScript.