Updated February 20, 2023
Introduction to TypeScript Property
Typescript property is defined as an alternative annotation for stating the property using a similar name and value as a constructor variable that we need to add at the beginning of a constructor parameter as private or public, a property can be used for declaring every variable while exporting, the property of a function type can be exported for a function declaration, the property of constructor type has been exported for describing the class, also in typescript we can able to append a property to an object; also typescript property has been adjusting as optional on the interface.
Overview of TypeScript Property
The typescript property can have shortcut notations with similar names and values, which can be considered a constructor parameter. The properties can be accessed using the ‘this’ keyword, so we can first define the keyword such as ‘public’ or ‘private,’ and the property can be spread over every variable declaration, function, and constructor type exported for a function declaration. Object type can be exported for internal module declaration.
How to Add TypeScript Property?
First, we have to set a property into the object in a typescript for appending a property that is optional on the interface and is allocated to the object with the help of the ‘?’ keyword; after that, we can append the property at a time with no type error.
Code:
interface Human {
name:string;
age?:number;
}
const o1: Human = {
name: 'Tom',
};
o1.age = 40;
const o2: Record<string, any> = {};
o2.name = 'Tom';
o2.age = 40;
interface Pets extends Record<string, any> {
name: string;
age: number;
}
const o3: Pets = {name: 'Altmass', age: 5};
o3.type= 'Cat';Output:
TypeScript Method Property
In typescript, the method is a piece of code that has been declared within the class and it can be carried out when it is called. Method property in it can split a huge task into little sections and then execute the particular operation of that program so that code can be reusable which can improve the module from the program.
It has three types of methods:
1. Regular Method (dynamic and objective)
This method has its own syntax for defining it,
[private | protected | public] method_name(arguments): return_type
{
}In which, return_type is a return data type of the method in which when it does not return anything then ‘void’ keyword has been utilized as a return type, method_name is the method name, and typescript is not authorized for using two methods which can be having the similar names either they have different parameters.
Code:
class Dog {
sayHi(breed: string): void {
console.log(`Hi ${breed}`);
}
}
function method_ex1_test(){
var tom: Dog = new Dog();
tom.sayHi("Siberian Husky");
}
method_ex1_test();Output:
2. Static Method
It can utilize the ‘static’ keyword coordinating with a regular method which syntax has given below,
[private | protected | public] static method_name(arguments): return_type {
}This method can be called through class name and dot notation in which the dynamic members of a class cannot seem in a stable method otherwise it can be obtained via the object.
Code:
class MyProfit {
static sum(c: number, d: number):number {
return c + d;
}
public static minus(c: number, d: number):number {
return c - d;
}
}
function method_static_ex1_test() {
var output = MyProfit.sum(100, 50);
console.log(`Sum Output: ${output}`);
output = MyProfit.minus(100, 50);
console.log(`Minus Output: ${output}`);
}
method_static_ex1_test();
Output:
3. Abstract Method
It is a non-static method that does not has the content,
[protected | public] abstract method_name(arguments): return_type;
In this type, only one method can be declared,
Code:
abstract class Human {
abstract sayHi(): void;
}
class EngHuman extends Human {
sayHi(): void {
console.log("Hello");
}
}
class RusHuman extends Human {
sayHi(): void {
console.log("Power");
}
}
function method_abstract_ex1_test() {
var enHuman = new EngHuman();
enHuman.sayHi();
var ruHuman = new RusHuman();
ruHuman.sayHi();
}
method_abstract_ex1_test();Output:
TypeScript Property Class
Let us see the typescript property class in which typescript supports object-oriented programming features such as classes, interfaces; and in terms of object-oriented programming, class is a blueprint for generating an object, and it can encapsulate data for the object which is in-built support known as a class.
Creating a class:
The ‘class’ keyword has been used to describe the class in typescript, the syntax for it is as shown below.
class class_name {
}The class keyword comes after the class name in which there are some rules which need to be examined at the time of naming the class.
Let us see the term which can include in the definition,
- Fields: It is any variable that can be described in a class, in which it can constitute the data that is obtained from the object.
- Constructors: It can be accountable for assigning the memory for the object of the class.
- Functions: It can constitute the actions that have been held by the object and they are also at the times which are mentioned as a method.
When all the above is put together it has been entitled as data members of the class.
Let us assume the class Employee in typescript.
Code:
class Employee {
}When we compile this code then JavaScript code will be generated such as,
var Employee = (function () {
function Employee () {
}
return Employee;
}());Let us see an example of declaring a class,
class motor
machine: string;
constructor (machine: string) {
this.machine = machine
}
disp():void {
console.log ("Machine is: "+this.machine)
}
}In the above example class Motor has been declared which has a field ‘machine’ and ‘var’ keyword not been utilized for declaring a field, this example can also declare a constructor for the class.
Conclusion
In this article, we conclude that the typescript property can be appended to an object and it can be adjusted as an optional interface that has been allocated to the object with the help of the ‘?’ mark, so this article will help in understanding the concept of the typescript property.
Recommended Articles
This is a guide to TypeScript Property. Here we discuss the introduction and how to add TypeScript Property along with three methods and class. You may also have a look at the following articles to learn more –
