What is TypeScript and why should I learn it?

What is TypeScript?

TypeScript is a superset of JavaScript developed and maintained as open source software by Microsoft. What superset means, more simply, is additional syntax and functionalities added on top of JavaScript.

TypeScript code is written in files with extension .ts but the code is later converted to JavaScript through a process called transpiling. Because the transpiled code turns to JavaScript it allows the code to run everywhere where JavaScript runs. This means that TypeScript is basically JavaScript with additional syntax and data type checking.

Why should I learn it?

Just by the fact that TypeScript allows us to define the data type (boolean, number, string, etc) of a variable we could say is enough to start using it in our applications, but in case you need to know more ways you can use it, here I leave you some of the features more commonly used:

Data Types

Data type checking adds the same functionality included in other known programming languages like C, Java, etc. It allows the programmer to define which data type a variable should be and if the variable does not meet that criteria the code will not transpile to JavaScript and produce an error.

Boolean


let allowLogin: boolean = true;

Number


let years: number = 18;
let price: number = 6;

String


let motivation: string = 'Keep on learning';

Array


// (Two ways of defining Arrays)
let numbers: number[] = [1, 2, 3, 4, 5];
let numbers: Array<number> = [1, 2, 3, 4, 5];

Tuple


let person: [string, number, string];
person = ['Jon', 35, 'King in the north'];

person[0]; // Name = 'Jon'
person[1]; // Age = 35
person[2]; // Profession = 'King in the north'

Object


const requestOptions: object = {
    method: 'GET',
    url: 'https://api.jojoscode.com/v1/types'
};

Any


let serverResponse: any;

Null and Undefined


let file: null;
let playerSelected: undefined;

Function Types

Similar to the way we define data types for variables, TypeScript allows us to define the data type of the return value of a function. You can use all the previously seen data types and an additional type, named void, and represents that the function doesn’t return any value.


// String example
function sayHi(name: string): string {
    return 'Hi' + name;
}

// Void example
function logAction(): void {
    console.log('Action performed');
}

Interfaces

While data and function types allow us to define the types of the data available in JavaScript, interfaces are really great to define a contract on how an object should be composed. This way you can make sure that any implementation is based on your interface like in the following example:


// CardInterface
interface CardValue {
    type: string,
    name: string,
    value: number,
    color: string
}

function getFavoriteCard(): CardValue {
    const favoriteCard: CardValue = {
        type: 'Hearts',
        name: 'Ten',
        value: 10,
        color: 'Red'
    };

    return favoriteCard;
}

Conclusion

As I mentioned before in this post, I included just a short list with some of the TypeScript features that are more commonly used, but if you want to dig deeper you can check the resources I left at the end of the post.

If you have a suggestion, correction or any feedback please leave it in the comments below and thank you for reading.