Book Image

Learn TypeScript 3 by Building Web Applications

By : Sebastien Dubois, Alexis Georges
Book Image

Learn TypeScript 3 by Building Web Applications

By: Sebastien Dubois, Alexis Georges

Overview of this book

TypeScript is a superset of the JavaScript programming language, giving developers a tool to help them write faster, cleaner JavaScript. With the help of its powerful static type system and other powerful tools and techniques it allows developers to write modern JavaScript applications. This book is a practical guide to learn the TypeScript programming language. It covers from the very basics to the more advanced concepts, while explaining many design patterns, techniques, frameworks, libraries and tools along the way. You will also learn a ton about modern web frameworks like Angular, Vue.js and React, and you will build cool web applications using those. This book also covers modern front-end development tooling such as Node.js, npm, yarn, Webpack, Parcel, Jest, and many others. Throughout the book, you will also discover and make use of the most recent additions of the language introduced by TypeScript 3 such as new types enforcing explicit checks, flexible and scalable ways of project structuring, and many more breaking changes. By the end of this book, you will be ready to use TypeScript in your own projects and will also have a concrete view of the current frontend software development landscape.
Table of Contents (15 chapters)

What you'll need to install

In order to implement the different projects of this book, and in order to work with TypeScript, you'll need a few tools. In this section, we'll go through the list together to briefly explain what those tools are and why you’re going to need those. Bear in mind that these are merely the strict minimum. In practice, you'll need more than these to build real-world applications.

Text editor

First of all, you'll need a code editor. For this book, we'll be using Visual Studio Code (also known as VS Code or VSCode), an excellent tool created by Microsoft that is free and open source. VS Code provides great editing and debugging support as well as many extensions. It works on Windows, macOS, and Linux. As a bonus, VS Code is also written in TypeScript!

One of the great strengths of VS Code is its extensibility through plugins that are available on the VS Code Marketplace (https://marketplace.visualstudio.com/VSCode). The Marketplace contains thousands of extensions.

As an alternative, you may also use a full-blown Integrated Development Environment (IDE) of your choice, such as WebStorm (https://www.jetbrains.com/webstorm) or IntelliJ (https://www.jetbrains.com/idea), which both closely follow the TypeScript releases and quickly deliver improvements and support for newer versions.

There are, of course, other ones such as Eclipse (https://www.eclipse.org), NetBeans (https://netbeans.org), or Visual Studio (https://visualstudio.microsoft.com) from Microsoft.

In any case, choose well, because the editor is your main weapon and it can have a dramatic impact on your productivity.

Version control system

The second tool that we will use is a version control (VCS or SCM) system. Git (https://git-scm.com) is the de facto standard, so we'll use that. You will mainly use Git to retrieve the book's code samples, but you can also use it to keep track of your own modifications to the projects. We won't cover Git at great length since it is out of the scope of this book, but if you're not familiar with it yet, you should take a look at the official book, which is fantastic to quickly get started. You can find it here: https://git-scm.com/book/en/v2.

Shell

Another tool that we will use heavily with this book is the shell. You can do many things through the command line and it can really have an important impact on your productivity as a developer. With modern shells, you can script many operations and automate a lot of the tasks that you perform many times each day.

On Linux and macOS, using Bash is recommended. There might be some minor differences on macOS because it uses FreeBSD-based utilities, while usually on Linux, you'll have the GNU project ones, but nothing relevant for the purposes of this book.

If you're working in Windows, you can use Git BASH. Git BASH is a Bash shell emulation that is provided along with the Git installer on Windows. There are multiple reasons for this (opinionated) choice, but the main ones are simplicity and homogeneity across platforms. For example, if you need to remove a folder on Windows and Linux, then the commands will differ if you use cmd on one side and bash or sh on the other, while you'll be able to use the exact same command on both Windows and Linux if you're using Bash.

As an alternative on Windows 10 and newer, you may also use Windows Subsystem for Linux (WSL), in which case you'll have access to a standard Bash shell. If you really prefer, you may also use a standard cmd.exe shell or a PowerShell one, but in this book, we'll use Bash for simplicity.

JavaScript runtime

In order to execute TypeScript and many other tools in the JavaScript ecosystem, you'll need a JavaScript runtime. The default option here is Node.js (https://nodejs.org).

Node.js provides multiple things when you install it:

Node.js can actually be used to develop full-blown applications, but in this book, we will mainly use its runtime and package manager. We will only use the Node SDK indirectly.

For the purposes of this book, though, the necessary knowledge of Node.js will be quite limited, as you'll see shortly.

Package manager

The second-to-last tool is also one that you will use most of the time; npm (https://www.npmjs.com) is the official package manager for Node.js. With npm, and through the official npm registry, you will have access to more than 1,000,000 packages, and the numbers keep rising. Hopefully, though, you'll probably need a bit less than that to create your applications!

So why would you need a package manager? If you have experience with any widespread ecosystem, then you'll probably be familiar with a few already: NuGet for .NET, Groovy and Maven for Java, Composer for PHP, and pip for Python. You name it. If not, then here's a short introduction. The basic idea of package management is very straightforward; your projects have dependencies and you need a clean and easy way to get them on your machine, update them to newer releases, and many others.

No matter the size of the project you'll work on in the future, you should consider package management (and actually configuration management in general) as a must. It streamlines your workflow (it's better to have a single, standard way to manage the project), it stabilizes your application if properly used, and can actually help you avoid or detect security issues. For example, npm can detect outdated and/or vulnerable dependencies and warn you. You certainly don't want to have to find/download/extract your dependencies manually.

There are actually three things that we call npm:

  • The command-line interface (CLI)
  • The official npm registry: https://www.npmjs.com
  • The website of the official npm registry

For now, you just need to know that you'll use npm to install dependencies easily and execute scripts. In addition, note that in the npm jargon, the dependencies that npm will manage for you will come in the form of npm packages, which will be downloaded from the official npm registry. Just for completeness, you should also know that there is a popular alternative to the npm CLI called Yarn (https://yarnpkg.com). Yarn was created at Facebook and published as open source in 2016.

TypeScript

Finally, as obvious as it may be, yes, you will also need to install TypeScript.

If you install VS Code, Visual Studio, WebStorm, IntelliJ, or another IDE that supports TypeScript natively, then you already have TypeScript on your machine. Anyway, you'll still need to install it separately from the IDE for reasons that we'll cover in the next sections.

Regardless of how you install it, once TypeScript is installed on your machine, you will get access to the TypeScript compiler, which is called tsc. TypeScript is distributed as an npm package and it can easily be installed using npm. As you will soon see, there are different ways to install npm packages. Some make more or less sense depending on the use case and some others may cause actual issues for development teams.