TypeScript Fundamentals

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

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:

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:

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:

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

Code Blocks

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

Conditionals

Conditional statements in TypeScript are the same as in JavaScript.

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.

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.

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.

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.