isplTypeScript is a typed superset of JavaScript that compiles to plain JavaScript.
TypeScript — — — — — -> Transpile — — — — — →Javascript
It has features like
— Strongly Typed
— Object Oriented (Class, Interface etc..)
— Support for type error with cool tools like VS Code editor
Installation
For Mac:
$ sudo npm install -g typescript
…
$ tsc — version
Version 2.5.2
Editor :
Use VS Code editor to see type error (https://code.visualstudio.com/)After the installation, open the editor. If you are in Mac type Shift + Command + P Search for Path, and Install. This will help you to open the editor from command line.
How to run TS file ?
$ mkdir ts-example
$ cd ts-example/
ts-example raja$ code main.ts
It will open the VS Code editor with the file main.ts . Here ‘ts’ stands for typescript
main.ts:
function write(message) {
console.log(message);
}
var message = ‘Hello World’;
write(message);
ts-example raja$ tsc main.ts
ts-example raja$ ls
main.js main.ts main.js:
function write(message) {
console.log(message);
}
var message = ‘Hello World’;
write(message);
ts-example raja$ node main.js
Hello World
Variable
function someWork() {
for (var i = 0; i < 5; i++) {
console.log(i);
}
console.log(‘Finally : ‘ + i);
}
someWork(); Run :$ tsc main.ts
$ node main.js
0
1
2
3
4
Finally : 5
So var i is available outside of the for loop i.e to the nearest function someWork.
Use let instead of var :
function someWork() {
for (let i = 0; i < 5; i++) {
console.log(i);
}
console.log(‘Finally : ‘ + i); //Compile Error in VS Code
}
someWork(); One can find the compile time error. Check the editor.
* let has the scope to the block rather to the nearest function.
$ ls
main.js main.ts
$ rm main.js
$ tsc main.ts
main.ts(5,32): error TS2304: Cannot find name ‘i’.
main.js main.ts TS has to be compiled to ES5 JS file and ES5 doesn’t have let keyword. So it will convert the let keyword to var.
$ cat main.js
function someWork() {
for (var i = 0; i < 5; i++) {
console.log(i);
}
console.log(‘Finally : ‘ + i);
}
someWork();
Types:
let count = 1; //Its a number
count = ‘a’; //Compile type error, cant assign string to a number variable
let a; //Type any, it can take any type
a = 1; //No error
a = “hello”; //No error
a = false; //No error
* So better to give a type to a variable
let a: number; //Type number
a = 1; //No error
a = “hello”; //Compile time error
a = false; //Compile time error
Other Types:
let a: number;
let b: boolean;
let c: string;
let d: any; //Store any type
let e: number[];
let f: number[] = [1,2,3]; //Initialized number array
let g: any[] = [1, “hello”, true]; //Array to store any type
ENUM
TS has Enum to store constants
enum Color {
Red = 0,
Blue = 1,
Green = 2
};
let bgColor = Color.Blue;
Type Assertion:
let message = ‘xyz’;
let mEndsWith = message.endsWith(‘z’);
VS Code editor suggest methods after the dot operator as it knows message type which is a string
let message1; //Any type
message1 = ‘hello’;
//message1. <wont suggest anything as the editor does not know the type of message1>
let m1EndsWith = (<string>message1).endsWith(‘o’); //Only help in compile time to find the method associated by casting
let m1EndsWith1 = (message1 as string).endsWith(‘o’);//Another way
Arrow functions
//Normal function definition
let printData = function(inputData) {
console.log(inputData);
}
Arrow function : Remove the function keyword and use => as below
//Single Parameter
let printData1 = (inputData) => {
console.log(inputData);
}
//Other way, remove the curly braces if it is a single line
let printData2 = (inputData) => console.log(inputData);
//Another way, even parenthesis can be removed if only single input parameter
let printData3 = inputData => console.log(inputData);
//No parameter
let printData4 = () => {
console.log();
}
let printData5 = () => console.log();
Custom Type :
Interface
Check the following function
//Pass parameter as object
let drawMorePoint1 = (point) => {
//….draw
}
drawMorePoint1({x:1,y:2});
However if we pass string as parameter we won’t get any compile time error but the code will break
drawMorePoint1({x:’name’,y:2});
Solution -1
Define inline annotation. Define what point is expecting, in our case 2 params x, y and both should be number. However if we pass string then we can find the compile time error in editor.
let drawMorePoint2 = (point: {x: number, y: number}) => {
//….draw
}
drawMorePoint2({
x:’1′, //compile time error
y:2
});
Inline annotation is difficult to use in all the places. Every time we have to repeat this in other places and if more no of arguments are present then its hard to read.
So lets bring the concept called Interface
Solution -2
Create a interface Point which has 2 field definition x, y that stores number.
Use Point as type for the object point in the method drawMorePoint3
interface Point {
x: number,
y: number
}
let drawMorePoint3 = (point : Point) => {
//….draw
}
//If we pass other type
drawMorePoint3({
x:’1′, //compile time error
y:2
});
//No error if number is passed
drawMorePoint3({
x:1,
y:2
});
However we are breaking cohesive rule with above structure. Meaning, the related method (drawMorePoint3) is not part of the interface. Its outside of it.
Can we add function implementation inside a interface ?
We can only add the function declaration but not the implementation.
//Interface can not have function implementation but only declaration
interface Point {
x: number,
y: number,
draw: () => void //empty function return void
}
//Here function is related to Interface but not part of it.
let drawMorePoint = (point : Point) => {
//….draw
}
So to make the cohesiveness work lets bring the concept called Class.
Class
class Point {
x: number; //Fields
y: number;
draw() {
console.log(‘X: ‘ + this.x + ‘ Y: ‘ + this.y);
}
getDistance(anotherPoint: Point) {
//…
}
}
In the example above draw()and getDistance(anotherPoint: Point)methods which are part of the unit. Its not hanging outside and polluting the global space.
*One way of creating object
let point: Point = new Point(); //allocate memory
*Another clean way of creating object.Type declaration not needed
let point = new Point();
*Accessing Fields
point.x = 1;
point.y = 2;
point.draw();
How to initialize an Object ?
Using Constructor keyword
class Point {
x: number;
y: number;
constructor(x?: number, y?: number) {
this.x = x;
this.y = y;
}
draw() {
console.log(‘X: ‘ + this.x + ‘ Y: ‘ + this.y);
}
}
let point = new Point(1, 2);
point.draw();
let point1 = new Point();
point1.draw();
Example above adding ‘?’ as prefix to field variable in constructor makes parameter optional.
No concept of constructor overloading in TS.
Access Modifier
3 types :
— public
— private
— protected
class Point {
private x: number;
private y: number;
constructor(x?: number, y?: number) {
this.x = x;
this.y = y;
}
draw() { //default it is Public but one can add Public as Prefix
console.log(‘X: ‘ + this.x + ‘ Y: ‘ + this.y);
}
}
let point = new Point(1, 2);
point.x = 5; //Compile error, property is private
point.y = 7; //Compile error, property is private
point.draw();
Clean code :
Don’t need to add private field. It can be defined in constructor itself. Constructor automatically create and assign passed value to the fields.
class Point {
constructor(private x?: number, private y?: number) {
}
draw() {
console.log(‘X: ‘ + this.x + ‘ Y: ‘ + this.y);
}
}
let point = new Point(1, 2);
point.draw();
How to Access private data ?
Add getter and Setter functions :
class Point {
constructor(private x?: number, private y?: number) {
}
draw() {
console.log(‘X: ‘ + this.x + ‘ Y: ‘ + this.y);
}
getX() {
return this.x;
}
setX(value) {
if (value < 0) {
throw new Error(‘Value can not be less than 0’)
}
this.x = value;
}
}
let point = new Point(1, 2);
let x = point.getX();
point.setX(10)
point.draw();
Instead of get and set function TS has a better approach below.
class Point {
//Use underbar so not to have any issues with property name (getter and setter)
constructor(private _x?: number, private _y?: number) {
}
draw() {
console.log(‘X: ‘ + this._x + ‘ Y: ‘ + this._y);
}
get x() { //get, space then property name
return this._x;
}
set x(value) { //set, space then property name
if (value < 0) {
throw new Error(‘Value can not be less than 0’)
}
this._x = value;
}
}
let point = new Point(1, 2);
let x = point.x //Just use as field not as function
point.x = 10;
point.draw();
Note :
Property looks like a field from outside but internally its a method in a class more specifically getters and setters.
Modules
Modules helps TS to organize the code in different files. Check the example below.
Create another file called point.ts and moved the class definition.
point.ts :
Use export keyword to open the visibility of the class to other files
export class Point {
constructor(private _x?: number, private _y?: number) {
}
draw() {
console.log(‘X: ‘ + this._x + ‘ Y: ‘ + this._y);
}
}
main.ts :
In the example below I mention the Class name Point (between curly braces) which I want to import.
We don’t need to add .ts as suffix in the module name from which we are importing.
import {Point} from ‘./point’;
let point = new Point(1, 2);
point.draw();