TypeScript

Ref: https://www.typescriptlang.org/docs/tutorial.html
Installation:

1. Install from npm
   
   teddy@teddy-K43SJ:~$ sudo npm install -g typescript [sudo] password for teddy: /usr/local/bin/tsc -> /usr/local/lib/node_modules/typescript/bin/tsc /usr/local/bin/tsserver -> /usr/local/lib/node_modules/typescript/bin/tsserver /usr/local/lib └── typescript@2.2.1

   1 2 3 4 5 6

   teddy@teddy-K43SJ:~$ sudo npm install -g typescript [sudo] password for teddy: /usr/local/bin/tsc -> /usr/local/lib/node_modules/typescript/bin/tsc /usr/local/bin/tsserver -> /usr/local/lib/node_modules/typescript/bin/tsserver /usr/local/lib └── typescript@2.2.1

   
   Check the typescript version:
   
   teddy@teddy-K43SJ:~$ tsc --version Version 2.2.1

   1 2	teddy@teddy-K43SJ:~$ tsc --version Version 2.2.1

   
    
2. Try it via Visual Studio Code.
   Create a new file ‘greeter.ts’ and here is the content:
   
   function greeter(person) { return "Hello, " + person; } var user = "Jane User"; document.body.innerHTML = greeter(user);

   1 2 3 4 5 6 7

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

   
   Then compile it via
   
   teddy@teddy-K43SJ:~/Documents/node/typescript$ tsc greeter.ts

   1	teddy@teddy-K43SJ:~/Documents/node/typescript$ tsc greeter.ts

   
   It’d create a new js file: greeter.jsgreeter.js has same content with greeter.ts.
3. TypeScript Interface
   Create a new file ‘greeter-interface.ts’:
   
   interface Person{ firstName: string; lastName: string; } function greeter(person: Person){ return "Hello, " + person.firstName + " " + person.lastName; } var user = {firstName: "Jane", lastName: "Doe"}; document.body.innerHTML = greeter(user);

   1 2 3 4 5 6 7 8 9 10 11 12

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

   
   Then compile it
   
   teddy@teddy-K43SJ:~/Documents/node/typescript$ tsc greeter-interface.ts

   1	teddy@teddy-K43SJ:~/Documents/node/typescript$ tsc greeter-interface.ts

   
   Here is the output ‘greeter-interface.js’
   
   function greeter(person) { return "Hello, " + person.firstName + " " + person.lastName; } var user = { firstName: "Jane", lastName: "Doe" }; document.body.innerHTML = greeter(user);

   1 2 3 4 5

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

   
   
4. TypeScript Class
   Create a new file ‘greeter-class.ts’:
   
   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.", "Doe"); document.body.innerHTML = greeter(user);

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

   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.", "Doe");   document.body.innerHTML = greeter(user);

   
   Then compile it
   
   teddy@teddy-K43SJ:~/Documents/node/typescript$ tsc greeter-class.ts

   1	teddy@teddy-K43SJ:~/Documents/node/typescript$ tsc greeter-class.ts

   
   Here is the output ‘greeter-class.js’
   
   var Student = (function () { function Student(firstName, middleInitial, lastName) { this.firstName = firstName; this.middleInitial = middleInitial; this.lastName = lastName; this.fullName = firstName + " " + middleInitial + " " + lastName; } return Student; }()); function greeter(person) { return "Hello, " + person.firstName + " " + person.lastName; } var user = new Student("Jane", "M.", "Doe"); document.body.innerHTML = greeter(user);

   1 2 3 4 5 6 7 8 9 10 11 12 13 14

   var Student = (function () {     function Student(firstName, middleInitial, lastName) {         this.firstName = firstName;         this.middleInitial = middleInitial;         this.lastName = lastName;         this.fullName = firstName + " " + middleInitial + " " + lastName;     }     return Student; }()); function greeter(person) {     return "Hello, " + person.firstName + " " + person.lastName; } var user = new Student("Jane", "M.", "Doe"); document.body.innerHTML = greeter(user);

   
   
5. Open it on your web browser
   Create a new file ‘greeter.html’
   
   <!DOCTYPE html> <html> <head><title>TypeScript Greeter</title></head> <body> <script src="greeter-class.js"></script> </body> </html>

   1 2 3 4 5 6 7

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

   
   Then open the html file on your browser. It’d show like this:
   
   Hello, Jane Doe

   1	Hello, Jane Doe