TypeScript is a natural extension of JavaScript that’s used in many projects in place of JavaScript.
However, not everyone knows how it actually works.
In this article, we’ll look at some features of JavaScript that should be used in TypeScript projects, including methods and this.
Defining Methods
Methods are properties of objects that are function valued.
They’re also part of a class, where we can call them after we instantiate the class.
For instance, we can define methods in objects by writing:
let obj = {
greet() {
console.log("hello");
}
};
In the code above, we defined an obj object that has the foo method.
We can then call it by running:
obj.greet();
Now we get 'hello' displayed on the console log.
The this Keyword
this is a confusing keyword for many JavaScript developers.
This is because this can refer to anything depending on its location.
If it’s in an object, then this refers to the object.
If it’s in a class, the this refers to the class that it’s in.
If it’s in a traditional function, then this refers to the function.
For instance, if we have:
let obj = {
name: "joe",
greet() {
console.log(`hello ${this.name}`);
}
};
obj.greet();
Since this refers to obj in the greet method.
Then this.name refers to 'joe' .
Therefore, we see ‘hello joe’ in the console log.
If it’s in class, then this would be the class. For instance, if we have:
class Foo {
constructor() {
this.name = "joe";
}
greet() {
console.log(`hello ${this.name}`);
}
}
new Foo().greet();
Then we have this.name set to 'joe' again since we did that in the constructor.
So, we get the same result when we run:
new Foo().greet();
this Keyword in Stand-Alone Functions
We can use the this keyword in a traditional function.
For instance, if we write:
function greet(msg) {
console.log(`${this.greeting}, ${msg}`);
}
Then we can set the value of this by using the call method and call the function:
greet.call({ greeting: "hello" }, "joe");
We change the value of this to { greeting: “hello” } by passing it into the first argument of the call method.
A value assigned names without using the let , const or var keyword is assigned to the global object.
For instance, we can write:
function greet(msg) {
console.log(`${this.greeting}, ${msg}`);
}
greeting = "hello";
greet("joe");
Then we see that this.greeting is 'hello' since greeting is a property of the global object.
this is the global object as we can see.
Changing the Behavior of this
The call method can change the behavior of this .
Also, we can use the bind method to return a function with a different value of this .
For instance, we can write:
function greet(msg) {
console.log(`${this.greeting}, ${msg}`);
}
const helloGreet = greet.bind({ greeting: "hello" });
helloGreet("joe");
By calling the bind function, we change this to an object, we passed in as an argument.
Then we can call the returned function and see 'hello, joe’ in the console output.
bind and call are both available to traditional functions only.
Arrow Functions
Arrow functions don’t work the same way as regular functions.
They don’t have their own this value and inherit the closet value of this tey can find when they’re run.
For instance, if we have:
let obj = {
greeting: "Hi",
getGreeter() {
return msg => console.log(`${this.greeting}, ${msg}`);
}
};
const greeting = obj.getGreeter()("joe");
Then when we call getGreeter , we get the arrow function returned.
this would be the object since the value of this inside getGreeter would be obj .
The second parentheses call the returned function with 'joe' .
Arrow functions don’t have their own value of this , so it takes the value of this from getGreeter .
Conclusion
We can add methods to objects and classes and use them in our TypeScript code.
The value of this varies depending on location. To make sure our code refers to the right value of this , we’ve to know what this takes on at the location that it’s in.
The value of this can be overridden with bind and call , which are available to traditional functions.
