TypeScript Interfaces Type
Last Updated :
16 May, 2024
TypeScript Interfaces Type offers an alternative method for defining an object's type, allowing for a distinct naming approach.
Syntax:
interface InterfaceName {
property1: type1;
property2?: type2;
readonly property3: type3;
// ...
method1(): returnType1;
method2(): returnType2;
// ...
}Parameters:
- interface is the keyword itself which is used to declare the intreface.
- InterfaceName is the name of the interface.
- property1 is the name of the property in an interface.
- type1 is the type of the property1 in the interface.
- method()1 is the method name of the method in the interface.
- returnType1 is the type of return value of the method()1.
Example 1: In this example, one Employee object is defined, and its properties are displayed with in the console output.
JavaScript
interface Employee {
// The readonly-indicates id cannot be modified
readonly id: number;
firstName: string;
lastName: string;
age: number;
//The ?-indicates city is a optional property
city?: string
}
// Create an object adhering
// to the Employee interface
const employee1: Employee = {
id: 1,
firstName: "John",
lastName: "Doe",
age: 30,
};
console.log(`Employee:First Name : ${employee1.firstName}
,Last Name : ${employee1.lastName},Age : ${employee1.age}`);
Output:
"Employee:First Name : John,Last Name : Doe,Age : 30"
Example 2: In this example, a Circle class is implemented, adhering to the Shape interface, and an instance of the circle is created and its color and area are displayed in the console.
JavaScript
interface Shape {
color: string;
area(): number;
}
interface Circle extends Shape {
radius: number;
}
class CircleImpl implements Circle {
constructor(public color: string,
public radius: number) { }
area(): number {
return Math.PI * this.radius ** 2;
}
}
const myCircle = new CircleImpl("red", 5);
console.log(`Color: ${myCircle.color},
Area: ${myCircle.area()}`);
Output:
"Color: red,
Area: 78.53981633974483"
Example 3: In this example, a hybrid interface type for a Product object is defined, and a runtime validation method is added to check object conformity.
JavaScript
interface HybridProduct {
readonly id: number;
name: string;
price: number;
description?: string;
validate(obj: any): boolean;
}
const HybridProduct: HybridProduct = {
id: 0,
name: '',
price: 0,
validate(obj: any): boolean {
if (typeof obj.id !== 'number' || typeof obj.name !== 'string' || typeof obj.price !== 'number') {
return false;
}
if (obj.description && typeof obj.description !== 'string') {
return false;
}
return true;
}
};
const product = {
id: 1,
name: "Laptop",
price: 1500
};
console.log(`Product is valid: ${HybridProduct.validate(product)}`);
Output:
"Product is valid: true"
Similar Reads
Interfaces in TypeScript TypeScript is a statically typed superset of JavaScript that adds optional types, classes, interfaces, and other features to help developers build robust and maintainable applications. One of the most powerful features of TypeScript is interfaces, which allow you to define the structure of objects,
4 min read
TypeScript Interface vs Type Statements In TypeScript, interface and type are used to define the structure of objects and custom types. While interfaces enforce contracts for classes and support multiple inheritance, types offer flexibility for defining complex and reusable type aliases. Each serves distinct use cases.Table of ContentInte
3 min read
TypeScript Generic Types TypeScript Generic Types can be used by programmers when they need to create reusable components because they are used to create components that work with various data types and this provides type safety. The reusable components can be classes, functions, and interfaces. TypeScript generics can be u
2 min read
What are TypeScript Interfaces? TypeScript interfaces define the structure of objects by specifying property types and method signatures, ensuring consistent shapes and enhancing code clarity.Allow for optional and read-only properties for flexibility and immutability.Enable interface inheritance to create reusable and extendable
4 min read
How to check interface type in TypeScript ? Typescript is a pure object-oriented programming language that consists of classes, interfaces, inheritance, etc. It is strict and it statically typed like Java. Interfaces are used to define contacts in typescript. In general, it defines the specifications of an entity. Below is an example of an in
2 min read