TypeScript quick start

TypeScript is a free and open source programming language developed by Microsoft.

TypeScript is a superset of JavaScript, starting with the syntax and semantics familiar to millions of JavaScript developers today. You can use existing JavaScript code, including the popular JavaScript library, and call TypeScript code from JavaScript code.

TypeScript compiles pure, concise JavaScript code and can run on any browser, node.js environment, and any JavaScript engine that supports ECMAScript 3 (or later).

TypeScript has the advantage of having more rules and type restrictions, more predictability, controllability, ease of maintenance and debugging, and easier organization of code development for large, complex programs with support for modules, namespaces, and object-oriented applications.

In addition, TypeScript's compilation steps capture errors before they run.

Next, let's start building a simple web application with TypeScript.

Install TypeScript

There are two main ways to get TypeScript tools.

• Package Manager via .js npm
• Install the Visual Studio plug-in for TypeScript

Visual Studio 2015 and Visual Studio 2013 Update 2 include TypeScript by default. If you don't have Visual Studio installed with TypeScript, you can still download .

Developers using NPM:

npm install -g typescript

Create the first TypeScript file

Create a greeter.ts editor and enter the following JavaScript code:

 function   greeter ( person) {
     return   "Hello, "  + person;
}
 var  user =  "Jane User" ;
 document .body.innerHTML = greeter(user); 

Compile the code

Although we .ts as the file extension, the code is just JavaScript code. You can copy and paste code directly into an existing JavaScript application.

Run the TypeScript compiler on the command line:

tsc greeter .ts 

As a result, you get a greeter file with the greeter.js code. Use TypeScript in the JavaScript application we started and run.

Now we can start taking advantage of the new tools provided by TypeScript. Add the function parameter 'person': : string type annotation, as follows:

  function   greeter ( person: string )  {
     return   "Hello, "  + person;
}
 var  user =  "Jane User" ;
 document .body.innerHTML = greeter(user);    

Type annotation

Type annotations are an easy way to record function or variable constraints in TypeScript. I n this example, we want to pass in a string type argument when we call the greeter function. We can try to change to an array when the greeter function is called:

functiongreeter(person: string){
return"Hello, " + person;
}
var user = [0, 1 , 2];
document.body.innerHTML = greeter(user);

Recompile and you'll see an error:

greeter.ts(7,26): Supplied parameters  do   not   match   any  signature  of   call  target

Similarly, when you call the greeter function, you try not to pass in any arguments. T ypeScript will tell you that you need to bring an argument when you call this function. In both examples, TypeScript provides static analysis based on your code structure and type annotations.

Note that despite the error, the file that greeter.js E ven if there are errors in your code, you can still use TypeScript. But in this case, TypeScript warns that your code may not work as you might expect.

Interface

Let's further develop our demo. H ere we use an interface that describes objects with firstName and lastName fields. I n TypeScript, if two types are compatible with their internal structures, they are compatible. This allows us to implement an interface that requires only the necessary structural shapes without having to implements clause.

 interface  Person {
    firstName:  string ;
    lastName:  string ;
}
  function   greeter ( person: Person )  {
     return   "Hello, "  + person.firstName +  " "  + person.lastName;
}
 var  user = { firstName:  "Jane" , lastName:  "User"  };
 document .body.innerHTML = greeter(user);

Class

Finally, let's use the class for the last time to continue developing demo. TypeScript supports new JavaScript features, such as class-based object-oriented programming.

Here, we create a Student class with constructors and some Student fields. Note: The good use of classes and interfaces determines a programmer's level of abstraction.

In addition, using public in public is a short form that automatically creates properties with that name.

 class   Student  {
    fullName:  string ;
    constructor( public  firstName,  public  middleInitial,  public  lastName) {
         this .fullName = firstName + " " + middleInitial +  " "  + lastName;
    }
}
 interface   Person  {
    firstName:  string ;
    lastName:  string ;
}
 function  greeter ( person : Person )  {
     return   "Hello, "  + person.firstName +  " "  + person.lastName;
}
 var  user =  new  Student( "Jane" ,  "M." ,  "User" );
document.body.innerHTML = greeter(user);

Run tsc greeter.ts you'll see the resulting JavaScript code as before. The classes in TypeScript are simply short those that often use the same prototype-based object-oriented in JavaScript.

Run the TypeScript web application

Now enter greeter.html the greeter:

 <!DOCTYPE html> 
 < html > 
     < head >  < title > TypeScript Greeter </ title >  </ head > 
     < body > 
         < script   src = "greeter.js" >    </ script > 
     </ body > 
 </ html >

Open the greeter.html to run the first TypeScript web application demo!

Optional: Open greeter.ts or copy the code to TypeScript Learning Park. Y ou can hover over the identifier to see the type. N ote that in some cases these types are automatically inferred for you. R e-enter the last line to see the completion list and parameter help based on the DOM element type. P lace the cursor where the greeter function is referenced and press F12 to go to the definition. Also note that you can right-click on the symbol to rename it with refactoring.

The types of information and tools provided, as well as JavaScript, work together in the application. Examples of more possibilities for TypeScript, please visit the web site's Case.