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 how to define static methods and defining, using iterators and generators, and accessing collections.
Defining Static Methods
Static methods are methods that are available for all instances of the class.
They’re accessed through the class rather than the object it creates.
For instance, we can create a static method by writing:
class Animal {
constructor(name) {
this.name = name;
}
static getType() {
return 'animal';
}
}
Then we can write the following code to call getType:
const type = Animal.getType();
We called getType on Animal rather than an instance of it.
Iterators and Generators
Iterators are objects that return a sequence of values.
They’re used with collections and they can be used without them.
An iterator defines a function named next that returns an object with value and done properties.
The value property returns the next value in the sequence and the done property is set to true when the sequence finishes.
Generator functions are functions that return iterators.
We use the yield keyword to return the next item in the sequence.
For instance, we can write:
function* gen() {
yield 1;
yield 2;
yield 3;
}
The function* keyword returns a generator that we can use to return 1, 2, and 3 in sequence.
Then we can write the code to return a generator, that we can use to return the next value:
const generator = gen();
let done = false;
while (!done) {
const next = generator.next();
console.log(next.value);
done = next.done;
}
Calling gen returns a generator.
Then we use it to get the items with the next method until done is true .
The JavaScript runtime creates the next function and runs the generator function until it reaches the yield keyword.
yield provides the next value in the sequence.
We can use generators with the spread operator.
For instance, we can write:
function* gen() {
yield 1;
yield 2;
yield 3;
}
const generator = gen();
const arr = [...generator];
This will spread all the values that are after yield into an array, so we get:
[1, 2, 3]
as the value of arr .
Defining Iterable Objects
We can define our own iterable objects in addition to generators.
For instance, we can have a generator method in our object.
We can write:
const obj = {
* gen() {
yield 1;
yield 2;
yield 3;
}
}
const generator = obj.gen();
We just put the gen generator as a method of obj and the call it.
However, it’s a bit awkward to use.
We can make this cleaner by using the Symbol.iterator symbol as the name of the method instead:
const obj = {
*[Symbol.iterator]() {
yield 1;
yield 2;
yield 3;
}
}
This will make obj an iterable object, then we can write:
const arr = [...obj];
to spread the returned values.
And we get [1, 2, 3] as the value of arr .
JavaScript Collections
JavaScript objects are very flexible. We can get the keys and values of an object to do what we like with it.
With Object.keys , we can get the keys of an object as an array.
And with Object.values , we can get the values of an object as an array.
We can use Object.keys as follows:
const obj = {
a: 1,
b: 2,
c: 3
};
for (const key of Object.keys(obj)) {
console.log(key);
}
Then we get a , b and c logged.
Object.keys only return the own string keys of an object.
Likewise, we can return an array of values with Object.values .
We can write:
const obj = {
a: 1,
b: 2,
c: 3
};
for (const key of Object.values(obj)) {
console.log(key);
}
Then we get the numbers 1, 2, and 3 logged in the console.
It also returns the own values of an object for properties with string keys.
Conclusion
We can use generator functions to return a generator to return something in sequence.
To access the keys and values of objects, we can use Object.keys and Object.values respectively.
Static methods can be defined on a class and be available by accessing them directly from the class.
