DEV Community: shadow1349

The Beginner’s Guide to TypeScript

shadow1349 — Sun, 05 Jan 2020 19:45:44 +0000

Happy New Year and welcome to 2020! I hope everyone had a fun and safe New Year's Eve. I have been busy working on a project lately so I haven't been able to post in a while, but not that my project is finished I am excited to share the results with you guys. I have just finished my first book and self-published on Amazon!

My Inspiration

Why did I write this book? Over the course of the last few years, I have become really enthusiastic about TypeScript, and I thought I would share my enthusiasm with everyone else! TypeScript has a blossoming ecosystem and I think it's only going to get bigger and more popular in 2020. That being said, I think it would benefit programmers to learn a little bit about it. Today, TypeScript can power a full application on the front-end with Angular, React, or Vue and on the back-end with NodeJS. If we go to GitHub's Octoverse site, we can see that TypeScript has cracked the top 10 programming languages and it starting to climb!

https://octoverse.github.com/#top-languages

Why TypeScript

TypeScript is climbing in popularity, but I'll be the first to say that just because something is popular doesn't mean it is always the right thing to use. However, TypeScript's popularity has driven many developers, like me, to use it and fall in love with it.

It's quick to get started and runs everywhere

TypeScript is a superset of JavaScript and runs on NodeJS. This means that starting a JavaScript project is the same as starting a TypeScript project. You just have to install a couple of extra dependencies and you're away! Just like JavaScript, it can run everywhere like the browser, back-end, tablets, and mobile phones which is pretty much everywhere.

Amazing type system

Bringing a strong (ish) type system to JavaScript has made the language much more straight forward to use. There is now more structure to a TypeScript project, as well as type safety which helps us avoid bugs. Let me give you an example.

// JavaScript
const me = {
  firstName: 'Sam',
  lastName: 'Redmond'
  age: 100,
  fullName: () => `${this.firstName} ${this.LastName}`
}

In this example, we create an object literal of a person with some properties and a function. In the function, we can access this which is the scope of the object literal so we can use firstName and lastName. Let's look at a TypeScript example.

// TypeScript
class Person {
  firstName: string;
  lastName: string;
  age: number;
  constructor(firstName: string, lastName: string, age: number) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.age = age;
  }
  fullName() {
    return `${this.firstName} ${this.lastName}`;
  }
}
const me = new Person('sam', 'redmond', 100);

The first thing you will notice is that we're taking full advantage of Object-Oriented Programming (OOP) by creating a class for the person object. I want to mention that we can do that in plain JavaScript, however, we can also create an object literal like in the JavaScript example. Both methods are valid in JavaScript, but we can only access this in a class in TypeScript. That means that the JavaScript example would throw errors during compilation in TypeScript.

You may feel like this is taking away your choices, but it really isn't. By enforcing this policy it makes you think about your code more and helps it to be more extensible. Let me give you another example.

class Student extends Person {
  gpa: number; 
  constructor(firstName: string, lastName: string, age: number, gpa: number) {
    super(firstName, lastName, age);
    this.gpa = gpa;
  }
}
const me = new Student('Sam', 'Redmond', 100, 4.0);
console.log(me.fullName()); // "Sam Redmond"

Using TypeScript we can use the principle of inheritance to extend what we can do with the person class. As you can see we can use this to simplify the Student class by extending the Person class and just passing the properties down using the super function. We now have access to all the properties and functions of the Person class along with any functions in the Student class. This is a really great way to simplify your code and make everything more readable and maintainable.

The Book

It has been a great experience writing this book, and I am really hoping you guys will buy it and fall in love with TypeScript as much as I have. Thanks for reading my article, and if you want to purchase my book here is the link!

Amazon Book

This is the first book I have written, so please leave me some feedback!

TypeScript tip of the week - generics

shadow1349 — Tue, 05 Nov 2019 17:34:32 +0000

Happy Tuesday and thanks for reading the first ever TypeScript tip of the week. I'm starting this series helpful TypeScript insights and tips as a way to get more people interested in using TypeScript.

This week I wanted to talk about TypeScript generics. With an incredible type system backing TypeScript, generics give you the power to easily reuse logic and give you the ability to dynamically define what type of data you're expecting back from that logic. Let's look at an example.

function foo<T>(arg: T): T {
    return arg;
}


const bar = foo<string>('baz');

This is a super basic example, but what happens if we want to perform an operation on this?

function foo<T>(arg: T): T {
    console.log(arg.length);
    return arg;
}

There are many types that have a .length attribute, but if we try to use this new code, we'll get an error because there are some types that do not have that property. To solve this problem we can extend these types.

function foo<T extends string>(arg: T): T {
    console.log(arg.length);
    return arg;
}

This will work, however, it kind of defeats the purpose a little because T could be an array or an object with a length property on it. Using a custom interface, we can zero in on the property that we need to extend with our generic type.

interface GenericLengthType {
    length: number;
}

function foo<T extends GenericLengthType>(arg: T): T {
   console.log(arg.length);
   return arg;
}

const a = foo(['foo', 'bar', 'baz']);

const b = foo('bar');

const c = foo({length: 10});

const d = foo(10); // error number doesn't have property length

This is all well and good, but let's look at a more practical example, one I use often when writing TypeScript code.

function TryWrapper<T extends Function>(fn: T): T {
  return <any>function() {
    try {
      return fn(...arguments);
    } catch (e) {
      // handle error gracefully
    }
  };
}

const test = TryWrapper((arg: string) => {
  if (arg.length < 5) {
    throw new Error("Argument length must be longer than 5");
  }
  return arg.split("");
});

It may seem odd that we're using type any on the returned function, however, if we don't put anything there we will get this error

Type '(args: any) => any' is not assignable to type 'T'.
'(args: any) => any' is assignable to the constraint of type 'T',
but 'T' could be instantiated with a different subtype of constraint 'Function'.

When we leave out that any it's basically trying to assign that type to T, which it's telling us is invalid. We also use the arguments keyword to grab all the arguments passed into the function. We then use the spread operator to make sure that the arguments are passed into the wrapped function. The reason we do this is that a wrapped function may have several arguments passed into it and we want to make sure to preserve them.

Here is a live example on stackblitz

Thanks for reading the first TypeScript tip of the week! Tell me what you think in the comments.