TypeScript Language is the superset of JavaScript. In JavaScript have various coding structure available. That confused us for developing. But TypeScript Has some mentions features which help us to write coding for JavaScript easily. In this article, I try to explain how easy to use TypeScript. And I will be give some best reference for TypeScript.
TypeScript a programming language which top of JavaScript & NodeJS compiler. If you wanted to execute your TypeScript code then must be installed NodeJS environment.
Then you need to write this code in your command prompt in windows npm install -g typescript . And If you are Linux/Mac OS X user then use sudo npm install -g typescript . After Then Write a sample code with *.ts extension.
After Installation check, your installation is working properly or not then you open command prompt in windows and terminal in MacOS and Linux. Then type tsc -v and you can findout the version of TypeScript.
Lets we can start writing our TypeScript Code. You can use VisualStudio Code Editor is the one of the best coding editors now.
Let’s understand about the declaration of variables. In TypeScript, we are using let, const, var keywords.
let using for scoping of the variables. const using for constant value which is not changed entirely program. var is dynamic variables type and values assigned in the program.
In TypeScript, we can be assigned variables types. Like, let name: string = ‘Sujoy’
Now I am giving some coding example in bellow:-
Programming Basics:-
Variables Declaration:
const name: string = 'Sujoy'; const age: number = 30; let someData: any; someData = ['Ram', 'Shyam', 'Jadu', 'Madhu', 12, 34, 4.5];
Conditional Syntax: if, if…else, if…elseif…else, switch…case, ?:(Ternary)
Conditional Oparators: == (EqualTo), != (Not Equal), > (Gratter Than), < (Less Than), >= (Gratter Than Equal), >= (Less Than Equal) etc.
Conditional Coding example:
if Only
const year = 2004;
if((year % 4) == 0){
console.log(year+' is leep year');
}if…else
const val = 23;
if((val % 2) == 0){
console.log(val + ' is even number');
}else{
console.log(val + 'is odd number');
}if…elseif…else
const trainFare = 15;
if(trainFare < 5){
console.log('You can travel upto 10Kms');
}elseif(trainFare < 10){
console.log('You can travel upto 20Kms');
}elseif(trainFare < 20){
console.log('You can travel upto 30Kms');
}else{
console.log('Route is not avaliable');
}Switch…Case
const day: string = 'sun';
switch(day){
case 'mon':
case 'tue':
case 'wed':
case 'thu':
case 'fri':
console.log('Working Day');
break;
case 'sat':
case 'sun':
console.log('Holiday');
break;
default:
console.log('No Day selected');
}Ternary Condition:
const age = 16; const isUnderAge = (age < 18)? 'You are under 18 years': 'You are over 18 years'; console.log(isUnderAge);
Now we can be understood about loops. Loops are the process of continual programs. Which can be the incremental or decremental process. Four kinds of loops are available. eg. while, do…while, for, for…of
While Loop:
// While Loop Process
/*
initilization the default values
while(condition){
Statements / program
increment / decrement
}
*/
let lavel = 0;
while(lavel < 10){
console.log('You lavel is '+ lavel);
lavel++; // samilar like: lavel = lavel + 1;
}do…while
// do...While Loop Process
/*
initilization the default values
do{
Statements / program
increment / decrement
}while(condition)
*/
let lavel = 0;
do{
console.log('You lavel is '+ lavel);
lavel++; // samilar like: lavel = lavel + 1;
}while(lavel < 10);For Loop:
// For loop process
/*
for(initilization, condition, intrement / decrement){
statements / programs
}
*/
for(let lavel = 0: lavel < 10; lavel++){
console.log('Lavel '+lavel);
}For…of Loop:
let list = [4, 5, 6];
for (let i in list) {
console.log(i); // "0", "1", "2",
}
for (let i of list) {
console.log(i); // "4", "5", "6"
}Function Declarations:
// Named function
function add(x, y) {
return x + y;
}
// Anonymous function
let myAdd = function(x, y) { return x + y; };
// Typing Functions
function add(x: number, y: number): number {
return x + y;
}
// myAdd has the full function type
let myAdd = function(x: number, y: number): number { return x + y; };
// The parameters 'x' and 'y' have the type number
let myAdd: (baseValue: number, increment: number) => number =
function(x, y) { return x + y; };Class in TypeScript And Uses:
class Animal {
name: string;
constructor(theName: string) { this.name = theName; }
move(distanceInMeters: number = 0) {
console.log(`${this.name} moved ${distanceInMeters}m.`);
}
}
class Snake extends Animal {
constructor(name: string) { super(name); }
move(distanceInMeters = 5) {
console.log("Slithering...");
super.move(distanceInMeters);
}
}
class Horse extends Animal {
constructor(name: string) { super(name); }
move(distanceInMeters = 45) {
console.log("Galloping...");
super.move(distanceInMeters);
}
}
let sam = new Snake("Sammy the Python");
let tom: Animal = new Horse("Tommy the Palomino");
sam.move();
tom.move(34);Interface and Implements:
interface ClockInterface {
currentTime: Date;
setTime(d: Date);
}
class Clock implements ClockInterface {
currentTime: Date;
setTime(d: Date) {
this.currentTime = d;
}
constructor(h: number, m: number) { }
}Enum Datatype in TypeScript:
enum Response {
No = 0,
Yes = 1,
}
function respond(recipient: string, message: Response): void {
console.log(recipient, message); // Output: Princess Caroline, 1
}
respond("Princess Caroline", Response.Yes)The module is another important part of JavaScript, It also important in TypeScript Also. When We want to connect a file object, functions or class. Then we need to use export keyword before object, functions or class. And when we import object, functions or class then we use import keyword. How it works. I give some example in below:-
math-lib.d.ts
export function isPrime(x: number): boolean; export as namespace mathLib;
The library can then be used as an import within modules:
import { isPrime } from "math-lib";
isPrime(2);
mathLib.isPrime(2); // ERROR: can't use the global definition from inside a moduleAnother Example:
MyClass.ts
export default class SomeType {
constructor() { ... }
}MyFunc.ts
export default function getThing() { return "thing"; }Consumer.ts
import t from "./MyClass"; import f from "./MyFunc"; let x = new t(); console.log(f());
In angular have so many decorators function. So I think it is some important to know about the concepts of decorators. Below examples, you can understand the uses of the Decorators.
function classDecorator<T extends {new(...args:any[]):{}}>(constructor:T) {
return class extends constructor {
newProperty = "new property";
hello = "override";
}
}
@classDecorator
class Greeter {
property = "property";
hello: string;
constructor(m: string) {
this.hello = m;
}
}
console.log(new Greeter("world"));After Writing this code you need some other setup in TypeScript.
Command Line:
tsc --target ES5 --experimentalDecorators --emitDecoratorMetadata
tsconfig.json:
{
"compilerOptions": {
"target": "ES5",
"experimentalDecorators": true,
"emitDecoratorMetadata": true
}
}This is all about typescript. You want to know more about typescript. then you can read typescriptlang.org. I want to know feedback for this article.
