TypeScript for Beginners

The Ultimate Guide

Sufyan bin Uzayr

• Publisher: CRC Press
• Year: 2022
• Print ISBN: 9781032067582
• eBook ISBN: 9781000539967
• Edition: 1
• Topic: Computer Science
• Subtopic: Programming in JavaScript
• Index: Computer Science

Of late, TypeScript has risen in popularity owing to its ease of use and versatile compatibility. As such, more and more developers are looking to quickly and efficiently master TypeScript. If you're looking for a detailed, yet easy to comprehend guide to TypeScript, your search ends here!

The book is a detailed guide that will help learners get started with TypeScript programming in no time. It talks about the basics and then moves on to practical exercises to help readers quickly gain the required knowledge.

The book is meant for both JavaScript developers and learners without a formal JS background. Furthermore, while a background in JavaScript programming might be of help, the book requires no prior coding background and can be easily mastered even by beginners.

What Will You Learn:

• Detailed focus on TypeScript programming

• 
  
  

• Introduction to TypeScript concepts and paradigm

• 
  
  

• Introduction to TS architecture and components

• 
  
  

• OOP programming with TS

• 
  
  

• Web development in TypeScript

• 
  
  

Who Is This Book for:

Web developers looking to learn TypeScript; web development beginners; JavaScript developers; and frontend developers.

About the Author

Sufyan bin Uzayr is a writer, coder, and entrepreneur with more than a decade of experience in the industry. He has authored several books in the past, pertaining to a diverse range of topics, ranging from History to Computers/IT. Sufyan is the Director of Parakozm, a multinational IT company specializing in EdTech solutions. He also runs Zeba Academy, an online learning and teaching vertical with a focus on STEM fields. Sufyan specializes in a wide variety of technologies, such as JavaScript, Dart, WordPress, Drupal, Linux, and Python. He holds multiple degrees, including ones in Management, IT, Literature, and Political Science. Sufyan is a digital nomad, dividing his time between four countries. He has lived and taught in universities and educational institutions around the globe. Sufyan takes a keen interest in technology, politics, literature, history, and sports, and in his spare time, he enjoys teaching coding and English to young students.

Learn more at sufyanism.com

CHAPTER 1TypeScriptIntroduction to TypeScript

DOI: 10.1201/9781003203728-1

TypeScript (TS) is a typed extended set of JavaScript (JS) that compiles to plain JS. As an analogy, if JS was CSS, then TS would be SCSS.

All valid JS code you write is also valid TS code. However, by using TS, you get to use static typing and the latest features that compile into simple JS that is supported by all browsers. TS aims to solve the JS scaling problem, and it works pretty well.

In this book, you'll start by reading about the various features of TS and why learning it is a good idea. The rest of this book will focus on installing and compiling TS, along with some popular text editors that offer you support for TS syntax and other important features.

WHAT IS TS?

TS is a kind of updated version of the JS language. It can run on Node.js or any web browser that supports ECMAScript 3 or higher. TS is a statically compiled language that provides optional static typing, classes, and an interface. It allows you to write simple and clean JS code. So, adopting TS can help you create more easily deployable and more reliable software.

A BRIEF HISTORY OF TS

TS development began in late 2012. Although it originated in Microsoft, and its actual creator is the programmer Anders Hejlsberg, also known as the creator of such languages as Delphi and C#, this project immediately began to develop as an OpenSource. And from the very beginning, the new language began to spread rapidly due to its flexibility and performance. A lot of projects that were written in JS were transferred to TS. The popularity and relevance of the ideas of the new language has led to the fact that a number of these ideas will later become part of the new JS standard. And the new version of one of the most popular frameworks for web – Angular 2/4/5/6 is completely written in TS jointly by Microsoft and Google.

WHY SHOULD YOU CHOOSE TS?

However, it would seem that there is no need for another programming language for the client side in the web environment, if traditional JS, which is used on almost every site, which is owned by many developers and whose support in the programming community is quite high, also copes with all the same work. But TS is not just a new JS.

First, it should be noted that TS is a strongly typed and compiled language, which may be closer to programmers of Java, C#, and other strongly typed languages, although the output of the compiler creates the same JS, which is then executed by the browser. However, strong typing reduces the number of potential errors that could occur when developing in JS.

Second, TS implements many of the concepts that are common to object-oriented languages, such as inheritance, polymorphism, encapsulation, access modifiers, and so on.

Third, the potential of TS makes it faster and easier to write large complex programs, and therefore easier to maintain, develop, scale, and test them than in standard JS.

Fourth, TS develops as an opensource project and, like many projects, is hosted on GitHub. Repository address – https://github.com/Microsoft/TypeScript. In addition, it is cross-platform, which means that we can use both Windows and macOS or Linux for development.

At the same time, TS is a superset of JS, which means that any JS program is a TS program. In TS, you can use all the constructs that are used in JS – the same operators, conditional, cyclic constructs. Moreover, the TS code is compiled in JS. Ultimately, TS is just a tool that is designed to make application development easier.

Although this language does not provide additional functionality in the runtime, it offers a number of features that help developers write more reliable and easier-to-maintain code than in the case of pure JS.

How Does TS Help Developers Code Easier?

As its name suggests, it adds a type system to JS. If in JS the type of a variable is assigned dynamically, then in TS we have to predefine its type immediately at the time of declaration.

If we are talking about JS, then you can first assign an integer value to a variable, and then reassign it to a string value.

let jsVar = 0;

jsVar = "js";

In the case of TS, you can restrict this behavior by declaring the type for the variable explicitly. As a result, if you try, for example, to assign a string to a variable of type number, an error will occur.

let tsVar: number = 0;

tsVar = "ts"; //error

In fact, this is what distinguishes TS from JS. It uses types, which allows us to avoid stupid errors in the code.

How Exactly Does TS Improve JS?

The lack of typing cannot be called a disadvantage of JS, but it gives programmers too much freedom, which inevitably leads to writing code with errors.

let aNumber = 123;aNumber = {

name: "Sufyan",

age: 29

}

In the JS example above, nothing prevents the developer from presenting the object via the aNumber variable. This approach, although it will not cause the program to crash, will completely eliminate the possibility of self-documenting the code at the expense of variable names.

TS easily solves this problem by defining the type of a variable when it is declared, without further assigning it to a value of another type.

let aNumber: number = 123;

If...

Table of contents

• Cover Page
• Half Title Page
• Title Page
• Copyright Page
• Contents
• Acknowledgments
• About the Author
• Chapter 1 TypeScript: Introduction to TypeScript
• Chapter 2 Key Concepts of TS
• Chapter 3 Modules and Namespaces
• Chapter 4 TS Runtime
• Chapter 5 TypeScript Architecture
• Chapter 6 Appraisal
• Appendix
• Index