What do we need to know about TypeScript (for beginners)

In my two years of programming, I’ve never used typescript in any way. My friends have told me a lot about it, and a version of it was used at my internship. We used Flow at my internship, but they switched to typescript in the last week, so I haven’t learned anything about it. I am going to try to figure out the basics of typescript and take you guys with me in the learning process.

TypeScript — Typed JavaScript at Any Scale.

TypeScript is an open-source language based on the addition of static definements to JavaScript, one of the most used tools in the world. It is aimed at making the language more scalable and reliable. Types offer a way to define the shape of an object, allowing TypeScript to verify that your code is working correctly

JavaScript uses dynamic typing. As a result, until a variable is assigned a value at runtime, JavaScript programs have no idea what data type it is. There are no problems or warnings when the attribute is reassigned. This can lead to bugs. TypeScript uses static typing. When variables are declared, they can be assigned a value. If a variable is ever assigned a value of a different kind, TypeScript will throw an error at compile time.

Install TypeScript

First, we’ll need to have TypeScript installed on our computer. For this, we’ll use npm, so open a terminal and type the following command:

npm install -g typescript

Once the installation is complete we can verify this by running the tsc -version command in our terminal. This displays the installed typescript version.

Defining types

Typing is a great way to ensure scalability and reliability. It also helps in the detection of bugs and errors, as well as the proper documentation of our code.

If we want to assign a type to a variable, we must first write the variable’s name followed by a :, then the type’s name followed by a =, and finally the variable’s value. If we are using TypeScript there are three different types that we can use: any type, the built-in types or the user-defined types.

Any type

The any type allows us to assign literally “any” value to that variable, simulating what we know as plain JavaScript

const ourVariable: any = 'Hello World'

Built-in types

TypeScript includes these types by default. Some of these styles are very well-known: number, string, boolean, void, null and undefined.

const name: string = Roy;
const age: number = 23;
const isOnline: boolean = true;

User-defined Types

User-defined types mean that a particular type can be declared or that a type can be inferred by TypeScript when, for example, you use a function. The different options that I found are: class, interface, array. This will not be all of them

Class

A class defines how an object should appear in terms of its features and functionalities. Classes are simply special functions added to ES6 to mimic the class keyword from other languages.

TypeScript includes built-in support for classes, which ES5 and earlier versions did not. This means we can easily declare one by using the class keyword.

class Greeter {
  greeting: string;
constructor(message: string) {
    this.greeting = message;
  }
greet() {
    return "Hello, " + this.greeting;
  }
}
let greeter = new Greeter("world");

A class is a template for objects in object-oriented programming. The definition of objects is at the heart of object-oriented programming. Data structures, or objects, are described in object-oriented programming, each with its own set of properties or attributes. Each object may have its own set of procedures and methods.

Interface

Another powerful aspect of TypeScript is the definition of interfaces, which helps you to describe the configuration of variables. An interface is similar to a syntactical contract that an object must follow.

interface Person {
    first: string;
    last: string;
    age: number;
    [key: string]: any;
}
const person: Person {
   first: 'Roy',
   last: 'Kuijper',
   age: 23
   isPresent: false
}
const person2: Person = {
   first: 'James',
   last: 'Whops',
   age: 32,
   isPresent: true
}

Above, you see a simple example in which the first name, last name and age of the Personhave been configured. You can now configure other objects using this interface.

Conclusion

As I told you at the start of this article it will be for beginners(including myself). As a young developer, I enjoy learning new things and incorporating them into my programming sessions. TypeScript will be one of these unique features that I am going to use.

TypeScript code is more dependable and refactorable than JavaScript code. This makes avoiding mistakes and rewrites a lot easier for developers. Since TypeScript is a subset of javascript, the learning curve will be relatively short.

Sources

Typed JavaScript at Any Scale.