Showing posts with label Learning TypeScript. Show all posts
Showing posts with label Learning TypeScript. Show all posts

Friday, June 28, 2019

Generators and Iterators in JavaScript

This post concludes the series Symbols, Iterables, Iterators and Generators in JavaScript. It would be a whirlwind tour of generator functions in JavaScript and how they can be put to use when defining Iterators.

It is a direct follow up of Typing Iterables and Iterators with TypeScript and it would take the Iterator defined in the post, and improve it by making use of generator functions.

Basically, it will show how we can go from a verbose implementation that does not make use of generator functions:

class MakeRange {
    private _first: number;
    private _last: number
    constructor(first, last) {
     this._first = first;
     this._last = last;
   }
 
    [Symbol.iterator]() {
        return {
            next: () => {
                  if (this._first < this._last) {
                      return {value: this._first++, done: false}
                  } else {
                      return {value: undefined, done: true}
                 }
           }
       }
   }
 }

Into a more terse and clearer implementation that makes use of generator functions:

class MakeRange {
    private _first: number
    private _last: number

    constructor(first, last) {
     this._first = first;
     this._last = last;
    }

    *[Symbol.iterator]() {
        while (this._first < this._last) {
            yield this._first++
       }
   }
}

This post contains the following sections:

Meaning, we are going to first look at what generator functions are, then we see the various syntaxes for creating them, and finally we bring them to use in simplifying how we define iterables and iterators.

Let's get started.


Sunday, June 23, 2019

Typing Iterables and Iterators with TypeScript

In this post, we are going to do a quick exploration of how TypeScript allows for compile time guarantees when working with the iteration protocol in JavaScript.

It is part of a series about Symbols, Iterables, Iterators and Generators in JavaScript, and a direct follow up of a previous post: Iteration Protocol And Configuring The TypeScript Compiler which was about the necessary compiler configurations needed to be able to work with iterables and iterators from TypeScript.

This post will then take things from there, and show how to add types to Iterables and Iterators in other to get compile time checking working.


Saturday, June 22, 2019

Iteration Protocol And Configuring The TypeScript Compiler

This post is part of the series of post on Symbols, Iterables, Iterators and Generators. It is part of various blog posts, where I penned down some of the things I learnt about TypeScript and JavaScript, while working on ip-num: A TypeScript library for working with ASN, IPv4, and IPv6 numbers.

This post would be about how to configure the TypeScript compiler in other to be able to work with the iteration protocol.

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. I have heard it described in some quarters as "JavaScript that scales".

The core feature of TypeScript that allows it to be described as such is the static guarantees and compile time safety it introduces, which allows invariants and structure about code base to be validated and checked for correctness at compile time.

In previous posts in this series, I have looked at Symbols In JavaScript and Iterables and Iterators in JavaScript. One of the things that stands out in these posts, is the requirement to have objects that have certain structure or adhere to stipulated protocols in other to be considered as Iterables or Iterators. Formally, these sets of requirement are known as the Iteration protocol

For example, for something to be considered an Iterable, it needs to adhere to the stipulated requirement that such a thing must have a Symbol.iterator method that returns an Iterator.

For something to be considered an Iterator, it needs to adhere to the requirement of having at least a next method.

And for the value returned from calling the next method on an iterator to be considered valid, it needs to be of a certain shape; that is the value must have a done property and a value property.

So it is obvious that for things to work out fine when working with the iteration protocal, a lot of requirements and structure needs to be satisfied. This is where TypeScript can help.

TypeScript allows us to code while making sure the checks and guarantees required by the iteration protocal are present and can be confirmed at compile time.

To do this, TypeScript provides a couple of interfaces that capture the structures and protocols of iterables and iterators. These interface can then be implemented at development time ensuring the requirements are adhered to.

But in other to be able to make use of these interfaces and compile time guarantees, we need to be able to configure the Typescript compiler appropriately. This post will show how to go about such configuration and it will contain the following sections:


Saturday, June 15, 2019

Symbols In JavaScript

This post is part of the series on Symbols, Iterables, Iterators and Generators. It focuses on Symbols in JavaScript.

My first encounter with Symbol in JavaScript was when I wanted to turn some classes in the ip-num library to iterables in other for them to be used in the "for of" syntax JavaScript provides.

The code involving Symbol that I ended up writing looked somewhat like this:

 [Symbol.iterator](): IterableIterator<IPv4> {
      return this;
  }

You can see one of such places where this exist in the ip-num codebase here

Back then, this piece of code totally threw me off, as I have never encountered something like this previously in JavaScript, and I had to take some time out to dig into Symbol in order to understand what was going on.

This post is a jot down of some of the key things I got to learn about Symbol. It also marks the beginning of a series of posts on Iterables and Iterators in JavaScript.

This post on Symbol will contain the following:


Saturday, December 08, 2018

Understanding JavaScript Modules As A TypeScript User

This post, is the first in a series of post that I will be writing about Modules in TypeScript. It is a continuation of the process of jotting down the various things I learnt while building ip-num. The previous post like this one, was Declaration Files in TypeScript: An Introduction. In which I shared how I came to wrap my head around declaration files in TypeScript.

Since the topic of Modules is quite an expansive one, instead of jamming everything I need to write into one blogpost, I will be spreading it out, across various posts, that would be published in the coming weeks/months.

This post is to get the ball rolling on that, and It would focus mainly on introducing the concepts of modules as we have them within the JavaScript ecosystem.

Since TypeScript is but a superset of JavaScript and JavaScript is still its only transpiler target, one really cannot get away from having to understand how things work in the JavaScript land in other to be able to deeply understand how various aspects of TypeScript fits together.

Modules are just one example of this.


Wednesday, October 11, 2017

Declaration Files in TypeScript: An Introduction

This is the first post in what I believe would be a series where I capture some of the things I learned about TypeScript while developing ip-num, a library for working with IP numbers.

Picking up TypeScript, the language, was relatively painless. As it is often said, it is just JavaScript with types right? so how hard can it get?

What was not relatively painless was the "other things" around the language. Things like tooling, the workflow, the configurations etc. Things you need to know before you can actually use TypeScript to make anything useful.

Declarations files were one of such "other things" that introduced some learning curve due to the lack of a clear and comprehensive explanation on it. There is also a lot of dated information due to historical reasons out there, and this adds to the confusion.

tsd you said? what about typings? Or what is the deal with that @typing thing in the node_module directory? How does a GitHub repository called DefinitelyTyped tie into the picture? What role is npm even playing? etc. These were some of the not so obvious things that needed clarification.

This post captures some things I have come to understand regarding declaration files that make them less confusing. Hopefully, someone else who is just starting with TypeScript will find it useful.

If you have some vague idea of how declaration files work and you just need a quick, straight to the point listing of the key concepts and how they tie together? Then head to the Summary section.

For a more expository explanation, do read on.