Getting started with Typescript
Tags: typescript, reactwithtypescript
Published: 2022-02-24 17:30:34


**What is TypeScript?**
 
Typescript is an Open source programming language developed and maintained by Microsoft. It is designed for the development of large-scale applications and the most important difference between Typescript and Javascript is that they are two different programming languages, though Typescript is heavily based on Javascript. In simple terms people use to call it as Typescript is a superset of Javascript It means that all valid code written in Javascript is also valid in Typescript as well.
 
Benefits of using Typescript in your project 
 
TypeSafety

As we all know, Javascript has no type. So it's hard to control all the parameters and variables that we are using and validate them. Since TypeScript is like Javascript but with Types. It helps make our code easier to read and avoid errors.
 
Without defining Type 
function addTwo(num)  
{  
  return num + 2;  
}  
  
addTwo(2); // Returns 4;  
  
addTwo("Two"); // Returns "Two2"  
 Typing
function addTwo(num : number)    
{    
  return num + 2;    
}    
    
addTwo(2); // Returns 4;    
    
addTwo("Two"); // Compile Error   
Using Classes & Interfaces
 
Class
 
Similar to C#Java, C++ Typescript also allows us to use Classes inside the ts files. It offers full support for the class keyword introduced in ES(Ecmascript) 2015. Typescript adds type annotations and another syntax to allow you to express relationships between classes and other types.
 
Class Members:
Public Class Value {}  
Adding members to the above-mentioned class
 
Fields
 
A field declaration creates a public writable property on a class. 
class Value {  
  x: number;  
  y: number;  
}  
  
const pt = new Value();  
vl.x = 0;  
vl.y = 0;  
 Property Initialization: The property initialization setting controls whether class fields need to be initialised in the constructor.
 
Without Initialization 
class Point {  
  name: string;  
Property 'name' has no initializer and is not definitely assigned in the constructor.  
}  
 With initialization
class Point {  
  name: string;  
  
  constructor() {  
    this.name = "hello";  
  }  
}  
Interface
 
An interface defines the syntax that any entity must adhere to. Interfaces define properties, methods, and events, which are the members of the interface.
 
Interfaces are not to be converted to JavaScript. It’s just part of TypeScript. If you see the screenshot of the TS Playground tool there is no javascript emitted when you declare an interface, unlike a class. So interfaces have zero runtime JavaScript impact.
 
Implementation of Interface in ts file
interface Vehicle{    
  wheels: Number;    
}    
    
class Car implements Vehicle {    
   public wheels: Number;  
   public hasTrunk: Boolean;  
}   
  
class MotorCycle implements Vehicle{  
   public wheels : Number;  
}  
IDE Support
 
Information about types makes editors and Integrated development environments (IDE) much more helpful. They can offer features like code navigation and autocompletion, providing accurate suggestions. You also get feedback while typing: The editor flags errors, including type-related as soon as they occur. All this helps you write maintainable code and results in a significant productivity boost.
 
With Microsoft Visual Studio as the most popular and natural environment for running TypeScript, it is also supported by many other EDIs including
WebStorm, the intelligent JavaScript IDE;
Eclipse, an integrated IDE offering a plugin for TS development;
Visual Studio Code, a lightweight cross-platform editor by Microsoft;
Atom, a cross-platform text editor; and
CATS, an open-source TypeScript development environment.
Future EcmaScript (ES6)
 
TypeScript is a strict superset of ECMAScript 2015, which is itself a superset of ECMAScript 5, commonly referred to as JavaScript. As such, a JavaScript program is also a valid TypeScript program, and a TypeScript program can seamlessly consume JavaScript. A transpiler converts the ES6 based code into ES5 which is supported by many browsers. TypeScript is a transpiler. Grunt, Gulp, and Babel are some other transpilers to compile the modules. Therefore, TypeScript supports ES6.
 
Keep learning ..... !