Horje
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 Content

Interface

In TypeScript, an interface is a structure that defines the syntax for classes to follow. It specifies properties and methods that an object should have, providing a way to enforce type-checking and ensuring consistent object structure.

Syntax

interface MyInterface {
    // Interface properties and methods
}

Example: Using Interfaces in TypeScript

In this example, we defines an interface Person with name and age properties. It then creates a person object following the Person interface

JavaScript 
// Interface.ts
interface Person {
    name: string;
    age: number;
}

const person: Person = {
    name: "John Doe",
    age: 25,
};

console.log(person.name);
console.log(person.age);

Output

"John Doe"    // person.name
25                  // person.age

Type statement

Type statements in TypeScript define custom types that can represent the structure of objects, primitives, unions, intersections, and more. They allow for creating type aliases, enhancing code readability and reusability by providing descriptive names for complex or existing types.

Syntax

type MyType = {
    // Type properties and methods
}

Example: Using Type Aliases in TypeScript

In this example, we defines a Point type with x and y properties. It creates a point object conforming to the Point type and prints its x and y values

JavaScript 
// type.ts
type Point = {
    x: number;
     y: number;
};

const point: Point = {
    x: 10,
    y: 20,
};

console.log(point.x); 
console.log(point.y);

Output:

10    // point.x
20    // point.y

Difference between Interface and type Statements


Type

Interface

Purpose


A type statement is an alias for an existing type. It allows to create custom types to give a more descriptive name to an existing type.


An interface is a set of rules that a class or object must adhere to. It specifies the methods and properties that the implementing class should have, without providing any implementation details.

Syntax


The syntax for a type statement varies depending on the programming language. It can involve keywords like “type,” “typedef,” “alias,” or specific syntax rules provided by the language.


An interface is declared using the “interface” keyword followed by the interface name and the list of method or property definitions.

Usage


Type statements are used to define custom types or to provide more descriptive names to existing types.


Interfaces are mainly used to achieve abstraction and provide a way to define common behavior across different classes.

Implementation


Type statements, in most cases, do not define behavior or implementation. They primarily define the characteristics or relationships of types.


Interfaces only define the structure and signatures of methods or properties, without providing any implementation details

Extensibility


Type statements, depending on the language, may or may not support multiple inheritance. They are primarily used to create new types or aliases for existing types.


Interfaces support multiple inheritance, meaning a class can implement multiple interfaces. This allows for greater flexibility and code reuse.

Polymorphism


They allow for polymorphism and can be implemented by multiple classes.


They can improve code readability and maintainability by making the intent of the code clearer.

In TypeScript, interface and type are powerful tools for defining object structures and custom types. Interfaces enforce specific contracts for classes and support multiple inheritance, promoting consistent object structure. Types offer flexibility in defining complex and reusable type aliases, enhancing code readability and maintainability. Both are crucial for ensuring type safety and clarity in TypeScript code, each serving distinct but complementary purposes.


 


Reffered: https://www.geeksforgeeks.org

JavaScript

Related
JavaScript Ellipsis JavaScript Ellipsis
JavaScript Program for Multiplication of Two Numbers JavaScript Program for Multiplication of Two Numbers
Backbone.js Tutorial Backbone.js Tutorial
Explain Route matching priority in VueJS ? Explain Route matching priority in VueJS ?
How do you Make an If Statement in JavaScript that Checks if a Variable is Equal to a Certain Word ? How do you Make an If Statement in JavaScript that Checks if a Variable is Equal to a Certain Word ?

Type:
 Geek
Category:
 Coding
Sub Category:
 Tutorial
Uploaded by:
 Admin
Views:
 13



 

Horje