A beginner’s guide to TypeScript (with some history of the TypeScript)
In this lesson, we are going to learn how TypeScript came into existence and what problem it solves. We are also going to take a glance at the TypeScript compilation process.
C++ programming language. Actually it was not even designed to behave like a general-purpose programming language. It was developed by Brendan Eich in 1995 for the Netscape browser in 10 days. It was supposed to be a scripting language to add dynamic behavior to the web page.
For example, if you declare a variable
var x = 1;, the type of the variable
x will be
number at runtime but you can also assign a new value to it of a different type such as a
string, for example
x = 'hello'. This behavior can cause a lot of issues if we are not being careful.
The failure of Dart
💡 According to Wikipedia, it first appeard in October 2011 and the first official version v1.0 was released in November 2013.
💡 If you want to learn Dart, I have a dedicated publication for it.
The rise of TypeScript
So what is this new syntax and what are types?
y. The variable
x has an initial value of
1 which is a
y however doesn’t have an initial value. It’s initial value is
string when the string
'hello' is assigned to it and then the
true is assigned to it. You can see this from the output of
console.log statements. The same goes with
y. All these types are determined at the runtime.
At this moment, our program doesn’t contain any necessary information that can tell the TypeScript compiler about what is expected out of it. What TypeScript expects are the Type Annotations. A Type Annotation is an indication of the data type of a value.
TypeScript installation (follow this documentation to install TypeScript) comes with the compiler that is accessible through the
tsc command. The
tsc program.ts command compiles the
program.ts file into
As of now, we can see the TypeScript compiler is displaying some errors in the console. If you see, the variable
x has been annotated with
:string. This is the type annotation we talked about. This annotation provides the data type of variable
x to the TypeScript compiler.
When the TypeScript compiler sees this, it assumes that
x will be
string during the lifetimes of this program. However, we have assigned an initial value of
1 which is a
number to it. This is not valid and it will complain about it in the compilation error messages as you can see.
y is annotated with the type of
number. Since it lacks an initial value, TypeScript compiler will watch out for any assignment statements that assign a value to this variable other than a value of
number type. Since we are trying to assign the value
'world' of the type
string to it, this is not valid.
Once we fix all the issues, TypeScript will generate the output file
program-fixed.js that is safe to run wherever we want. TypeScript keeps the original filename of the source file and only replaces the extension.
As you can see from the above output, things in the output program have not changed a bit. So what was the point? Where did all the type annotations go?
What TypeScript adopts is an Erased Type System that removes type annotations any type related information from the compiled program. The type annotations are only there to provide type information of values to the TypeScript compiler during the compilation process. Therefore TypeScript also falls in the category of statically typed languages.
The goal of TypeScript is to catch mistakes in a program before it goes to production and causes problems at the runtime. Its goal is not to provide tools to amend or modify the original source code (business logic) such that can it perform well at the runtime in all the situations.
ES2020 which is the current one. But a developer can mistakenly use a feature from a standard that is pretty new such as
ES6 and run the compiled program in an environment that doesn’t support Promises such as
This is solved by TypeScript using a configuration file, mainly named
tsconfig.json, that contains information about the project and what is expected from the TypeScript compiler. This is a plain JSON file.
outDir specifies the directory where the output
.js files should be emitted by the compiler. The
module option specifies the module system available at the runtime such as
CommonJS used by the Node.js.
When you run the
tsc command, the TypeScript compiler looks for the
tsconfig.json in the current directory. You can provide a custom file path of this configuration file using using
-p command-line flag.
target in this case is set to
ES5 specifications such as
Promise. However, some features are compiled to
target version such as
let variable declaration is converted to
💡 According to Wikipedia, TypeScript first appeared in October 2012 and the first stable version v0.8 was released to the public in the same month. This could mean that Microsoft took the idea or at least the motivation from Dart but nevertheless, it turned out to be a great f***ng decision.
More about TypeScript
Promise) and browser APIs (such as
fetch) that is used by the TypeScript compiler to validate your code if these APIs are used in your code. The
bin directory contains all the command-line tools.
TypeScript has one of the best online documentation. You should spend some time reading this documentation from typescriptlang.org. TypeScript provides an online REPL to compile and test TypeScript programs online.
What to expect from this article series?
In this article series, we will discuss almost all the features TypeScript has to offer with some cool examples. You can find the source of these examples from this GitHub repository (work in progress).
- Introduction: First, we will discuss about the structure of a TypeScript program and how to compile it using the
ts-nodeand run it. Then we will discuss the basic data types provided by the TypeScript such as
- Complex Data Types: Then we will discuss the complex data types such as
classesas well as custom data types such as
enumsprovided by the TypeScript.
- Type System: TypeScript is entirely based on types. That’s why it is necessary to understand the Type System employed by the TypeScript. We will talk about this through various lessons on Type System specifications, Generics, Polymorphism, Data Immutability, and Utility Types.
- Compilation: This is where TypeScript ends, the compilation of TypeScript programs, the final frontier of TypeScript developers. In this section, we are going to discuss the configuration file
tsconfig.json, the TypeScript compiler, and command-line API.
💡 These articles will be presented to you in the sequential order under the
TypeScripttag in the menu of this publication.
I am almost done with all the articles but I would rather release them one or two in a week so that they are properly edited for grammatical and programmatical errors.
💡 I would recommend you to subscribe to this publication to receive these articles in your feed. I do not earn a single penny from these articles so a clap or follow is much appreciated.