Adventures In TypeScript

I've been learning some stuff about TypeScript, and I want to share!

Table Of Contents

Introduction

I started a new job, and the stack is entirely different from what I know. Allow me a moment to break it down.

  • First Engineering job stack: PHP, HTML/CSS, VBScript, C#,.Net, and MySQL. No JavaScript
  • Second job stack: Python, Go, MySQL, Flux (custom functional language). Still, no JavaScript.
  • New job: It’s all JavaScript

Terrifying Screams

Well, TypeScript. But even still.

I’ve had to become fluent in a variety of languages, but the JavaScript ecosystem was never on the list until now. Closest I ever got to building anything was writing tiny, mostly stolen from Stack Overflow, APIs using Express. So what am I to do when I get offered a position building some cool stuff with some incredible people? Say no? I don’t think so.

As you get further into your career, you start seeing new organization’s coding stuff is like everyone else’s coding stuff. It’s just a matter of implementation. So I’ll spend the next few weeks diving in, asking tons of questions, and learning to understand this—no big deal.

In the meantime, I’ll write about some of the stuff I’ve learned, starting with my adventure’s learning TypeScript.

TypeScript So Far

Chucki Finster image

TypeScript is nitpicky. If I were to make a list of program languages as cartoon characters, I’d put TypeScript beside Chuckie Finster from Rugrats. Quick to point out the dangers and not quiet about their objections. However, the more I learn it, the more it becomes the thing needed to maintain the chaotic, almost Tommy Pickles-like nature of JavaScript. I’m starting to become a fan.

Everyone needs a real one like Chuck Finster on their adventures.

Coming from Python as my primary tool in the last job, I needed to shake off the cobwebs for statically typed languages. Just make sure the types match. No big deal, right? Mostly.

TypeScript takes this a great deal further in its implementations. Let’s go over what I mean.

Type Definitions In Functions

In Python, everything is an object. In TypeScript, objects are just everywhere. One example is the use of objects defined in the function signature.

Greeting function

In this example, we define the object options and then give the parameters in the form of function arguments. That makes sense for maintainability. A single type that is only used in one spot is a perfect candidate. It also helps that the IntelliSense will be able to pick up on the type and give you the ability to access those properties in the autocomplete.

Generics

Generics are stand-ins used for passing around data types where the type of an object or property might not be known. TypeScript takes these to an interesting extreme. Let’s take a look.

Generics can be used in interfaces; interfaces are an abstract type used for holding data. See what I mean below.

Generics for interfaces

Here we define and interface Model and assign it the type <;T>; you use the angle brackets to pass in types. The idea here is that this Model interface can be reused and take the form of many different model types. <T> is just a stand-in and can be used by any type. The generic is then passed into the value property because we don’t know what the value could be.

So going down into the variable definition for newModel we are looking to pass in a string type, and we do that by using the <> angle brackets. Finally, we assign the value property to the string "Brenda". You can see the printout below that. Now we can pass in any data type we’d like in this interface and use that same type as the value property.

Cool right? You can do that with functions too! As seen below.

Generics for functions

So we have a User interface with two properties which will serve as an example of a data type for use to pass in. Then we have a function below where the idea is that it will be reused to grab any kind of resource from an API.

In the getResource function, you can see where the usefulness comes in; Seeing as we’re not sure what type of data we’re going to get, we can pass in the <T> generic and then use that generic to return an array of types <T>. Here we can safely use the User interface or any other interface. Check out the results.

Use of Generics in functions

We called the getResource function and passed in the User type, and we can then map out the results from the User type. As seen in the notes, we’ll also have access to the type properties via autocomplete.

Union Types

Something that blew my mind was working with union types. It was weird syntax I’d never seen, and it threw me until someone explained it to me.

A union type is a type that can be one of two or more types. Let me show you what I mean.

union-type

We defined data, which can be either a string or a variable. The pipe operator, |, which is the bitwise OR operator in JavaScript, denotes the different types of which this variable could be. Below are the results from printing this.

union-type-assignment.png

So we can assign multiple types to this variable through union types.

This one is pretty simple, but we have union types in the source code at work that could be one of ten different types.

This is again great for code reuse in that we can use assets differently due to them being able to take the form of more than one type and have different behavior.

Conclusion

There is a ton of other stuff I’ve learned. Much of which is still in my notes and on my Today I Learned repo and in need of digesting.

This is just the beginning. I have an opportunity to learn so much from this group of engineers, and I am excited. In doing that, maybe I can help someone else learn too!

-George