DEV Community

shadow1349
shadow1349

Posted on • Updated on

The Beginner’s Guide to TypeScript

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!

Top comments (0)