Skip to content

Instantly share code, notes, and snippets.

@selcukguler0
Created March 31, 2023 09:21
Show Gist options
  • Save selcukguler0/6eb013b5d8ff1297a84ab341aa6575a0 to your computer and use it in GitHub Desktop.
Save selcukguler0/6eb013b5d8ff1297a84ab341aa6575a0 to your computer and use it in GitHub Desktop.
Typescript - Interface vs Type

Understanding TypeScript Type and Interface

TypeScript is an open-source programming language that is a superset of JavaScript. It adds optional static typing and other features to the language, making it easier to catch errors and write more robust code.

One of the key features of TypeScript is its use of types and interfaces to define data structures and function signatures. In this article, we'll take a closer look at what types and interfaces are, and how they can be used in TypeScript.

TypeScript Types

In TypeScript, types are used to define the shape of data. Types can be used to describe primitive values, such as strings or numbers, as well as complex objects and functions.

Here's an example of how to define a type in TypeScript:

type Person = {
name: string;
age: number;
address: string;
};

In this example, we're defining a type called Person, which has three properties: name (a string), age (a number), and address (a string).

Once we've defined a type, we can use it to annotate variables and function parameters:

const person: Person = {
name: 'John Doe',
age: 30,
address: '123 Main St.'
};

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

TypeScript Interfaces

In addition to types, TypeScript also supports interfaces. Interfaces are similar to types in that they can be used to describe the shape of data, but they have some key differences.

Here's an example of how to define an interface in TypeScript:

interface Animal {
name: string;
species: string;
sound(): void;
}

In this example, we're defining an interface called Animal, which has two properties: name (a string) and species (a string), as well as a method called sound (which returns void).

Like types, interfaces can be used to annotate variables and function parameters:

function makeSound(animal: Animal) {
console.log(The ${animal.species} goes "${animal.sound()}".);
}

Differences between Types and Interfaces

While types and interfaces are similar in many ways, there are some key differences to be aware of.

One major difference is that types can be used to describe primitive types, whereas interfaces cannot. For example, you can use a type to describe a number or a string, but you can't use an interface to do so.

Another difference is that types can be used to define unions and intersections of other types, whereas interfaces cannot. For example, you can define a type that is a union of two other types:

type Color = 'red' | 'green' | 'blue';
type Size = 'small' | 'medium' | 'large';
type Shirt = {
color: Color;
size: Size;
};

In this example, we're defining three types: Color (which is a union of the strings 'red', 'green', and 'blue'), Size (which is a union of the strings 'small', 'medium', and 'large'), and Shirt (which has two properties: color of type Color, and size of type Size).

Overall, both types and interfaces are powerful tools for defining the shape of data and function signatures in TypeScript. Understanding their similarities and differences can help you choose the right tool for the job.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment