TypeScript Fundamentals
Tags: typescript, programming, learning
Published: 2024-06-28 22:06:37

_Table of contents:_
_1. Introduction_
_2. Popularity_
_3. Why Learn TypeScript_
_4. What Is TypeScript Used For_
_5. Type Annotations_
_6. Optional and Default Parameters_
_7. Type Guards and Type Assertions_
_8. Data Types_
_9. Variables_
_10. Code Blocks_
_11. Conditionals_
_12. Functions_
_13. Array and Objects_
_14. Iteration_
_15. TypeScript vs JavaScript_
_16. Conclusion_

##  Introduction

TypeScript is a step up from JavaScript that introduces static typing allowing you to. define variable types. This allows your code to be more predictable and easier to debug. Created by Anders Hejlsberg, who also designed C#, TypeScript was released in October 2012 and is supported by Microsoft. It’s open-source and often referred to as “JavaScript with types,” which helps writing and maintaining code more efficiently.

In this blog, we’ll cover the basics of TypeScript, its benefits, and how it helps developers create more reliable and maintainable applications.

##Popularity

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

TypeScript's popularity has been growing rapidly. By the end of 2023, it became one of the most used programming languages worldwide. Developers love it for its strong typing system and superior tools, which make their work easier and more reliable. For example, TypeScript ranks among the top languages and technologies, with a popularity rate of 38.87%.

## Why Learn Typescript

Learning TypeScript can enhance your development skills and make your projects better. It helps catch mistakes early, even before running your code. It's perfect for big projects as it simplifies managing complex code, especially in teams. TypeScript works seamlessly with JavaScript, so you can add it to your current projects. Major companies like Microsoft, Google, and Airbnb use TypeScript, so learning it can expand your job opportunities.

## What Is Typescript Used For

TypeScript is great for building big applications. It helps find mistakes early and makes code easier to manage. It's often used with Angular and React frameworks, as well as for server-side development with Node.js. Additionally, mobile app frameworks like Ionic and NativeScript also use TypeScript.

## Type Annotations

Type annotations in TypeScript let you specify the type of a variable, making your code more reliable and easier to understand. For example, you can declare a variable and define its type like this:


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

In this example, `age` is defined as a number, `name` is defined as a string, and `isStudent` is defined as a boolean.

Additionally, using type annotations helps prevent errors by ensuring that variables hold the correct type of value throughout your code. For instance, if you try to assign a string to `age`, TypeScript will show an error:


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

## Optional and Default Parameters

In TypeScript, you can make function parameters optional or assign them default values. This means you don't always have to provide a value for every parameter when you call a function. You can make a parameter optional by adding a question mark `(?)` after its name. If you don't pass a value for an optional parameter, it will default to undefined.

You can also provide a default value for a parameter. If you don't pass a value for that parameter, the default value will be used.

This is an example to show both of these concepts:

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

## Type Guards and Type Assertions

Type assertions let you tell TypeScript what type a variable should be when you know it better than TypeScript does. This doesn't change the type during runtime but helps the compiler understand how you intend to use the variable. Type guards and type assertions make your code stronger by ensuring you're working with the right types and helping TypeScript understand your code better.

## Data Types

TypeScript has various data types such as:
- String
- Number
- Boolean
- null
- undefined
- Array

## Variables

TypeScript uses `let` `const`, and `var` for variable declarations. However, it is recommended to use `let` and `const`

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

## Code Blocks

Code Blocks in TypeScript are similar to JavaScript, using the curly braces `{}`.

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

## Conditionals

Conditional statements in TypeScript are the same as in JavaScript.

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

## Functions

In TypeScript, you can set types for function parameters and return values to make sure they are used correctly. By defining these types, TypeScript can catch mistakes if the wrong types are passed to the function or if the function returns a different type than expected.

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

## Arrays and Objects

In TypeScript, you can define the types of arrays and objects to ensure they contain the expected types of data. This helps catch errors and makes your code more predictable.

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

## Iteration

In TypeScript, you can use different loops to iterate over elements in arrays or other data structures. The most common loops are for, while, and forEach.

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

## What are the differences between TypeScript and JavaScript? 

TypeScript introduces static typing, which JavaScript lacks. This helps catch errors early and makes the code more maintainable. TypeScript also supports modern JavaScript features and can be compiled down to older versions of JavaScript.

## Similarities

TypeScript is built on JavaScript, so it shares its syntax and concepts. Anything you can do in JavaScript, you can do in TypeScript, but with added type safety.

## Conclusion

In conclusion, TypeScript makes JavaScript better by adding static typing and advanced features. It helps catch errors early and provides better tools, allowing you to build stronger applications. Using TypeScript will make your code clearer and give you more confidence, making it an essential skill for modern web development.