# TypeScript: Building blocks ### Type Annotations TypeScript contains various annotations similar to data types in any static language in the form of strings, numbers, boolean, arrays, records, etc. You can assign a type annotation to variables, functions arguments, etc. ### Primitive Types ```typescript let name :string = "Sam Parket"; let age :number = 24; let isPremium :boolean = true; ``` > The cool thing about primitive types is that you don't need to manually assign any type when manually setting a default value. ```typescript // this will also work. let name = "Sam Parket"; ``` In the code above, TypeScript will ensure that name always has a string type of value. This is referred to as an infer type. You can begin writing code by visiting the [typescript playground](https://www.typescriptlang.org/play). Let's see what happens when we assign a number to a name! ```typescript name = 235464; ``` You will see the below message. ![TypeScript Intellisense Error](https://cdn.hashnode.com/res/hashnode/image/upload/v1648554489962/NiGMFWHT2.png align="left") ### Type Safety in Functions ```typescript const getEmailAddress = (name: string) :string => { // .. // ... return email; } ``` Let's understand what's going on here. * We are passing `name` as a `string` argument. So the data type of `name` can only be a `string`. * At the end of the `)` bracket, we have added another `string` annotation. It will make sure that `getEmailAddress` will always return `string` type of data. This is the beauty of TypeScript. Without even running the code, the code can easily be understood. Let's see how we can provide type safety for traditional functions. ```typescript function getEmailAddress(name: string) :string { // .. // ... return email; } ``` ### Non-Primitive Type Annotations Typescript provides type safety to primitive types like Array and Objects. ```typescript const hobbies :string[] = ["Dancing", "Coding", "Blogging", "Playing"]; ``` The code above, looks similar to primitive code. We have added `[]` at the end of the `string` type annotation. This will let us add only `string` type of data to the array. #### Examples of Non-Primitive Type Annotations ```typescript const pincodes :number = [123456, 234134, 653123. 3424]; const flags: boolean = [false, true, false, true, true]; ``` ### Tuple A tuple is very similar to an array in Javascript. Typescript lets us be more specific while defining array-type annotations. Let's see how we can use a tuple. ```typescript // You can define what type of data you want at which location. const MyArray : [boolean, string, number] = [false, "Hello", 33]; //Also, You can push only boolean, string, and number types of data. // This will raise an error. myArray.push({ name: "SAM" }); ``` You can use a tuple to have multiple data types in an array at a specific location. **What about the objects, though?** To provide type safety for object data type, TypeScript offers different ways of implementation. The syntax looks similar to how we create objects in `JavaScript`. ```plaintext let user: { name: string; gender: string; contactNumber: number; isPremium: boolean; hobbies: string[]; }; ``` We can make it reusable by creating `interface` and `type`. * interface ```typescript interface User { name: string; gender: string; contactNumber: number; isPremium: boolean; hobbies: string[]; } let user: User; let user_two: User; ``` * type ```typescript type User = { name: string; gender: string; contactNumber: number; isPremium: boolean; hobbies: string[]; } let user: User; ``` Although they serve different purposes, `interfaces` and `types` function in the same way. An `interface` can extend another `interface` in the same way that classes do. ```typescript interface A { // regular types type: string; } // interface B can leverage types of interface A. interface B extends A { // regular types anotherType: boolean; } ``` `types` are used to modify other types. It is known as **types of types**. #### Optional types You only want to pass all of the arguments in rare instances, such as when an object contains optional properties. We can mark type annotations as optional. Let's see how we can do that. ```typescript // we have marked second argument as optional. const sum = (a: number, b?:number) => { // .. } ``` When you run this code, you can skip the second argument. There will be no type error. `?` is used to make an optional type. > Note: In functions, you need to pass optional types after the usual types, in order to avoid confusion. ```typescript // ✅ A valid way to make optional types. const fun = (a: string, b?: number) => {} // 🚫 A invalid way to make optional types. const funOne = (a: string, b?:number, c:number) => {} ``` Similarly, we can use `?` with `interface` or `type` to make some props optional. ```typescript interface Fruit { name: string; shape: string; price?: number; // here the price is optional } ``` You can use the same syntax for `type` as well. All you need to do is add `?` after `:`. This way you can create flexible types. #### Type Opreations With TypeScript, we can modify types through a few operations. We can create another kind by combining different types. We don't need to write any extra code to accomplish this. #### 1\. Intersection An Intersection works as a logical `and` operator. We can combine more than one type to create another type. Use `&` to perform intersection operations. ```typescript type Fruit { name: string; } type Shape { shapeType: string; } // concating two types here. const Myfruit: Fruit & Shape = { name: "Orange", shapeType: "Circle" } ``` #### 2\. Union Union works as a logical `or` operator. We can combine types, but those types are optional. Unlike `intersection`, we can skip some types properties. Use `|` to perform union operations. ```typescript // Example 1 type Gender = "male" | "female" const gender: Gender = "male"; // Example 2 type Fruit { name: string; } type Shape { shapeType: string; } // We don't need to provide shapeType. const Myfruit: Fruit | Shape = { name: "Orange" } ``` #### Generic Type So far, we have seen how to create types statically, but what if we could create dynamic types? That's where the generic type comes into the picture ```typescript const myFunction = (argument: T) => { // .. // ... } // Dynamically binding types to the functions // we can pass string data type as an argument myfunction("Hello World"); // same like above we can pass number data type as an argument. myfunction(22); ``` Let's understand what is happening here. We have discovered a new syntax here in ``. This is a signature of generic type. You can pass and accept type in `<>` brackets. 1. Here we are passing type `T` to the function like we pass an argument. 2. After that we are assigning that type `T` to the argument. Finally, the syntax will look like this. `(args: T)` Generic type with traditional functions ```typescript // Notice how we can use this type anywhere in the function. // We are using generic as return type. function add(a: T, b: T) :T { return a + b; } ``` Similarly, we can use generic types for non-primitive data types. Here's an example of how you can use generic types with objects. ```typescript // we can also pass any number of types as generic. // Generic type with interface interface ObjectType { propA: T; propB: K; } const myObject: ObjectType = { propA: "I am string", propB: 23 } // the generic syntax looks similar for both interface and type. // generic type with Type type NewObjectType = { somePropA: T; } ``` > Think generic type as functions of JavaScript. We can take type `T` as an argument and then we can use that anywhere we want. So far, we've looked at Typescript's fundamental building components. The adventure does not end here. We'll delve deeper into typescript. In the future blogs, we'll look at typescript tools, kinds of types, and conditional types. Thank you for taking the time to read this blog.