Forem: Shane Lonergan

TypeScript in a Weekend: A Crash Course

Shane Lonergan — Sun, 17 May 2020 23:08:46 +0000

I am in the midst of searching for my first job as a developer, and I recently interviewed at a company for which I thought I would be a great fit. However, the job description said that most of the code is written in TypeScript. Now, I have heard a lot about TypeScript from other developers, but I hadn't had the chance to start learning it. I figured this was the perfect chance to take the plunge! I had an open weekend before the interview, so I decided to see how much I could learn. In this post I will walk through what I discovered: the basics of TypeScript, as well as some of the benefits it offers over JavaScript. The goal of this guide is to provide enough knowledge to be conversational, as well as to give a strong jumping off point if you were to start learning TypeScript on the job.

Table of Contents
What is TypeScript?
Why TypeScript?
Getting Started
Core Types
- Number
- String
- Boolean
- Array
- Tuple
- Enum
- Any
- Null and Undefined
- Never
- Object
Union Types and Aliases
Interfaces
Congrats!
References

What is TypeScript?

TypeScript is a superset of JavaScript that horizontally compiles back to JavaScript. It provides the ability, among other things, to strongly type your JavaScript code. However, TypeScript files can't actually be run in the browser or Node. So, why is this useful?

Why TypeScript?

TypeScript helps you avoid unwanted runtime errors by type-checking during development. TypeScript files are compiled into JavaScript files which can then be run in the browser or Node. The compiler catches bugs in advance, saving time and frustration during debugging down the line. TypeScript improves code clarity by explicitly defining the types of variables, function parameters, and function outputs. This allows you to tell at a glance exactly what your code should be taking and returning, and the compiler will throw an error if you accidentally pass something to a function that you shouldn't be. The TypeScript compiler also allows you to customize what version of JavaScript your TS files compile to. This allows the developers to utilize many newer features of JavaScript without worrying about browser compatibility. Because of this, TypeScript can also offer features such as generics, enums, and interfaces which are not available in JavaScript. Additionally, TypeScript offers fantastic tooling in modern IDE's such as VS Code that can catch errors while the code as being written, saving even more time debugging.

Getting Started

Lets go ahead and dive right in by analyzing our first piece of TypeScript code:

const name = 'Shane'
let age = 24

function printNameAndAge(person: string, ageInYears: number): void {
    console.log(`${person} is ${ageInYears} years old.`)
}

printNameAndAge(name, age)

Now, you might be thinking to yourself, "That looks a lot like JavaScript...". Well, thats because it is! Vanilla JavaScript is totally valid in TypeScript. All of the features are optional to use, and exactly how they are utilized is up the the developer. Of course, you aren't getting any of the benefits of TypeScript by doing this, so lets add a little bit to it:

const name: string = 'Shane'
let age: number = 24

function printNameAndAge(person: string, ageInYears: number): void {
    console.log(`${person} is ${ageInYears} years old.`)
}

printNameAndAge(name, age)

As you can see, you can add type annotations after variable declarations or within function parameters using a colon (:) followed by the type. The void following the function parameters is the type annotation for the return value of the function. In this case, the function doesn't return anything, so the type will be void. If it returned a string, then we would set it to string instead. This allows us to ensure our function is always returning exactly what we want it to.

Now that we know how to annotate a type, lets dive into the core types offered by TypeScript.

Core Types

Number

Just like JavaScript, there isn't a difference between integers and floats (decimals), as all numbers are treated as floats.

let luckyNum: number = 13

String

Strings, a series of characters, can be represented using ' ' or " ". You can also use template literals with .

let name: string = 'Shane'

Boolean

A simple true or false value.

let isDone: boolean = false

Array

When you create an array, you want to annotate the type as an array, as well as the type of the values inside the array. This can be done in two ways:

let listOfEvens: number[] = [2, 4, 6, 8]
let listOfOdds: Array<number> = [1, 3, 5, 6]

Tuple

A tuple lets you create an fixed-length array of mixed types.

let nameAgeArr: [string, number]
nameAgeArr = ['Shane', 24] // ✅
nameAgeArr = [24, 'Shane'] // ❌

Enum

An enum is a way of giving more friendly names to sets of numeric values. For example, if you have an object property that can only be set to a set number of options, you can label them as numbers instead of strings. That saves confusion over spelling, capitalization, and other string semantics, while increasing code readability.

enum Genre {
    Rock,
    Jazz,
    Hip-Hop,
}

let giantSteps = {
    artist: "John Coltrane",
    genre: Genre.Jazz
}

let genreName: string = Genre[0] // will be "Rock"

Numeric values for enums automatically start at 0. However you can change the first value to be any number, and the remainder will increment from there. You can also set the values for each manually.

enum Genre {
    Rock = 3,
    Jazz, // => 4
    HipHop, // => 5
}

enum Genre {
    Rock = 5,
    Jazz = 30,
    HipHop = 13,
}

Any

The type of any can be used for variables whose values we do not yet know, or if we want to opt out of type-checking. This allows TypeScript to be very flexible, but use sparingly, as it eliminates the value added by TypeScript.

Null and Undefined

Just as in JavaScript, null and undefined are types in TS. By default, null and undefined are subtypes of all other types, meaning you can assign null or undefined to a variable with the number type.

let luckyNumber = 13
luckyNumber = undefined // ✅

Never

Never type represent the type of values that never occur. For example, a function that always throws an error when called will never return, so we can set the return type to never. An infinite loop could also have the return type never.

function throwError(msg: string): never {
    throw new Error(msg)
}

Object

In Javascript, everything that isn't a primitive is an object. Thus, the object type represents any non-primitive, or anything that isn't a number, string, boolean, symbol, null, or undefined.

let shane: object
shane = { name: "Shane", age: 24 } // ✅

shane = () => console.log("Hi, my name is Shane") // ✅

shane = "Shane" // ❌

Union Types and Aliases

If you variable or parameter needs to have more flexibility, you can specify multiple type options using union types.

let numberOrString: number | string
numberOrString = 13 // ✅
numberOrString = 'thirteen' // ✅

You can also define your own types, known as aliases, which can be used as type definitions later.

type FlexibleNumber = number | string
let luckyNumber: flexibleNumber = 13
luckyNumber = 'thirteen' // ✅

Interfaces

Typescript allows us to define specific object shapes as a type, called an interface, which allows us to ensure the objects we are using always have the proper keys and value types.

interface Album {
    name: string;
    artist: string;
    numSongs: number;
}

const sgtPepper: Album = {
    name: "Sgt. Pepper's Lonely Hearts Club Band",
    artist: "John Coltrane",
    numSongs: 13
    isGood: true // Allowed to have additional properties
}

const help: Album = {
    isGood: true // ❌, must contain all properties from interface
}

Congrats!

You now have an understanding of the fundamentals of TypeScript. Thank you so much for reading, and best of luck on your TS journey!

References

What even is REST?

Shane Lonergan — Mon, 06 Apr 2020 18:04:30 +0000

Welcome to my new series, What Even Is? In this series I will be examining common programming concepts that I have encountered and used throughout my learning so far, but that I didn't always fully grasp. For the first post in this series, I thought that REST would be the perfect concept. The first programming language I learned was Ruby, and of course Rails came soon after. The way I learned to build my first web server was through RESTful convention, and I understood how to build RESTFful APIs mainly through the HTTP Protocol. I knew how to follow convention for RESTful routes, but after a while I began to wonder if I really understood what REST was. As it turns out, I didn't! So I set out to learn. In this article I will walk through what I found out.

Table of Contents
So, What is REST?
What is the origin of REST?
What is the purpose of REST?
How does REST work?
What are the fundamentals of REST?
- Uniform Interface
- Client-Server Separation
- Stateless
- Layered System
- Cacheable
- Code-On-Demand
Congrats!
References
Further Reading

So, What is REST?

REST is an architectural style for building APIs. This essentially means that it is a series or rules or standards for the interaction between a client and server. Even more simply, it is a guide for how your browser and server should talk to one another.

What is the origin of REST?

REST was introduced in 2000 by computer scientist Roy Fielding as part of his PhD dissertation. Fielding was also deeply involved in the early development of the World Wide Web, and was a principle author of the original HTTP specification.

What is the purpose of REST?

The goal of REST was to create a web standard for client-server architecture. This standard would provide a roadmap for developers building new API's, as well as a making it easier to learn how to use others. REST helps unify API's and reduce variation, and thus additional learning, across the web.

How does REST work?

REST stands for REpresentational State Transfer. This means that when we make a request to a RESTful API, the server will transfer a representation of the state of the requested information. For example, if I were to use Twitter's API to fetch a single user, it would return a snapshot of state of that user, including their information, tweets, likes, followers, etc.

What are the fundamentals of REST?

There are 6 constraints for RESTful APIs:

Uniform Interface
Client-Server Separation
Stateless
Layered System
Cacheable
Code-on-demand (optional)

In order for an API to be RESTful, it must follow at least the first 5 of these constraints. Lets take a deeper look at each of them:

Uniform Interface

This means that the request to a RESTful API should look the same no matter its point of origin. Whether it is coming from a Chrome browser, a Python script, or a Linux server, all RESTful requests should have the same structure.

Client-Server Separation

The server and the client exist in separate worlds. They can only interact through requests, which can only be made by the client, and responses, which can only be sent by the server in response to a request. Essentially, the server must simply sit and wait for a request from the client. Only then can it take action and send back the relevant information.

Stateless

The server does not remember anything about the user who calls upon it. It only knows what is sent in the request. Thus, each individual request will contain everything the server needs to know to execute the request and send a response. The server has no knowledge of what is happening client-side, and vice versa.

Layered System

The server and client are unaffected by the number of layers between theme. For example, there could be a security layer, a cacheing layer, and a load balancing layer, but none of these should effect how the client and server communicate.

Cacheable

Cacheing is essentially the processes of storing frequently-accessed data so that you don't have to constantly be asking your server to find it and give it to you. Server responses must, implicitly or explicitly, be identified as cacheable or non-cacheable. If it is cacheable, it should include some sort of version number, and the client should know whether or not their version is up-to-date.

Code-On-Demand

Clients should be able to request code from the server which, when received, can be executed by the client. This code can take many forms, such as a JavaScript script or Java applet. This constraint is optional, and thus is not required for an API to be considered RESTful.

Congrats!

Viola! If your API follows the first 5 of these conventions, it is officially RESTful. Hopefully you now have a deeper understanding of REST and RESTful convention. Thank you so much for reading, and keep your eyes out for the next article in the "What even is..." series!

References

Building JavaScript From Scratch: document.getElementsByClassName

Shane Lonergan — Sat, 25 Jan 2020 19:50:05 +0000

I am currently diving into my first job search as a software engineer, and recently had a mock technical interview. The interview was done in JavaScript, and consisted of two questions. The first was a fairly standard algorithm question, but the second was quite interesting: I was asked to build the document.getElementByClassName method from scratch, as if it didn't exist. I found it enlightening to build out a method that I had used so many times before, and improved my understanding of both DOM manipulation and JavaScript as a whole. In this article I will walk you through the solution I came up with.

Table of Contents
Goal
Example
Plan
Code
- Step 1: Set up the main function
- Step 2: Write the recursive helper function
- Step 3: Put it all together
- Step 4: Add to the HTML Element prototype
References

Goal

The goal is to create a functionally equivalent version of document.getElementByClassName. In order to do this, our new function needs to have to following features:

Can be called on any HTML element
Takes one argument, a string, containing any number of class names.
Returns all elements that match all the class names passed in.
Returns only elements that are children of the element the function was called on

Example

<html>
<body>
    <div class='parent'>
        <p class='hello'>hello world 1</p>
        <p class='hello'>hello world 2</p>
        <p class='hello'>hello world 3</p>
        <p class='hello'>hello world 4</p>
    </div>
</body>
</html>

const parent = document.getElementsByClassName('parent')
// =>    <div class='parent'></div>

const helloWorlds = document.getElementsByClassName('hello')
// => [  <p class='hello'>hello world 1</p>,
//       <p class='hello'>hello world 2</p>,
//       <p class='hello'>hello world 3</p>,
//       <p class='hello'>hello world 4</p>  ]

Plan

First, we need to create a conceptual plan for our function:

Create an array to store all the elements that are a match.
Check all direct descendants of the main element for the class name
1. if any do, add them to the array
Check all of those children's children the same way
Repeat until there are no more children

Based on this plan, we will need to create a recursive helper function, or a function that calls itself within its own definition, to check all elements beneath the primary. We will call this helper function within the main function. The return value of the main function should be an array of elements, which we will declare as an empty array at the top, and add elements to as we move along.

Now that we have a solid plan, let's get coding!

Code

Step 1: Set up the main function

Here we will define our main function. In the body, we will define two variables: elements, an array into which all elements with matching class names will be added; firstChildren, all the children of the element the function is called on. For the latter, we can take advantage of JavaScript's .children() method, which returns an HTMLCollection containing all child elements of the node upon which it is called. This HTMLCollection can be treated like an array.

function getElementsByClassName2(classNameStr) {

   const elements = [] // the array we will add matching elements to
   const firstChildren = this.children // all the children of the element the function is called on

   return elements
}

Step 2: Write the recursive helper function

A recursive function is a function which calls itself within the definition, while a helper function is a function which abstracts away some code to make it both re-usable and more readable.

function getElementsByClassName2(classNameStr) {

   function checkChildren(child) {

      // check if the child has a matching class. If so, push the the elements array
      if (child.classList.contains(className)) {
         elements.push(child)
      }

      // check if that child has children of its own. If so, call checkChildren one each child
      if (child.children) {
         const children = child.children
         children.forEach(checkChildren)
     }
   }

}

Step 3: Put it all together

Now we want to call the checkChildren method on each of the firstChildren. After this function runs, our elements array should contain all of the matching elements!

function getElementsByClassName2(classNameStr) {

   const elements = []
   const firstChildren = this.children

   function checkChildren(child) {

      if (child.classList.contains(className)) {
         elements.push(child)
      }

      if (child.children) {
         const children = child.children
         children.forEach(child => checkChildren(child))
     }
   }

   // call the checkChildren method on the firstChildren
   firstChildren.forEach(child => {
      checkChildren(child)
   })

    return elements
}

Step 4: Add to the HTML Element prototype

Finally, in order for us to be able to call this function on any HTML Element, we need to add it to the HTML element prototype.

HTMLElement.prototype.getElementsByClassname2 = getElementsByClassName2

And just like that, we are done! Our new method getElementsByClassName2 now has the same functionality as the original getElementsByClassName. I hope you found this process as interesting and informative as I did!

If you enjoyed the article, feel free to follow me here or on twitter @shane__lonergan

Forem: Shane Lonergan

TypeScript in a Weekend: A Crash Course

Table of Contents

What is TypeScript?

Why TypeScript?

Getting Started

Core Types

Number

String

Boolean

Array

Tuple

Enum

Any

Null and Undefined

Never

Object

Union Types and Aliases

Interfaces

Congrats!

References

What even is REST?

Table of Contents

So, What is REST?

What is the origin of REST?

What is the purpose of REST?

How does REST work?

What are the fundamentals of REST?

Uniform Interface

Client-Server Separation

Stateless

Layered System

Cacheable

Code-On-Demand

Congrats!

References

Further Reading

Building JavaScript From Scratch: document.getElementsByClassName

Table of Contents

Goal

Example

Plan

Code

Step 1: Set up the main function

Step 2: Write the recursive helper function

Step 3: Put it all together

Step 4: Add to the HTML Element prototype

References