In this chapter, there’s no need to install or run anything just yet. We’re going to focus on the basics of TypeScript, so you can ease into it without any setup work.

All the code examples we discuss are available in this repository: https://github.com/PacktPublishing/Full-Stack-Web-Development-with-TypeScript-5/tree/main/Chapter01.

JavaScript’s journey to market was remarkably quick. Brendan Eich created its first version in just 10 days, aiming to make web pages interactive through a straightforward scripting language. Over time, JavaScript gradually, then rapidly, became a dominant force in web development, while applications grew increasingly complex.

Many developers critique JavaScript’s design as lacking elegance, often pointing out its seemingly inconsistent language decisions. It’s true that JavaScript is notorious for its quirks. To illustrate this, let’s look at two common examples:

• 4 / []
• 0 == ""

The first one evaluates to Infinity, while the second one becomes True. This happens because of the type coercion that happens when this code is executed. Type coercion is the process of automatically converting data types from one to another. For example, when [] is used in the numeric context, it is coerced...

TypeScript is a superset of JavaScript, meaning everything you can do in JavaScript, you can also do in TypeScript. It works in all the same places as JavaScript – browsers, Node.js, Bun, and so on. Before the code execution, TypeScript is first transpiled into JavaScript. So, what actually runs is plain JavaScript. TypeScript exists only during development.

This means all your JavaScript knowledge is still valuable in TypeScript. But TypeScript adds a bunch of cool stuff:

• Type annotations: TypeScript allows type annotations, where you can explicitly declare variable types. JavaScript does not support this natively.
• Interfaces: TypeScript introduces interfaces, a way to define custom types and ensure objects conform to specific structures. JavaScript lacks this feature.
• Access Modifiers: TypeScript supports access modifiers such as private, protected, and public, for controlling access to class members. JavaScript...

Using TypeScript comes with a few advantages, mostly of which come directly from using types:

• Type safety: TypeScript’s static typing helps catch errors at compile time, long before the code is executed. This leads to fewer runtime errors and more robust, reliable code.
• Improved tooling: The static type system allows for better tooling support like auto-completion, navigation, and refactoring tools, making the development process more efficient.
• Easier maintenance: For large code bases, TypeScript’s type system makes the code easier to understand and maintain. Changes can be made with greater confidence, reducing the likelihood of introducing bugs.
• Better documentation: The type annotations serve as a form of documentation, making it easier for new developers to understand what the code is doing.

At the same time, as with every technology, TypeScript is not all that shiny; there are...

Let’s start with two main aspects of TypeScript – simple types and interfaces.

Simple types

JavaScript has types, but they are implicit and not strictly enforced. In TypeScript, you’ll find most types are explicit, and you’re required to declare them. Let’s declare one:

let messageText: string = "my first chat message"

The difference you can see with the ordinary JavaScript is : string. This part defines the time of the variable that we are going to use. Here, we’ve clearly stated that messageText is a string. If we try to assign a value of a different type, like a number, we’ll get an error:

messageText = 5

This line will trigger an error since 5 is not a string.

Another benefit is when the compiler knows the variable is a string, your IDE will suggest actual functions that exist on the string type, which is quite useful. Similarly, we can use other basic types to annotate variables...

In this chapter, we’ve covered a brief introduction to TypeScript – how it relates to JavaScript, its advantages and disadvantages, its history, and some basic functionality. With this information in hand, we’re ready to dive deeper into TypeScript. In the next chapter, we are going to cover more advanced aspects of TypeScript: generics, unions, classes, and other useful functionality of its type system.