Post
Ask Question

Parameter Properties In TypeScript

Property in TypeScript  

  • A property for each exported variable declaration.
  • A property of a function type for each exported function declaration.
  • A property of a constructor type for each exported class declaration.
  • A property of an object type for each exported internal module declaration.
TypeScript has a shortcut notation to declare properties with the same name and value as the constructor parameter. For this, you can prefix a constructor parameter with either "private" or "public."
 
In the following example, we are creating a property for Name, Emp Id and Designation. We can access a property by the "this" keyword. Let's use the following steps and see how to access a property with this keyword.
 
Step 1
Open Visual Studio 2012 and click "File" -> "New" -> "Project...". A window is shown as:
 
start-property-type-script.gif
 
Give the name of your application as "property" and then click ok.
 
Step 2 
After this session, the project has been created; your new project should look like this: 
 
property-explorer-type-script.gif
 

Coding

 
property.ts 
  1. class empinfo {  
  2.  constructor(public Emp_ID: number, public name: string, public Designation: string) {}  
  3.  sayName() {  
  4.   var span = document.createElement("span");  
  5.   span.innerText = "\nEmp ID ->" + this.Emp_ID + "\nName ->" + this.name + "\nDesignation ->" + this.Designation;  
  6.   document.body.appendChild(span);  
  7.  }  
  8. }  
  9. class Greeter {  
  10.  element: HTMLElement;  
  11.  span: HTMLElement;  
  12.  timerToken: number;  
  13.  constructor(element: HTMLElement) {  
  14.   this.element = element;  
  15.   this.element.innerText += "Now Time is: ";  
  16.   this.span = document.createElement('span');  
  17.   this.element.appendChild(this.span);  
  18.   this.span.innerText = new Date().toUTCString();  
  19.  }  
  20.  start() {  
  21.   this.timerToken = setInterval(() => this.span.innerText = new Date().toTimeString(), 500);  
  22.  }  
  23.  stop() {  
  24.   clearTimeout(this.timerToken);  
  25.  }  
  26. }  
  27. window.onload = () => {  
  28.  var a = new empinfo(1, "Rahul", "Software Developer");  
  29.  a.sayName();  
  30.  var el = document.getElementById('content');  
  31.  var greeter = new Greeter(el);  
  32.  greeter.start();  
  33. }   
propertydemo.html
  1. <!DOCTYPEhtml>  
  2. <htmllanghtmllang="en"  
  3.     xmlns="http://www.w3.org/1999/xhtml">  
  4.     <head>  
  5.         <metacharsetmetacharset="utf-8"/>  
  6.         <title>Property TypeScript HTML App</title>  
  7.         <linkrellinkrel="stylesheet"href="app.css"type="text/css"/>  
  8.         <scriptsrcscriptsrc="app.js">  
  9.         </script>  
  10.     </head>  
  11.     <body>  
  12.         <h2>Parameter Property Example in TypeScript HTML App</h2>  
  13.         <dividdivid="content"/>  
  14.     </body>  
  15. </html>     
app.js
  1. var empinfo = (function() {  
  2.  function empinfo(Emp_ID, name, Designation) {  
  3.   this.Emp_ID = Emp_ID;  
  4.   this.name = name;  
  5.   this.Designation = Designation;  
  6.  }  
  7.  empinfo.prototype.sayName = function() {  
  8.   var span = document.createElement("span");  
  9.   span.innerText = "\nEmp ID ->" + this.Emp_ID + "\nName ->" + this.name + "\nDesignation ->" + this.Designation;  
  10.   document.body.appendChild(span);  
  11.  };  
  12.  return empinfo;  
  13. })();  
  14. var Greeter = (function() {  
  15.  function Greeter(element) {  
  16.   this.element = element;  
  17.   this.element.innerText += "Now Time is: ";  
  18.   this.span = document.createElement('span');  
  19.   this.element.appendChild(this.span);  
  20.   this.span.innerText = new Date().toUTCString();  
  21.  }  
  22.  Greeter.prototype.start = function() {  
  23.   var _this = this;  
  24.   this.timerToken = setInterval(function() {  
  25.    return _this.span.innerText = new Date().toTimeString();  
  26.   }, 500);  
  27.  };  
  28.  Greeter.prototype.stop = function() {  
  29.   clearTimeout(this.timerToken);  
  30.  };  
  31.  return Greeter;  
  32. })();  
  33. window.onload = function() {  
  34.  var a = new empinfo(1, "Rahul", "Software Developer");  
  35.  a.sayName();  
  36.  var el = document.getElementById('content');  
  37.  var greeter = new Greeter(el);  
  38.  greeter.start();  
  39. };   
Output
 
final-property-window-type-script.gif


Similar Articles