What is TypeScript

TypeScript has become so popular in recent years that it’s tempting to wonder: With so many adherents, is TypeScript a new language?

TypeScript is an object-oriented programming language developed and maintained by Microsoft. It is a superset of JavaScript and contains all of its elements.

TypeScript follows exactly the OOPS concept and converts TypeScript code (.ts files) to JavaScript (.js files) with the help of TSC (TypeScript compiler)

TypeScript is a superset of JavaScript

A brief history of TypeScript

In 2010, Anders Hejlsberg (TypeScript’s creator) began working on TypeScript at Microsoft and released the first version of TypeScript (TypeScript 0.8) to the public in 2012. Although TypeScript’s release has been praised by many around the world, it has not been largely adopted by the JavaScript community due to the lack of support from major ides.

The first version of TypeScript (TypeScript 0.8) was released in October 2012.

The latest version of Typescript (Typescript 3.0) was released in July 2018. You can download the latest version here!

Why do we use TypeScript?

  • TypeScript simplifies JavaScript code, making it easier to read and debug.
  • TypeScript is open source.
  • TypeScript provides efficient development tools for JavaScript ides and practices such as static checking.
  • TypeScript makes code easier to read and understand.
  • With TypeScript, we can greatly improve normal JavaScript.
  • TypeScript offers us all the benefits of ES6 (ECMAScript 6), as well as greater productivity.
  • By type-checking code, TypeScript helps us avoid the painful errors we often encounter when writing JavaScript.
  • Powerful type system, including generics.
  • TypeScript is just JavaScript with some additional functionality.
  • TypeScript code compiles to ES5 and ES6 standards to support the latest browsers.
  • Align with ECMAScript for compatibility.
  • Start and end with JavaScript.
  • Static types are supported.
  • TypeScript saves developers time.
  • TypeScript is a superset of ES3, ES5, and ES6.

Additional features of TypeScript

  • A function with optional arguments.
  • A function that uses REST parameters.
  • Generic support.
  • Module support.

Four, Daniel appeared to say:

  • “There are a lot of things we like about TypeScript… With TypeScript, several of our team members have said something similar, and I actually understand most of our own code now! Because they can walk through it easily and understand the relationship better. We’ve already found several vulnerabilities in TypeScript checks. -Brad Green, Angular Engineering Director

  • One of Ionic’s main goals is to make application development as fast and easy as possible. Tools support for TypeScript gives us auto-completion, type checking, and source documentation

    Be truly consistent with it.”

    -Tim Lancina, Tools developer — Ionic”

  • TypeScript is the wisest choice for writing modern web – or javascript-based applications. **TypeScript’s carefully considered language features and capabilities, along with its evolving tools, make for a very productive development experience.” -Epic researcher Aaron Cornelius

  • TypeScript helps us reuse team knowledge and maintain the same team speed by providing the same great development experience as C#… It’s a huge improvement over normal JavaScript.” -Valio Stoychev, PM Lead — NativeScript”

Top TypeScript features you may not know about

1. Object-oriented programming

TypeScript includes a nice set of object-oriented programming (OOP) features that help maintain robust and clean code; This improves code quality and maintainability. These OOP features make TypeScript code very clean and organized.

Such as:

class CustomerModel { customerId: number; companyName: string; contactName: string; country: string; }class CustomerOperation{addCustomer(customerData: CustomerModel) : number {// Add user let customerId = 5; // Save the ID return customerId; }}Copy the code

Interface, generics, inheritance, and method access modifiers

TypeScript supports interfaces, generics, inheritance, and method access modifiers. Interfaces are a good way to specify contracts. Generics help provide compile-time checking, inherit to give new objects properties of existing objects, and access modifiers control the accessibility of class members. TypeScript has two access modifiers, public and private. By default, members are public, but you can explicitly add public or private modifiers to them.

(1) 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; }}Copy the code

(2) Access modifiers

class Customers{ public companyname:string; private country:string; }Copy the code

Displays a public variable and a private variable

(3) Inheritance

class Employee{ Firstname:string; }class Company extends Employee { Department:string; Role:string private AddEmployee(){ this.Department="myDept"; this.Role="Manager"; this.FirstName="Test"; }}Copy the code

(4) Generics

function identity<T> (arg: T): T { return arg; } let output = identity <string>("myString"); let outputl = identity <number> (23);Copy the code

(5) Strong/static type

TypeScript does not allow values to be mixed with different data types. If these restrictions are violated, an error is thrown. Therefore, you must define a type when declaring a variable, and you cannot assign any value other than a type that would most likely be defined in JavaScript.

Such as:

let testnumber: number = 6; testnumber = "myNumber"; // This raises the error testNumber = 5; // That will doCopy the code

Compile time/static type checking

If we do not follow the correct syntax and semantics of any programming language, the compiler will throw compile-time errors. They don’t let the program execute a line of code until all syntax errors are removed or compile-time errors are debugged. TypeScript is the same way.

Such as:

let isDone: boolean = false; isDone = "345"; // This will raise an error isDone = true; // That will doCopy the code

4. Less than JavaScript code

TypeScript is a wrapper around JavaScript, so you can use helper classes to reduce code. Typescript code is easier to understand.

5. Readability

Interfaces, classes, and so on provide readability for code. Because the code is written in classes and interfaces, it makes more sense and is easier to read and understand.

For example:

class Greeter {  private greeting: string;  constructor (private message: string) {    this.greeting = message;  }  greet() {    return "Hello, " + this.greeting;  }}
Copy the code

JavaScript code:

var Greeter = (function () { function Greeter(message) { this.greeting = message; } Greeter.prototype.greet = function () { return "Hello, " + this.greeting; }; return Greeter; }) ();Copy the code

6. Compatibility

Typescript is compatible with JavaScript libraries such as underscore. Js, Lodash, and more. They have many built-in and easy-to-use features that make development faster.

7. Provide a “compiler” that converts code into JavaScript equivalent code

TypeScript code consists of pure JavaScript code and some typescript-specific keywords and constructs. However, when TypeScript code is compiled, it is converted to plain JavaScript. This means that the generated JavaScript can be used with any browser that supports JavaScript.

8. Support modules

As the TypeScript code base grows, it becomes important to organize classes and interfaces for better maintainability. TypeScript modules allow you to do this. Modules are containers for code that help you organize your code in a neat way. Conceptually, you might find that they are similar. NET namespace.

Such as:

module Company {  class Employee {  }    class EmployeeHelper {    targetEmployee: Employee;  }    export class Customer {  }}var obj = new Company.Customer();
Copy the code

9. ES6 function support

Typescript is a superset of ES6, so it has all the features of ES6. There are also features such as support for arrow functions, commonly called lambda functions. ES6 introduces a slightly different syntax for defining anonymous functions, called the Fat arrow syntax.

For example:

setTimeout(() => { console.log("setTimeout called!" )}, 1000);Copy the code

10. Use in popular frameworks

TypeScript has become increasingly popular over the past few years. Perhaps the defining moment in TypeScript’s popularity was when Angular2 officially converted to TS, which was a win-win situation.

Reduce mistakes

It reduces errors such as null processing, undefined, etc. Strongly typed features that restrict developers to writing specific types of code with appropriate type checking.

Function overloading

TypeScript allows you to define overloaded functions. This way, you can call different implementations of the function based on the arguments. However, keep in mind that TypeScript function overloading is a bit strange and requires type checking during implementation. This limitation is due to the fact that TypeScript code is ultimately compiled into pure JavaScript, which does not support the concept of function overloading in the true sense.

Such as:

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); }}}Copy the code

constructors

Classes defined in TypeScript can have constructors. Constructors typically do the work of initializing objects by setting default values to their properties. Constructors can also be overloaded just like functions.

Such as:

export class SampleClass{  private title: string;   constructor(public constructorexample: string){    this.title = constructorexample;   }}
Copy the code

14, debugging,

Code written in TypeScript is easy to debug.

TypeScript is just JavaScript

TypeScript begins and ends with JavaScript. Typescript uses the basic building blocks of programs in JavaScript. All types of script code are converted to their JavaScript equivalents for execution purposes.

Such as:

class Greeter {  greeting: string;  constructor (message: string) {    this.greeting = message;  }  greet() {    return "Hello, " + this.greeting;  }}
Copy the code

JavaScript code:

var Greeter = (function () { function Greeter(message) { this.greeting = message; } Greeter.prototype.greet = function () { return "Hello, " + this.greeting; }; return Greeter; }) ();Copy the code

16. Portability

TypeScript is portable across browsers, devices, and operating systems. It can run in any environment where JavaScript is running. Unlike their script counterparts, TypeScript does not require a dedicated VM or a specific runtime environment to execute.