Parameter Properties In TypeScript

In this article, I have described how to use a parameter property in TypeScript with an example.

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