![]()
CHAPTER 1
Typescript – The Underdog
Introduction
JavaScript is a dynamic, weakly typed, and prototype-based programming language. It is one of the implementations of the European Computer Manufacturers Association Script (ECMAScript) or simply ES specifications. All standard browsers must accord to ES specifications but can differ in version. Hence few JavaScript keywords/functions/syntax works with few browsers and not with others. To bridge this gap, polyfills libraries exist, but they are not the silver bullets, though.
In October 2012, Microsoft released Typescript – an open-source programming language that is heavily inspired by C#.NET and Java syntax. It is a superset of ECMAScript 5 (that is, JavaScript). Typescript allows a developer to write a web application in an Object-Oriented model, thus allowing constructs like class, inheritance, interfaces, generics, and so on, available to JavaScript developer. All Typescript programs get transpiled into plain JavaScript, which browsers or JavaScript rendering engines (like Google V8) can render. If you have Object Oriented programming background, then you will find Typescript very easy to grab. One of the hurdles with JavaScript is that it is weakly typed language. Without strongly typed language, writing commercial or enterprise-level web applications is not easy. Of course, we can write a well-structured JavaScript application, but it requires expertise and knowledge of subtle rules and features of JavaScript.
Angular has been wholly written in Typescript. In an earlier version of Angular (that is, Angular 2), it was possible to write Angular application using JavaScript as well. You can also write an Angular application using the Dart programming language.
https://webdev.dartlang.org/angular
Tip: Since Angular + Dart combination is not that popular with the web community, Google team has launched another framework called “Flutter” for building a hybrid mobile application using Dart and React like syntax.
Before diving into Angular code, I always strive to have my audience have a clear understanding between Typescript code and Angular framework code. The goal of this chapter is to get you experienced with Typescript constructs and techniques.
Structure
- Basic Data Types
- Numbers
- Boolean
- String
- Array
- Tuple
- Enums
- Object
- Void
- Null and Undefined
- Never
- Variable Declaration
- Functions
- Regular functions
- Anonymous functions
- Arrow functions
- Classes and Interfaces
- Inheritance
- Interface
- Type Conversion
- Union Types
- Generics
- Decorators
- Modules and Namespaces
- Advance types
- Static
- Readonly and Const
- String and Number literal Types
- Type Aliases
Objective
This chapter aims to cover the basics of the TypeScript language. The Angular framework has been built using TypeScript; thus, understanding it is very crucial. We will get into the most commonly used language features and syntax and keep learning more throughout the rest of the book.
Basic Data Types
Every programming language has data types of holding data for the program. Typescript provides basic data types similar to JavaScript and advanced data types like high-rank language like C#.NET or Java.
Number
Like JavaScript, all numeric values are stored in a number data type. If we are coming from C#/ Java languages, then for numeric data types like int, long, float, double, decimal, and so on, we will have to settle down with number data type in Typescript. Note that to store hexadecimal number, prefix value with 0x, for binary number prefix with 0b and octal number prefix with 0o (zero and small letter O). Please refer to Code 1.1 for an example:
let intData: number = 100;
let floatData: number = 20.53;
let longData: number = 9873423524523442319;
let hexData: number = 0x1f2d3;
let binaryData: number = 0b1001;
let octalData: number = 0o1373;
Code 1.1: number data type usage
Boolean
Like C# and Java, we can store true or false value in the boolean data type. Nevertheless, we cannot store a positive number as true value or 0 for false. Note that null and undefined are valid values for a boolean data type, which is not the case with C#. Please refer to Code 1.2 for an example:
let isTypescriptGreat: boolean = true; // works
let noOldStyleBool: boolean = 0; // compiler error
let nullIsValid: boolean = null; // works - no compiler error
let undefinedIsValid: boolean = undefined; // works - no compiler error
Code 1.2: boolean data type usage
String
Typescript has a string data type to hold a string value. The string value can be provided in a single quote or double quote. A string can also contain variable within template expression format if a string is between backquote. A template expression can be any legal Typescript code put inside ${expression} string. Please refer to Code 1.3 for an example:
let bestLanguage: string = ‘Typescript’;
let bestFramework: string = “Angular”;
let templateExample: string = ‘I love ${bestLanguage} and ${bestFramework}!!!’;
Code 1.3: string data type usage
Array
With the Array data type, we can store a collection of values of other data types. Array in Typescript is similar to C#. Array data types provide some basic built-in functions like sort, reverse, and so on. Unlike C#, Typescript Array is an implementation of Stack data structure. There are Push() and Pop() stack methods available out of the box. In C#, we get a separate data type called Stack apart from the basic array data type. We can also use the generic implementation of Array<data_type> version of Array. Please refer to Code 1.4 for an example.
let oddNumbers: number[] = [1, 3, 5, 7, 9];
oddNumbers.push(11);
const lastValue = oddNumbers.pop();
let evenNumbers: Array<number> = [0, 2, 4, 6, 8];
evenNumbers.push(10);
const lastEvenValue = evenNumbers.pop();
Code 1.4: array data type us...
