Defining TypeScript
TypeScript is an object-oriented programming language developed and maintained by Microsoft Corporation. It is a superset of JavaScript and contains all of its elements and we can say that TypeScript is modern JavaScript with classes, optional types, interfaces, and more.
TypeScript totally follows the OOPS concept and with the help of TSC (TypeScript Compiler), we can convert Typescript code (.ts file) to JavaScript (.js file)
Typescript is a superset of JavaScript.
A brief history of TypeScript
In 2010 Anders Hejlsberg (the founder of Typescript) started working on Typescript at Microsoft and in 2012 the first version of Typescript was released to the public (Typescript 0.8). Although the release of Typescript was praised by many people around the world, still due to lack of support in major IDEs, it was not majorly adopted by the JavaScript community.
The first version of Typescript (Typescript 0.8) was released to the public in October 2012.
The latest version of Typescript (Typescript 3.0) was released to the public on July 2018 and you can
Download the latest version here!
Why should we use TypeScript?
- TypeScript simplifies JavaScript code which is easier to read and debug
- TypeScript is Open source
- TypeScript provides highly productive development tools for JavaScript IDE and practices like static checking
- TypeScript makes code easier to read and understand
- With TypeScript, we can make a huge improvement over plain JavaScript
- TypeScript gives us all the benefits of ES6 (ECMAScript 6), plus more productivity
- TypeScript can help to avoid painful bugs that developers commonly run into when writing JavaScript by type-checking the code
- The powerful type system, including generics
- TypeScript is nothing but JavaScript with some additional features
- Structural, rather than nominal
- TypeScript code can be compiled as per ES5 and ES6 standards to support the latest browser
- Aligned with ECMAScript for compatibility
- Starts and ends with JavaScript
- Supports static typing
- TypeScript will save your developers time
- TypeScript is a superset of ES3, ES5, and ES6
TypeScript Additional Features:
- Functions with optional parameters
- Functions with rest parameters
- Generics support
- Modules support
Differences between TypeScript and JavaScript
TypeScript uses concepts such as types and interfaces to describe data being used. This allows developers to rapidly detect errors.
| TypeScript | JavaScript |
|---|---|
| It is an object oriented programming language | It is a scripting language |
| In TypeScript there is a Static typing feature | There is no static typing |
| In TypeScript, we can declare a variable in multiple ways like: var Identifier:Data-type = value; var Identifier: Data-type; var Identifier = value; var Identifier; |
JavaScript does not have data types, so we cannot declare variables like TypeScript. |
| TypeScript support modules | JavaScript does not support modules |
| TypeScript has interfaces. | JavaScript does not have Interface. |
| TypeScript supports optional parameter function. | JavaScript has no optional parameter feature. |
| It supports function Overloading | JavaScript doesn’t supports function Overloading |
| Typescript supports data types | JavaScript doesn’t support data types |
Google has also announced they would replace AtScript with TypeScript. Angular 2 is built on TypeScript as well.
See what others said about the web’s most popular language TypeScript
“We love TypeScript for many things… With TypeScript, several of our team members have said things like ‘I now actually understand most of our own code!’ because they can easily traverse it and understand relationships much better. And we’ve found several bugs via TypeScript’s checks.”
— Brad Green, Engineering Director – AngularJS
“One of Ionic’s main goals is to make app development as quick and easy as possible, and the tooling support TypeScript gives us with autocompletion, type checking, and source documentation really align with that.”
— Tim Lancina, Tooling Developer – Ionic
“TypeScript is a smart choice when writing a modern web- or JavaScript-based application.TypeScript’s carefully considered language features and functionality, and its consistently improving tools, result in terrifically productive development experience.”
— Aaron Cornelius, Research Fellow – Epic
“TypeScript helped us to reuse the team’s knowledge and to keep the same team velocity by providing the same excellent developer experience as C# … A huge improvement over plain JavaScript.”
— Valio Stoychev, PM Lead – NativeScript
Talk to our TypeScript expert
to put your ideas into execution
Top TypeScript Features You Might Not Know
Object-Oriented Programming
Typescript includes a very good set of Object-Oriented Programming (OOP) features, that are good to maintain robust and clean code; this improves the code quality and maintainability. These OOP features make the TypeScript code very clean and organized.
Example with the following snippet:
class CustomerModel {
customerId: number;
companyName: string;
contactName: string;
country: string; } class CustomerOperation{
addCustomer(customerData: CustomerModel) : number {
//add customer
let customerId =5;// Id returned after save
return customerId; } }
Supports Interfaces, generics, Inheritance, and method access modifiers
Typescript supports interfaces, generics, Inheritance, and method access modifiers. Interfaces are a good way of specifying a contract. Generics helps to provide compile-time checking, inheritance enables new objects to take on the properties of existing objects and Access modifiers control the accessibility of the members of a class. TypeScript has two access modifiers – public and private. By default, the members are public but you can explicitly add a public or private modifier to them.
Example with the following snippet:
Interface:
interface ITax {
taxpayerId: string;
calculateTax(): number;
} class IncomeTax implements ITax {
taxpayerId: string;
calculateTax(): number {
return 10000;
} } class ServiceTax implements ITax {
taxpayerId: string;
calculateTax(): number {
return 2000;
} }
Access Modifiers and properties:
class Customers{
public companyname:string;
private country:string; }
Showing one public and one private variable
Inheritance:
class Employee{
Firstname:string;
} class Company extends Employee {
Department:string;
Role:string
private AddEmployee(){
this.Department=“myDept”;
this.Role=“Manager”;
this.FirstName=“Test”;
// do the operation
} }
Generics:
function identity<T> (arg: T): T {
return arg;
}
//example showing implementation of generics
let output = identity <string>(“myString”);
let outputl = identity <number> (23);
Strongly/Static type
TypeScript does not allow intermixing of values with different datatypes. When such restrictions are violated, errors are thrown. Therefore, you have to define type when declaring variables and you cannot assign other values other than the type defined which is very possible in JavaScript.
Example with the following snippet:
let testnumber: number = 6; testnumber = "myNumber"; // This will throw an error. testnumber = 5; // This will work
Compile Time/Static Type-checking
If we do not follow the proper syntax and semantics of any programming language , then compile time errors are thrown by the compiler. They will not let your program to execute a single line until, you remove all the syntax errors or until you debug the compile time errors. It is the same case with TypeScript as well.
Example with the following snippet:
let isDone: boolean = false; isDone = "345"; //This will throw an error. isDone = true; //This will work
Less Code as compared to JavaScript
Typescript is a wrapper around JavaScript so helper classes are available that reduce the code. The code in Typescript is easier to understand.
Readability
Interfaces, classes, etc. provide readability to the code. As the code is written in classes and Interfaces, it is more meaningful and easy to read and understand.
Example with the following snippet:
class Greeter {
private greeting: string;
constructor (private message: string) {
this.greeting = message;
}
greet() {
return “Hello, “ + this.greeting;
} }
Javascript code:
var Greeter = (function () {
function Greeter(message) {
this.greeting = message;
}
Greeter.prototype.greet = function () {
return “Hello, “ + this.greeting;
};
return Greeter; })();
Compatibility
Typescript is compatible with JavaScript libraries like underscores, Lodash, etc. They have many inbuilt and easy to use functions that make development faster.
Provide a “compiler” that can convert code to JavaScript-equivalent code
TypeScript code consists of plain JavaScript code as well as certain keywords and constructs specific to TypeScript. However, when you compile the TypeScript code it is converted into plain JavaScript. That means the resultant JavaScript can be used with any browser that supports JavaScript.
Supports Module
As your TypeScript codebase grows, it becomes important to organize classes and interfaces for better maintainability. TypeScript modules allow you to do just that. A module is a container for your code that helps you organize your code in a neat way. Conceptually you may find them similar to .NET namespaces.
Example with the following snippet:
module Company {
class Employee {
}
class EmployeeHelper {
targetEmployee: Employee;
}
export class Customer {
} } var obj = new Company.Customer();
ES6 Feature Support
Typescript is a superset of ES6, so all features of ES6 are there plus some additional features like it supports Arrow Function commonly called lambda function. ES6 has introduced a slightly different syntax to define anonymous functions called the fat arrow syntax.
Example with the following snippet
setTimeout(() => {
console.log("setTimeout called!")
}, 1000);
Used in Popular Frameworks
TypeScript has become more and more popular over the last few years. Maybe the defining moment of TypeScript popularity was the time when Angular 2 officially switched to TypeScript, which was a win-win situation.
Reduces bugs
It reduces bugs like Null handling, undefined, etc. Strongly typed characteristics restrict developers to write type-specific code with proper checks.
Function Overloading
TypeScript allows you to define overloaded functions. This way you can invoke different implementations of a function depending on the parameter. Remember, however, that TypeScript function overloading is a bit odd and requires type checking during the implementation. This limitation is due to the fact that TypeScript code finally gets compiled into plain JavaScript and JavaScript doesn’t support the concept of function overloading in its true sense.
Example with the following snippet:
class functionOverloading{
addCustomer(custId: number);
addCustomer(company: string);
addCustomer(value: any) {
if (value && typeof value == “number”) {
alert(“First overload – “ + value);
}
if (value && typeof value == “string”) {
alert(“Second overload – ” + value);
}
} }
Constructors
The classes you define in TypeScript can have constructors. The constructor usually does the job of initializing the object by setting default values to its properties. The constructor can also be overloaded just like a function.
Example with the following snippet:
export class SampleClass{
private title: string;
constructor(public constructorexample: string){
this.title = constructorexample;
} }
Debugging
It is easy to debug the code written with TypeScript.
TypeScript is just JavaScript
TypeScript starts with JavaScript and ends with JavaScript. Typescript adopts the basic building blocks of your program from JavaScript. All TypeScript code is converted into its JavaScript equivalent for the purpose of execution.
Example with the following snippet:
class Greeter {
greeting: string;
constructor (message: string) {
this.greeting = message;
}
greet() {
return “Hello, “ + this.greeting;
} }
Javascript code:
var Greeter = (function () {
function Greeter(message) {
this.greeting = message;
}
Greeter.prototype.greet = function () {
return “Hello, “ + this.greeting;
};
return Greeter; })();
Portable
TypeScript is portable across browsers, devices, and operating systems. It can run on any environment that JavaScript runs on. Unlike its counterparts, TypeScript does not need a dedicated VM or a specific runtime environment to execute.
Summary
We recommend Typescript for any large/medium projects because of its language features.
At GrayCell Technologies, we are using TypeScript extensively for some of our projects. If you have any questions about Typescript, drop a mail to us, and we will get in touch with you.
Looking to hire dedicated Typescript developers? Let us help!
Contact us and let’s talk about your business
