Let's Start With TypeScript

In this article, I explain the basics of TypeScript language programming using Visual Studio 2012.

Basic of TypeScript

 
TypeScript is a syntactic enhancement for JavaScript. The TypeScript syntax is a superset of Ecmascript 5 (ES5) syntax. Every JavaScript program is also a TypeScript program. The TypeScript compiler performs only file-local transformations on TypeScript programs and does not re-order variables declared in TypeScript.
 
The following example shows how to create a simple TypeScript program. The example just prints "Hello" in the HTML document using TypeScript.
 
Create a project in Visual Studio. Make sure your Visual Studio is set up for TS. See here: Setting Up Visual Studio 2012 for TypeScript
 
Add a TypeScript file and call it from HTML. 
 

Coding

 
simpledemo.ts 
  1. class simpledemo {  
  2.  constructor(public greeting: string) {}  
  3.  greet() {  
  4.   return "<h1>" + this.greeting + "</h1>";  
  5.  }  
  6. };  
  7. var simple = new simpledemo("Hello, C-sharpcorner user....!");  
  8. var str = simple.greet();  
  9. document.body.innerHTML = str;   
simpledemo.html 
  1. <!DOCTYPEhtml>  
  2. <html>  
  3.     <head>  
  4.         <title> TypeScript simpledemo </title>  
  5.     </head>  
  6.     <body>  
  7.         <scriptsrcscriptsrc="app.js">  
  8.         </script>  
  9.     </body>  
  10. </html>    
  11. app.js    
  12. var simpledemo = (function () {    
  13. function simpledemo(greeting) {    
  14. this.greeting = greeting;    
  15. }    
  16. simpledemo.prototype.greet = function () {    
  17. return"  
  18. <h1>" + this.greeting + "</h1>";    
  19. };    
  20. return simpledemo;    
  21. })();    
  22. ; ;    
  23. var simpledemo = new simpledemo("Hello, C-sharpcorner user...!");    
  24. var str = simpledemo.greet();    
  25. document.body.innerHTML = str;    
Output
 
simple-demo.type-script.gif