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