Interfaces in TypeScript: How to Define and Use Custom Types
TypeScript is a superset of JavaScript that provides type checking and other features to improve the development process. One of the key features of TypeScript is the ability to define and use custom types through interfaces. In this article, we will explore what interfaces are and how to define and use them in TypeScript.
Interfaces in TypeScript are used to define custom types. They provide a way to define the shape of an object, including its properties and methods. Interfaces can also be used to define function signatures and class types.
In TypeScript, interfaces are purely a compile-time construct and do not have a runtime representation. They are used by the TypeScript compiler to check the types of variables, function parameters, and return values at compile time.
To define an interface in TypeScript, we use the interface
keyword followed by the name of the interface and a set of curly braces containing the properties and methods of the interface.
interface Person {
firstName: string;
lastName: string;
age: number;
sayHello(): void;
}
In the example above, we define an interface named Person
that has three properties (firstName
, lastName
, and age
) and one method (sayHello
). The firstName
and lastName
properties are of type string
, while the age
property is of type number
. The sayHello
method takes no parameters and returns void
.
Once we have defined an interface, we can use it to define the types of variables, function parameters, and return values.
function greet(person: Person): void {
console.log(`Hello, ${person.firstName} ${person.lastName}!`);
person.sayHello();
}
const john: Person = {
firstName: 'John',
lastName: 'Doe',
age: 30,
sayHello: () => console.log('Hello!'),
};
greet(john);
In the example above, we define a function named greet
that takes a parameter of type Person
. Inside the function, we use the firstName
and lastName
properties of the Person
object to print a greeting message and call the sayHello
method.
We also define a variable named john
of type Person
and initialize it with an object that has the required properties and methods.
In an interface, we can mark a property as optional by adding a question mark ?
after its name.
interface Person {
firstName: string;
lastName: string;
age?: number;
sayHello(): void;
}
In the updated Person
interface above, we mark the age
property as optional. This means that an object of type Person
can have an age property or not.
In an interface, we can mark a property as readonly by adding the readonly
keyword before its name.
interface Person {
readonly firstName: string;
readonly lastName: string;
age?: number;
sayHello(): void;
}
In the updated Person
interface above, we mark the firstName
and lastName
properties as readonly. This means that once they are set, their values cannot be changed.
Interfaces in TypeScript can also be extended to create new interfaces that inherit the properties and methods of existing interfaces.
interface Animal {
name: string;
eat(food: string): void;
}
interface Dog extends Animal {
bark(): void;
}
const dog: Dog = {
name: 'Rex',
eat: (food) => console.log(`Eating ${food}`),
bark: () => console.log('Woof!'),
};
dog.eat('meat');
dog.bark();
In the example above, we define an interface named Animal
that has two properties (name
and eat
) and a Dog
interface that extends Animal
and adds a bark
method.
We then define a variable named dog
of type Dog
and initialize it with an object that has the required properties and methods.
In this article, we have explored what interfaces are and how to define and use them in TypeScript. We have seen how interfaces can be used to define the shape of an object, including its properties and methods, and how they can be used to define function signatures and class types.
Interfaces are a powerful feature of TypeScript that can help improve the maintainability and readability of your code. By using interfaces, you can define custom types that accurately reflect the structure of your data and ensure that your code is type-safe.