This document provides an introduction to TypeScript, a superset of JavaScript that adds optional static types and classes. It discusses why TypeScript was created due to issues with maintaining large JavaScript codebases. The document then covers TypeScript features like type checking, classes, interfaces, modules, and how it compiles to JavaScript. It provides examples of TypeScript syntax for types, classes, interfaces, and other language features. Overall, the document serves as an introduction to TypeScript for developers familiar with JavaScript.
2. 2
TYPESCRIPTTYPESCRIPT
Contents
Introduction............................................................................................................................................................. 3
What is this e-book for?........................................................................................................................................ 3
What is TypeScript?................................................................................................................................................ 4
Typescript Installation........................................................................................................................................... 4
Why Typescript?...................................................................................................................................................... 4
Types in TS............................................................................................................................................................... 5
Support to duck typing.......................................................................................................................................... 5
Use of Jquery in TS................................................................................................................................................. 6
Handling Undefined .............................................................................................................................................. 6
This Keyword........................................................................................................................................................... 6
Creation of classes................................................................................................................................................. 7
Single Inheritance in TypeScript.......................................................................................................................... 7
Static Keyword......................................................................................................................................................... 7
Access modifiers..................................................................................................................................................... 8
Abstract keyword.................................................................................................................................................... 8
Property Initializer (ES 7 feature)........................................................................................................................ 8
Super keyword........................................................................................................................................................ 8
Arrow functions....................................................................................................................................................... 9
Inheritance & this keyword.................................................................................................................................. 9
Rest parameters..................................................................................................................................................... 9
Let keyword.............................................................................................................................................................. 9
Const keyword......................................................................................................................................................... 9
Deep Immutability in TypeScript......................................................................................................................... 10
Destructuring in TypeScript................................................................................................................................. 10
Array destructuring................................................................................................................................................ 10
Array destructuring with rest............................................................................................................................... 10
Array destructuring with ignores........................................................................................................................ 11
For….Of keyword..................................................................................................................................................... 11
Template Strings .................................................................................................................................................... 11
Spread operator..................................................................................................................................................... 12
Promise..................................................................................................................................................................... 12
Creating a promise................................................................................................................................................. 12
Tip............................................................................................................................................................................... 12
Chainability of promise......................................................................................................................................... 13
Best practices ......................................................................................................................................................... 13
Conclusion................................................................................................................................................................ 13
3. 3
TYPESCRIPT
Introduction
Ever Since web browsers and internet was a part of our civilisation, Javascript ruled the part of adding interactions
to our web applications/web sites. Over the years, as days pass by, Javascript (nick-named ‘JS’) became versatile.
With technologies like NodeJS, ElectronJS and third party component integrations from Facebook, twitter and so
on, JS now stands tall. NodeJS calls itself server side javascript, that means we develop server side scalable network
components/ web apis with javascript. It never stops there, JS is now distributable. We use Facebook’s share icon by
integrating their JS library along with some custom html tags. JS is now used to build large-scale applications today.
When we say large-scale applications, there are concepts like reusability and maintainability concern us. JS still is
interpreted, not compiled language. ECMAScript is the subset of Javascript. ECMAScript updates its standards for
new user experiences. ECMAScript 5 and above has lots of new features introduced. Javascript tries to adapt to the
latest standards from ECMAScript but that now takes time. A team of engineers at Microsoft understood some of the
maintainability and scalability issues with Javascript and would like to resolve it by introducing Typescript.
Typescript is not a replacement for Javascript but is a superset of Javascript. The code that was built with JS will run
in Typescript too. Typescript is written following ES6 and above features. We will describe what it is in the following
pages.
What is this e-book for?
We saw an increase in the open-source community on Typescript usage. Some of the world’s famous open source js
libraries now use Typescript. One of the finest examples is the protobuf.js library (https://github.com/dcodeIO/pro-
tobuf.js). It is the next generation to our rest apis designed at Google for faster data access without JSON. Angular
recommends typescript for its developers with its latest versions. There are more TypeScript repositories in github
on search than Javascript (April 01,2018).
Typescript
ES6
ES5
• types
• annotations
• classes
• modules
4. 4
TYPESCRIPT
(screen grab of repositories in github from url https://github.com/search?utf8=%E2%9C%93&q=typescript)
This e-book neither advocates JS lovers to convert to TS nor TS lovers to feel superior. Softcrylic uses TypeScript in
AutomateOn and tried for some components of TapestryKPI. I would like to recommend you love this new standard
of writing Javascript code. Below are some of the new items in TypeScript that makes this ‘new programming lan-
guage’ interesting.
What is TypeScript?
TypeScript, simply, is a programming language, but not to replace Javascript. It is written based on ECMAScript stan-
dards 5 and above, calling it a superset of TypeScript.
Typescript compiles into JavaScript. In order to execute it, we need to have a
a. Typescript compiler,
a. Typescript editor (VS Code, Visual Studio 2013 updated and above, sublime text, atom or any editor of your
choice)
a. To install typescript compiler, we can use npm/sublime plugin and so on
Typescript Installation
We can run typescript either on a browser or a server.
Typescript is available in npm and can be downloaded by this command globally in your system
For OSX it has to be
Why Typescript?
a. JS never had variable types
The above syntax works, but in large systems, if we perform any operations on data, the output differs.
5. 5
TYPESCRIPT
Typescript checks types at compile time. It identifies type mismatch early.
Provides classes and module to follow an object-oriented standard for projects that are highly scalable. When we
deal with multiple codebases, typescript helps a lot.
Types in TS
TypeScript supports the following data types
a. Boolean -> var status:Boolean = false;
b. Number -> var a:number=123;
c. String -> var s:string=”123”;
d. Array -> var list:number[] =[1,2,3];
e. Enum -> enum Color{Red, Green, Blue};
f. Any -> var notSure:any;notSure=123;notsure=”456”;
g. Void -> function Do Something:void(){}
Even if data type is not specified it assigns a data type based on the values we assign
Support to duck typing
In JS, types are structural and hence duck typing is accepted. We can pass additional parameters as types and it is all
right.
6. 6
TYPESCRIPT
Use of Jquery in TS
Consider the jquery code we will use for a selector.
The above line of code will throw error saying $ is not defined while Jquery file is not referenced in JS. In TypeScript $
throws error when not declared. We have to try
Or
Protects you from portion of JS that never worked
Handling Undefined
It is important for us to check a property or a variable undefined or null in strict mode. If you used component based
frameworks strict mode is mandatory & automatically added.
This Keyword
The keyword ‘this’ is called a calling context
//return the foo method instance
7. 7
TYPESCRIPT
Creation of classes
Classes provide structural abstraction.
Single Inheritance in TypeScript
TS supports single inheritance using the extends keyword.
Static Keyword
TS introduces static keywords that can be used on classes.
8. 8
TYPESCRIPT
Access modifiers
Accessible on Public Protected Private
Class Yes Yes Yes
Class children Yes Yes No
Class instances Yes No No
Abstract keyword
Property Initializer (ES 7 feature)
Super keyword
Used to initialize an object in the base class method.
9. 9
TYPESCRIPT
Arrow functions
is thin arrow.
Is fat arrow functions (used) or lambda functions
Inheritance & this keyword
We can’t use ‘super’ keyword without ‘this’ keyword. You can create a copy & use it.
Rest parameters
Rest parameters (denoted by …..argument Name for last argument) allow you to quickly accept multiple arguments
in your function and get them as an array.
Let keyword
Var keyword in JS is function scoped.
This is why ES6 introduces ‘let’ keyword
Use let if you want a variable to be block scoped loop failures.
Const keyword
Declare constant with ‘const’ keyword.
Must be initialized during declaration
10. 10
TYPESCRIPT
Block scoped
Deep Immutability in TypeScript
Destructuring in TypeScript
Breaking up the structure
Object destructuring Array destructuring
If assign an extended variable to a new variable name you can do the following.
Array destructuring
Array destructuring with rest
11. 11
TYPESCRIPT
Array destructuring with ignores
For….Of keyword
Disadvantages of for in
For…of exists in TS (ES6)
Template Strings
Syntactically these are strings that use backticks (i.e.) instead of angle (‘) or double (“) quotes.
a. String interpolation
b. Multiline Strings
c. Tagged templates.
12. 12
TYPESCRIPT
Spread operator
Main objective is to spread the objects of an array.
In JS we had to us function.prototype.apply()
Promise
Modern JS engines have this and easily polyfilled.
The main motivation behind promises is to bring synchronous style and error handling to Async/Callback style code.
When we are using a callback it should follow the below rules while in call back.
a. Never call the callback twice
b. Never throw an error
Creating a promise
A promise can be either
a. Pending,
b. Resolved,
c. Rejected
Tip
• Creating an already resolved promise: promise.resolve (result)
• Creating an already rejected promise: promise.reject (error)
13. 13
TYPESCRIPT
Chainability of promise
We can chain promises using the ‘then’ function
There are 2 types of declaration spaces in typescript
Type declaration Variable declaration
Best practices
• Functions variables should be camel case
• Use pascal case for classes, interface
• Interface members should be camel case
• Do not use the prefix I (unconventional lib.d.ts defines important interfaces without an I)
• Namespaces should be pascal case, enum
• Don’t make variable undefined but nullable
• Use ‘return undefined’ instead of null if it’s a part of A/I or conventional (Nodys error is null by default)
• Use undefined for next level truthy or falsy.
• Use error 1=undefined & not error
• Space b4 type const foo: string=”hello”;
• Prefer single quotes
• Prefer backticks if possible
• Don’t use tabs but 2 spaces
• Use semicolon
Conclusion
Typescript has introduced a new way of writing javascript applications at large scale. With the power of ES6 and above,
the language looks simple, object-oriented and easy to learn. The new features are more, but this e-book describes
some of the important syntax Typescript offered to solve real-world problems JS was facing for years. TypeScript would
be worth a try for large-scale applications.
