Fundamentals Of TypeScript
Tags: webdev, typescript
Published: 2023-03-26 16:22:27


Hi everyone! 

In this article we'll talk about what TypeScript is, why is it cool, and how can you use it, and New features in TypeScript 

## Introduction

TypeScript stands in an unusual relationship to JavaScript. TypeScript offers all of JavaScript’s features, and an additional layer on top of these: TypeScript’s type system.


TypeScript offers static typing, which means that when you define a variable and set its data type, you cannot change it later. This helps to decrease the number of bugs in the application written in TypeScript because errors are caught at compile time instead of runtime, unlike JavaScript, where errors are caught only at runtime. This is a great advantage of TypeScript.

## Variables

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ktp3fo8y4njy7zp9mkh0.png)


in this example we assign x to number so now it's from type so we can't reassign it with value from another type so it give me error in compile time  


If a variable is created without a defined type, it will take on the type of the value that is assigned to it. For instance, if we assign a number value to a variable, it will be of the number type and cannot be assigned a value of any other type.


In Typescript, we have the Union type, which allows us to define a variable that can hold values of multiple types. For example, the variable "x" can be defined as a union type of number and string, meaning it can hold values of either type. We can also assign more types to the variable if needed.



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m1mq831lmsm689k7a5nd.png)



## Array

In JavaScript, an array is a collection of values, and we can add values of different types to it without explicitly specifying the type of the array. However, in TypeScript, we need to define the type of the array before we can add values to it. This is because TypeScript is a statically typed language that requires us to specify the type of a variable before we use it, including arrays. By defining the type of the array, TypeScript can ensure that only values of the specified type can be added to the array and can also provide better type checking and error handling during the development process.

- we have different ways to create Array in Typescript

  
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iqwpscutf1noiu74dlap.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1hh9ec4yrsr5x2ao70co.png)

By defining the type of an array in TypeScript, we can specify the type of values that can be added to the array. For example, if we define an array "x" to be of type "number[]", TypeScript will ensure that only numbers can be added to the array. If we try to add a value of a different type, such as a string or boolean, TypeScript will give us an error, indicating that the type of the value is not compatible with the defined type of the array. This helps us catch type-related errors early in the development process and make our code more robust and reliable.


## Tuple 

In TypeScript, we can use tuples to define an array with a specific number of elements and types, which can provide better type checking and error handling compared to regular arrays. For example


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/krho4xcqgcnk5lg5lftg.png)


tuple make limit for adding values for the element of it but if you try to use push method it'll do it and it's one of bad behavior of tuple 

## Function

In TypeScript, we can specify the data type of the parameters of a function, as well as the return type of the function. If a function does not return anything, we can set its return type to "void". Additionally, just like variables and arrays, we can use union types to specify multiple types for a function parameter.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sfu7cg3zgzqh0nucrmjq.png)

In TypeScript we have default value for paramter too but if you want to maka parameter optional so you can add it or no 
you can use ? 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2d8zytpvqkkb2mcuhwxk.png)



Function overloading in TypeScript allows you to define multiple function signatures for the same function name. Each signature can differ in the number of parameters and their types. When you call the function, TypeScript will use the appropriate signature based on the arguments you provide.

However, this is not true function overloading in the sense of traditional programming languages like C++ or Java. This is because TypeScript's function overloading is based on the function signature, which is not something that exists in JavaScript. When TypeScript compiles to JavaScript, all type information is erased, so the overloaded functions become just one function with multiple if/else conditions to handle the different argument types.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ae825x9ntdm3ccwhycn9.png)






## Conclusion

this article give you  overview about TypeScript and how it work and the new features on it  and how you can create varibles , functions, arrays and OverLoading concept in TypeScript how can we implement it too