The TypeScript Workshop

A practical guide to confident, effective TypeScript programming

Ben Grynhaus, Jordan Hudgens, Rayon Hunte, Matt Morgan, Wekoslav Stefanovski

• Publisher: Packt Publishing
• Year: 2021
• ISBN:
  9781838826765
• Edition: 1
• Topic: Computer Science
• Subtopic: Open Source Programming
• Index: Computer Science

Broaden your skill set by learning TypeScript and applying your knowledge to build real-world applications

Key Features

• Quickly get started writing TypeScript code with hands-on exercises and activities
• Develop new skills that can be applied at work or in your own side projects
• Build your understanding, boost your confidence, and advance your programming career

Book Description

By learning TypeScript, you can start writing cleaner, more readable code that's easier to understand and less likely to contain bugs. What's not to like?

It's certainly an appealing prospect, but learning a new language can be challenging, and it's not always easy to know where to begin. This book is the perfect place to start. It provides the ideal platform for JavaScript programmers to practice writing eloquent, productive TypeScript code.

Unlike many theory-heavy books, The TypeScript Workshop balances clear explanations with opportunities for hands-on practice. You'll quickly be up and running building functional websites, without having to wade through pages and pages of history and dull, dry fluff. Guided exercises clearly demonstrate how key concepts are used in the real world, and each chapter is rounded off with an activity that challenges you to apply your new knowledge in the context of a realistic scenario.

Whether you're a hobbyist eager to get cracking on your next project, or a professional developer looking to unlock your next promotion, pick up a copy and make a start! Whatever your motivation, by the end of this book, you'll have the confidence and understanding to make it happen with TypeScript.

What you will learn

• Configure a professional TypeScript development environment
• Explore how to use primitive and complex data types
• Incorporate types into popular npm (Node package manager) libraries
• Design systems that use asynchronous behavior
• Implement object-oriented programming to model real-world scenarios
• Get to grips with modern UI design by combining React with TypeScript

Who this book is for

The TypeScript Workshop is for software developers who want to broaden their skill set by learning the TypeScript programming language. To get the most from this TypeScript book, you should have basic knowledge of JavaScript or experience using another similar programming language.

1. TypeScript Fundamentals

Overview

In this chapter, we'll briefly illustrate the problems that exist in JavaScript development environments, and we'll see exactly how TypeScript helps us write better and more maintainable code. This chapter will first help you set up the TypeScript compiler and then teach you the fundamentals. Additionally, we'll begin our journey into types, as they are the core feature of TypeScript – it's right in the name. Finally, you will be able to test your newly gained TypeScript skills by creating your own library.

Introduction

The world of online applications has grown tremendously in the past few decades. With it, web-based applications have grown not only in size but also in complexity. JavaScript, a language that was originally thought of and used as a go-between between the core application logic and the user interface, is being seen in a different light. It is the de facto language with which web apps are being developed. However, it just was not designed for the building of large applications with lots of moving parts. Along came TypeScript.

TypeScript is a superset of JavaScript that provides lots of enterprise-level features that JavaScript lacks, such as modules, types, interfaces, generics, managed asynchrony, and so on. They make our code easier to write, debug, and manage. In this chapter, you will first learn how the TypeScript compiler works, how transpilation occurs, and how you can set up the compiler options to suit your needs. Then, you will dive straight into TypeScript types, functions, and objects. You will also learn how you can make your own types in TypeScript. Finally, you can test your skills by attempting to create your own library to work with strings. This chapter serves as a launchpad with which you can jump-start your TypeScript journey.

The Evolution of TypeScript

TypeScript was designed by Microsoft as a special-purpose language with a single goal – to enable people to write better JavaScript. But why was that an issue at all? To understand the problem, we have to go back to the roots of the scripting languages for the web.

In the beginning, JavaScript was designed to enable only a basic level of interactivity on the web.

Note

JavaScript was initially developed in 1995 by Brendan Eich for use in Netscape Navigator.

It was specifically not designed to be the main language that runs within a web page, but to be a kind of glue between the browser and the plugins, such as Java applets that run on the site. The heavy lifting was supposed to be done by the plugin code, with JavaScript providing a simple layer of interoperability. JavaScript did not even have any methods that would enable it to access the server. Another design goal for JavaScript was that it had to be easy to use for non-professional developers. That meant that the language had to be extremely forgiving of errors, and quite lax with its syntax.

For a few years, that was the task that JavaScript (or, more properly, ECMAScript, as it was standardized) was actually doing. But more and more web pages came into existence, and more and more of them needed dynamic content. Suddenly, people needed to use a lot of JavaScript. Web pages started getting more and more complex, and they were now being referred to as web applications. JavaScript got the ability (via AJAX) to access servers and even other sites, and a whole ecosystem of libraries appeared that helped us write better web applications.

However, the language itself was still lacking lots of features that are present in most languages – primarily features that are targeted toward professional developers.

Note

Some of the most talked-about features included a lack of module/namespace support, type-checked expressions, better scoping mechanisms, and better support for asynchronous functionality.

Since it was designed for small-scale usage, it was very troublesome to build, and especially to maintain, large applications built with JavaScript. On the other hand, once it was standardized, JavaScript became the only way to actually run code inside the browser. So, one solution that was popular in the 2000s was to make an emulation layer – a kind of a tool that enabled developers to use their favorite language to develop an application that will take the original source code as input and output equivalent JavaScript code. Such tools became known as transpilers – a portmanteau of the words "translator" and "compiler." While traditional compilers take source code as input and output machine code that can execute directly on the target machine, transpilers basically translated the source code from one language to another, specifically to JavaScript. The resulting code is then executed on the browser.

Note

The code actually gets compiled inside the browser, but that's another story.

There were two significant groups of transpilers present – ones that transpiled from an existing language (C#, Java, Ruby, and so on) and ones that transpiled from a language specifically designed to make web development easier (CoffeeScript, Dart, Elm, and so on).

Note

You can see a comprehensive list at https://packt.link/YRoA0.

The major problem with most transpilers was that they were not native to the web and JavaScript. The JavaScript that was generated was confusing and non-idiomatic – it looked like it was written by a machine and not a human. That would have been fine, except that generated mess was the code that was actually executing. So, using a transpiler meant that we had to forgo the debugging experience, as we could not understand what was actually being run. Additionally, the file size of the generated code was usually large, and more often than not, it included a huge base library that needed to load before we would be able to run our transpiled code.

Basically, by 2012 there were two options in sight – write a large web application using plain JavaScript, with all the drawbacks that it had, or write large web applications using a transpiler, writing better and more maintainable code, but being removed from the platform where our code actually runs.

Then, TypeScript was introduced.

Note

A video of the introductory lecture is available at https://channel9.msdn.com/Events/Build/2012/3-012.

Design Goals of TypeScript

The core idea behind it was one that, in hindsight, seems quite obvious. Instead of replacing JavaScript with another language, why not just add the things that are missing? And why not add them in such a way that they can be very reasonably removed at the transpiling step, so that the generated code will not only look and be idiomatic but also be quite small and performant? What if we can add things such as static typing, but in an optional way, so that it can be used as much or as little as we want? What if all of that existed while we're developing and we can have nice tooling and use a nice environment, yet we're still able to debug and understand the generated code?

The design goals of TypeScript, as initially stated, w...