TYPESCRIPT

TUTORIAL
TypeScript is an open-source object-oriented
language developed and maintained by Microsoft,
licensed under Apache 2 license.
TYPESCRIPT OVERVIEW
 TypeScript is an open-source object-oriented language developed
and maintained by Microsoft, licensed under Apache 2 license.
 It is a typed superset of JavaScript that compiles to plain
JavaScript.
 TypeScript was developed under Anders Hejlsberg, who also led the
creation of the C# language. TypeScript was first released in October
2012.
 Prerequisites
 Basic knowledge of JavaScript is required.

NGUYEN MINH DAO 2

TYPESCRIPT OVERVIEW
 TypeScript extends JavaScript by adding data types, classes, and
other object-oriented features with type-checking.
 It is a typed superset of JavaScript that compiles to plain
JavaScript.
 Official website: https://www.typescriptlang.org
 Source code: https://github.com/Microsoft/TypeScript

NGUYEN MINH DAO 3

TYPESCRIPT VERSION
HISTORY

NGUYEN MINH DAO 4

WHY TYPESCRIPT?
 JavaScript is a dynamic programming language with no type system.
 JavaScript provides primitive types like string, number, object, etc.,
but it doesn't check assigned values.
 JavaScript variables are declared using the var keyword, and it can
point to any value.
 JavaScript doesn't support classes and other object-oriented features.
So, without the type system, it is not easy to use JavaScript to build
complex applications with large teams working on the same code.

NGUYEN MINH DAO 5

WHY TYPESCRIPT?
 The type system increases the code quality, readability and makes it
easy to maintain and refactor codebase. More importantly, errors
can be caught at compile time rather than at runtime.
 Hence, the reason to use TypeScript is that it catches errors at
compile-time, so that you can fix it before you run code. It supports
object-oriented programming features like data types, classes,
Enums, etc., allowing JavaScript to be used at scale.

NGUYEN MINH DAO 6

WHY TYPESCRIPT?
 TypeScript compiles into simple JavaScript.
 The TypeScript compiler is also implemented in TypeScript and can
be used with any browser or JavaScript engines like Node.js.
TypeScript needs an ECMAScript 3 or higher compatible
environment to compile. This is a condition met by all browsers and
JavaScript engines today.
 Some of the most popular JavaScript frameworks like Angular.js
and WinJS are written in TypeScript.

NGUYEN MINH DAO 7

HOW TO USE TYPESCRIPT?
 TypeScript code is written in a file with .ts extension and then compiled into
JavaScript using the TypeScript compiler.
 A TypeScript file can be written in any code editor. A TypeScript compiler needs to
be installed on your platform.
 Once installed, the command tsc <filename>.ts compiles the TypeScript code into a
plain JavaScript file. JavaScript files can then be included in the HTML and run on
any browser.

Compile TypeScript to JavaScript

NGUYEN MINH DAO 8

TYPESCRIPT FEATURES
 Cross-Platform: TypeScript runs on any platform that JavaScript
runs on. The TypeScript compiler can be installed on any Operating
System such as Windows, macOS, and Linux.
 Object-Oriented Language: TypeScript provides powerful
features such as Classes, Interfaces, and Modules. You can write
pure object-oriented code for client-side as well as server-side
development.

NGUYEN MINH DAO 9

TYPESCRIPT FEATURES
 Static type-checking: TypeScript uses static typing. This is done
using type annotations. It helps type checking at compile time.
Thus, you can find errors while typing the code without running
your script each time. Additionally, using the type inference
mechanism, if a variable is declared without a type, it will be
inferred based on its value.
 Optional Static Typing: TypeScript static typing is optional, if you
prefer to use JavaScript's dynamic typing.

NGUYEN MINH DAO 10

TYPESCRIPT FEATURES
 DOM Manipulation: Like JavaScript, TypeScript can be used to
manipulate the DOM.
 ES 6 Features: TypeScript includes most features of planned
ECMAScript 2015 (ES 6, 7) such as class, interface, Arrow
functions etc.

NGUYEN MINH DAO 11

TYPESCRIPT ADVANTAGES
1. TypeScript is an open-source language with continuous development and
maintenance by Microsoft.
2. TypeScript runs on any browser or JavaScript engine.
3. TypeScript is like JavaScript and uses the same syntax and semantics. All of
TypeScript's code finally gets converted into JavaScript. This allows a
quicker learning curve for front-end developers currently coding in
JavaScript.
4. TypeScript is also closer in syntax to backend languages like Java and
Scala. This helps backend developers write front-end code faster.

NGUYEN MINH DAO 12

TYPESCRIPT ADVANTAGES
5. TypeScript code can be called from an existing JavaScript code.
TypeScript also works with existing JavaScript frameworks and
libraries without any issues.
6. The TypeScript Definition file, with .d.ts extension, provides
support for existing JavaScript libraries like jQuery, D3.js, etc. So,
TypeScript code can add JavaScript libraries using type definitions
to avail the benefits of type-checking, code autocompletion, and
documentation in existing dynamically-typed JavaScript libraries.

NGUYEN MINH DAO 13

TYPESCRIPT ADVANTAGES
7. TypeScript has support for the latest JavaScript features from
ECMAScript 2015 . It includes features from ES6 and ES7 that
can run in ES5-level JavaScript engines like Node.js. This offers
a massive advantage of using features from future JavaScript
versions in current JavaScript engines.
8. TypeScript has easy integration with task runner tools like Grunt
and Gulp to automate the workflow.

NGUYEN MINH DAO 14

 15

INSTALL
TYPESCRI
PT

NGUYEN MINH DAO

INSTALL TYPESCRIPT
 There are three ways to install TypeScript:
 Install TypeScript as an NPM package on your local
machine or in your project.
 Install TypeScript NuGet Package in your .NET or .NET
Core project.
 Install TypeScript as a Plug-in in your IDE (Integrated
Development Environment).
NGUYEN MINH DAO 16
INSTALL TYPESCRIPT USING
NPM
 NPM (Node.js package manager) is used to install the TypeScript
package on your local machine or a project. Make sure you have
Node.js install on your local machine.
 If you are using JavaScript frameworks for your application, then it
is highly recommended to install Node.js.
 To install or update the latest version of TypeScript, open command
prompt/terminal and type the following command:
 npm install -g typescript

NGUYEN MINH DAO 17

INSTALL TYPESCRIPT USING
NPM
 The above command will install TypeScript globally so that you
can use it in any project. Check the installed version of TypeScript
using the following command:
 tsc -v
 Execute the following command to install the TypeScript to your
local project as dev dependency.
 npm install typescript --save-dev

NGUYEN MINH DAO 18

INSTALL TYPESCRIPT AS
NUGET PACKAGE
 For .NET or .NET Core projects, TypeScript can be installed as a NuGet
package in your project. The NuGet package
Microsoft.TypeScript.MSBuild is an MSBuild task for TypeScript, which
will automatically compile all .ts files to .js files as per tsconfig.json
configuration when you build your project.
 To install the TypeScript NuGet package, open NuGet Package Manager
by right-clicking on a project node, click Manage NuGet Packages.., and
search for typescript in the Browse tab. It will list all the packages related
to TypeScript. Select Microsoft.TypeScript.MSBuild and click on the
Install button. This will install TypeScript in your local ASP.NET project.

NGUYEN MINH DAO 19

FIRST TYPESCRIPT
PROGRAM: COMPILE AND
RUN
Here, you will learn to write a simple program in TypeScript, compile it and

use it in the web page.
 Create a new file in your code editor and name it add.ts and write the
following code in it.

NGUYEN MINH DAO 20

FIRST TYPESCRIPT
PROGRAM: COMPILE AND
RUN
The above TypeScript code defines the addNumbers() function, call it, and

log the result in the browser's console.
 Now, open the command prompt on Windows (or a terminal on your platform),
navigate to the path where you saved add.ts, and compile the program using
the following command:
 tsc add.ts
 The above command will compile the TypeScript file add.ts and create the
Javascript file named add.js at the same location. The add.js file contains the
following code.

NGUYEN MINH DAO 21

NGUYEN MINH DAO 22
TYPESCRIPT - TYPE
ANNOTATIONS
 TypeScript is a typed language, where we can specify the type of
the variables, function parameters and object properties.
 We can specify the type using : Type after the name of the
variable, parameter or property. There can be a space after the
colon.
 TypeScript includes all the primitive types of JavaScript-
number, string and boolean.

NGUYEN MINH DAO 23

TYPESCRIPT - TYPE
ANNOTATIONS
 The following example declares variables with different data types:

 In the above example, each variable is declared with their data type.

NGUYEN MINH DAO 24

TYPESCRIPT - TYPE
ANNOTATIONS
 These are type annotations.
 You cannot change the value using a different data type other than
the declared data type of a variable. If you try to do so, TypeScript
compiler will show an error. This helps in catching JavaScript
errors.
 For example, if you assign a string to a variable age or a number to
name in the above example, then it will give an error.

NGUYEN MINH DAO 25

TYPESCRIPT - TYPE
ANNOTATIONS
 Type annotations are used to enforce type checking. It is not
mandatory in TypeScript to use type annotations.
 However, type annotations help the compiler in checking types and
helps avoid errors dealing with data types. It is also a good way of
writing code for easier readability and maintenance by future
developers working on your code.
 We can still follow the JavaScript way of declaring variables and
have the TypeScript compiler infer the data type of the variable.

NGUYEN MINH DAO 26

TYPESCRIPT - TYPE
ANNOTATIONS
 The following example demonstrates the type annotation of
parameters.
 Example: Type Annotation of Parameters Copy

NGUYEN MINH DAO 27

TYPESCRIPT - TYPE
ANNOTATIONS
Example: Type Annotation in Object Copy


 Here, we declare an object employee with two properties id and name with the
data type number and string respectively.

NGUYEN MINH DAO 28

TYPESCRIPT - VARIABLE
 TypeScript follows the same rules as JavaScript for variable declarations.
Variables can be declared using: var, let, and const.
 var
 Variables in TypeScript can be declared using var keyword, same as in
JavaScript. The scoping rules remains the same as in JavaScript.
 Let

NGUYEN MINH DAO 29

TYPESCRIPT - VARIABLE
 To solve problems with var declarations, ES6 introduced two new
types of variable declarations in JavaScript, using the keywords let
and const. TypeScript, being a superset of JavaScript, also
supports these new types of variable declarations.
 The let declarations follow the same syntax as var declarations.
Unlike variables declared with var, variables declared with let have
a block-scope. This means that the scope of let variables is limited
to their containing block, e.g., function, if else block or loop block.
Consider the following example.

NGUYEN MINH DAO 30

  In the example, all the
variables are declared
using let.
 num3 is declared in the if
block so its scope is
limited to the if block and
cannot be accessed out of
the if block.
 In the same way, num4 is
declared in the while block
so it cannot be accessed
out of while block.
 Thus, when accessing
num3 and num4 else
where will give a compiler
error.

NGUYEN MINH DAO 31

  The same example with the var declaration
is compiled without an error.

NGUYEN MINH DAO 32

ADVANTAGES OF USING LET
OVER VAR
 1) Block-scoped let variables cannot be read or written to before they are
declared.

 In the above example, the TypeScript compiler will give an error if we

use variables before declaring them using let, whereas it won't give an
error when using variables before declaring them using var.

NGUYEN MINH DAO 33

ADVANTAGES OF USING LET
OVER VAR
 2) Let variables cannot be re-declared
 The TypeScript compiler will give an error when variables with the same
name (case sensitive) are declared multiple times in the same block
using let.

NGUYEN MINH DAO 34

ADVANTAGES OF USING LET
OVER VAR
 In the above example, the
TypeScript compiler treats variable
names as case sensitive. num is
different than Num, so it won't give
any error.
 However, it will give an error for
the variables with the same name
and case.
 Variables with the same name and
case can be declared in different
blocks, as shown below.
NGUYEN MINH DAO 35