Getting Started with TypeScript

Are you tired of debugging your JavaScript code? Do you want to write more maintainable and scalable code? If yes, then TypeScript is the answer to your problems. TypeScript is a superset of JavaScript that adds static typing, classes, interfaces, and other features to JavaScript. In this article, we will learn how to get started with TypeScript and how it can improve your JavaScript code.

Installing TypeScript

Before we start writing TypeScript code, we need to install TypeScript on our machine. TypeScript can be installed using npm, the Node.js package manager. Open your terminal and run the following command:

npm install -g typescript

This command will install TypeScript globally on your machine. You can verify the installation by running the following command:

tsc --version

This command will display the version of TypeScript installed on your machine.

Writing TypeScript Code

Now that we have installed TypeScript, let's start writing some TypeScript code. TypeScript files have the extension .ts. You can write TypeScript code in any text editor or IDE of your choice. Let's create a new file called app.ts and write some TypeScript code in it.

function greet(name: string) {
  console.log(`Hello, ${name}!`);
}

greet("TypeScript");

In the above code, we have defined a function called greet that takes a parameter of type string and logs a greeting message to the console. We have also called the greet function with the argument "TypeScript". Notice that we have specified the type of the name parameter as string. This is one of the main features of TypeScript - static typing.

Compiling TypeScript Code

TypeScript code cannot be executed directly in the browser or Node.js environment. It needs to be compiled to JavaScript first. The TypeScript compiler (tsc) can be used to compile TypeScript code to JavaScript. Open your terminal and navigate to the directory where you have saved the app.ts file. Run the following command:

tsc app.ts

This command will compile the app.ts file to app.js. You can now run the app.js file using Node.js:

node app.js

This command will execute the app.js file and log the greeting message to the console.

Type Annotations

TypeScript provides a way to specify the types of variables, parameters, and return types in your code. This is called type annotation. Type annotations help in catching errors at compile-time rather than at runtime. Let's modify the greet function to include type annotations:

function greet(name: string): void {
  console.log(`Hello, ${name}!`);
}

In the above code, we have specified that the greet function takes a parameter of type string and returns void. The void type means that the function does not return anything.

Interfaces

Interfaces are a way to define the shape of an object in TypeScript. They provide a way to enforce a certain structure on an object. Let's define an interface for a person object:

interface Person {
  firstName: string;
  lastName: string;
  age: number;
}

function greetPerson(person: Person) {
  console.log(`Hello, ${person.firstName} ${person.lastName}! You are ${person.age} years old.`);
}

const john: Person = {
  firstName: "John",
  lastName: "Doe",
  age: 30,
};

greetPerson(john);

In the above code, we have defined an interface called Person that has three properties - firstName, lastName, and age. We have also defined a function called greetPerson that takes a parameter of type Person and logs a greeting message to the console. We have created an object called john that conforms to the Person interface and passed it to the greetPerson function.

Classes

Classes are a way to define objects with properties and methods in TypeScript. They provide a way to encapsulate data and behavior. Let's define a class for a person object:

class Person {
  firstName: string;
  lastName: string;
  age: number;

  constructor(firstName: string, lastName: string, age: number) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.age = age;
  }

  greet() {
    console.log(`Hello, ${this.firstName} ${this.lastName}! You are ${this.age} years old.`);
  }
}

const john = new Person("John", "Doe", 30);
john.greet();

In the above code, we have defined a class called Person that has three properties - firstName, lastName, and age. We have also defined a constructor that takes three parameters and initializes the properties. We have defined a method called greet that logs a greeting message to the console. We have created an object called john using the new keyword and passed the constructor parameters.

Enums

Enums are a way to define a set of named constants in TypeScript. They provide a way to give more meaning to numeric values. Let's define an enum for the days of the week:

enum DayOfWeek {
  Monday,
  Tuesday,
  Wednesday,
  Thursday,
  Friday,
  Saturday,
  Sunday,
}

function getDayOfWeek(day: DayOfWeek) {
  switch (day) {
    case DayOfWeek.Monday:
      return "Monday";
    case DayOfWeek.Tuesday:
      return "Tuesday";
    case DayOfWeek.Wednesday:
      return "Wednesday";
    case DayOfWeek.Thursday:
      return "Thursday";
    case DayOfWeek.Friday:
      return "Friday";
    case DayOfWeek.Saturday:
      return "Saturday";
    case DayOfWeek.Sunday:
      return "Sunday";
  }
}

console.log(getDayOfWeek(DayOfWeek.Monday)); // "Monday"

In the above code, we have defined an enum called DayOfWeek that has seven constants - Monday, Tuesday, Wednesday, Thursday, Friday, Saturday, and Sunday. We have defined a function called getDayOfWeek that takes a parameter of type DayOfWeek and returns the corresponding day of the week as a string.

Conclusion

In this article, we have learned how to get started with TypeScript and how it can improve your JavaScript code. We have learned about type annotations, interfaces, classes, and enums. TypeScript is a powerful tool that can help you write more maintainable and scalable code. Happy coding!

Editor Recommended Sites