: TypeScript knows the JavaScript language and will generate types for you in many cases. For example in creating a variable and assigning it to a particular value, TypeScript will use the value as its type.

CODE Kopieren

let user = {

  name: "Hayes",

  id: 0,

};



user = 'Cat'; // causes error message (below)



// Type 'string' is not assignable to type '{ name: string; id: number; }'.

This also gets more complex with variables that are objects. In the previous example, you might have noticed that the error message states not assignable to type '{ name: string; id: number; }. This means that even if we were to have assigned user to an empty object {} we would also get an error. However, why does this occur?

TypeScript introduces an interface keyword, which allows for you to create a type of Object that adheres to certain constraints; this is similar to instancing an Object with a Class. In the example above, it is implied that the user belongs to an interface. If we were to alter the code above to reflect how TypeScript is viewing it, it would look more akin to the following example.

CODE Kopieren

// In the background, TypeScript is implicitly developing this interface

interface User {

    name: string;

    id: number;

}



// Here we see that the user variable is referencing the interface on assignment

const user: User = {

    name: "Hayes",

    id: 0,

};

As you review the previous code example, you might begin to question whether or not TypeScript makes Classes redundant. However, this is not the case, as both have unique uses within our code.

CODE Kopieren

interface User {

  name: string;

  id: number;

}



class UserAccount {

  name: string;

  id: number;



  constructor(name: string, id: number) {

    this.name = name;

    this.id = id;

  }

}



let user: User = new UserAccount("Justin", 1);

At first glance this can be somewhat overwhelming and confusing to look at, so we are going to break this down into parts so that we can get a better understanding of what each piece of code is responsible for.

CODE Kopieren

interface User {

  name: string;

  id: number;

}

The above code example is creating an interface that other variables in our application will adhere to. It is essentially establishing a template that variables in our code must follow, which is useful for ensuring that we are working with the proper data type and structure when we attempt to execute a set of code. However, it is important to note that this interface is only used at compile time.

CODE Kopieren

class UserAccount {

  name: string; // TypeScript expects explicit property declarations

  id: number;



  constructor(name: string, id: number) {

    this.name = name;

    this.id = id;

  }

}

In the above code, we are declaring a class that expects for there to be a name and id property that will be used in a constructor to instance a new Object. It is important to note that this Class is used at runtime to create new instances of an Object; at compile time the previously covered interface enforces that a variable will follow the structure returned by the Class.

CODE Kopieren

let user: User = new UserAccount("Justin", 1);

Finally, we are stating the for the variable user it will adhere to the User interface that we have defined earlier. On compile time, it is expected that this user variable will henceforth follow this data type and structure. On runtime, our Class is used to create (and return) a new instance of an Object...and our User interface expects certain values to be returned by that class.

.

Conclusion

TypeScript can be a valuable addition to your development environment, as it can implement additional error handling and it can help you better understand errors in your application when they occur. Learning and implementing TypeScript can present challenges that might initially slow the development process. However, once you have a better understanding of TypeScript, it can make the development process easier for you or your team!

Sources