TypeScript Interfaces and Types

Are you tired of debugging your JavaScript code? Do you want to write code that is more maintainable and scalable? If so, you should consider using TypeScript. TypeScript is a superset of JavaScript that adds static typing, classes, and interfaces to the language. In this article, we will focus on TypeScript interfaces and types.

What are TypeScript Interfaces?

Interfaces are a way to define contracts in TypeScript. They describe the shape of an object, but they do not provide an implementation. An interface can be used to enforce a certain structure on an object, and it can be used to define the types of the properties and methods of an object.

interface Person {
  name: string;
  age: number;
  greet(): void;
}

In the example above, we define an interface called Person. It has three properties: name, age, and greet. The name property is of type string, the age property is of type number, and the greet method has a return type of void.

We can use this interface to define objects that conform to this structure:

const john: Person = {
  name: "John",
  age: 30,
  greet() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  },
};

In this example, we define an object called john that conforms to the Person interface. It has a name property of type string, an age property of type number, and a greet method that logs a message to the console.

What are TypeScript Types?

Types are a way to define the shape of a value in TypeScript. They can be used to define the types of variables, function parameters, and return types. Types can also be used to define the types of properties and methods of an object.

type Person = {
  name: string;
  age: number;
  greet(): void;
};

In the example above, we define a type called Person. It has three properties: name, age, and greet. The name property is of type string, the age property is of type number, and the greet method has a return type of void.

We can use this type to define variables that conform to this shape:

let john: Person = {
  name: "John",
  age: 30,
  greet() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  },
};

In this example, we define a variable called john that conforms to the Person type. It has a name property of type string, an age property of type number, and a greet method that logs a message to the console.

What is the difference between Interfaces and Types?

Interfaces and types are very similar, but there are some differences between them. The main difference is that interfaces can be extended and merged, while types cannot.

interface Animal {
  name: string;
  eat(): void;
}

interface Dog extends Animal {
  bark(): void;
}

type Cat = {
  name: string;
  meow(): void;
};

type Pet = Dog | Cat;

In the example above, we define an interface called Animal that has a name property and an eat method. We then define an interface called Dog that extends the Animal interface and adds a bark method. We also define a type called Cat that has a name property and a meow method. Finally, we define a type called Pet that can be either a Dog or a Cat.

Interfaces can also be merged:

interface Person {
  name: string;
}

interface Person {
  age: number;
}

const john: Person = {
  name: "John",
  age: 30,
};

In this example, we define an interface called Person that has a name property. We then define another interface called Person that has an age property. TypeScript will merge these two interfaces into one interface that has both properties. We can then use this interface to define an object that has both properties.

Types cannot be extended or merged:

type Person = {
  name: string;
};

type Person = {
  age: number;
}; // Error: Duplicate identifier 'Person'.

In this example, we define a type called Person that has a name property. We then define another type called Person that has an age property. TypeScript will throw an error because we are trying to define two types with the same name.

Conclusion

TypeScript interfaces and types are powerful tools that can help you write more maintainable and scalable code. They allow you to define contracts and enforce certain structures on your objects and values. Interfaces and types are very similar, but there are some differences between them. Interfaces can be extended and merged, while types cannot. Use interfaces when you need to define contracts that can be extended or merged, and use types when you need to define the shape of a value. Happy coding!

Editor Recommended Sites