DEV Community

Cover image for Fundamentals Of TypeScript
Mustafa
Mustafa

Posted on

Fundamentals Of TypeScript

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

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

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

Image description

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

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

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

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

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

Top comments (0)