What Is The Difference Between Type and interface In TypeScript?

What Is The Difference Between Type and interface In TypeScript?

interface is a way to describe data shapes, such as an object. Unlike an interface, _type` can introduce a name for any kind of type, including primitive, union, and intersection types.

TLDR; interface is a way to describe data shapes, such as an object. Unlike an interface, type can introduce a name for any kind of type, including primitive, union, and intersection types.

What is an Interface?

An interface looks like this:

interface Human {
 name: string;
 age: number;
 speak: () => void;
}

// Using an interface
const james: Human = {
 name: 'James',
 age: 30,
 speak: () => {
   console.log('Hello, my name is James.')
 }
}

The definition and usage of a newly created interface “Human”

Above we have defined an interface called Human, and then used it to create a variable james. Interfaces are useful in a way that we can always be sure that the objects that we create have the same shape (properties). And if we happen to create a variable with the interface Human, with a different shape, TypeScript will show an error.

// Creating an interface that does not match the "Human" shape
const charlie: Human {
  name: 'Charlie',

  // This will display an error
  // Type '{ name: string; run: () => void }' is not assignable to type 'Human'.
  run: () => {
    console.log('Running away!')
  }
}

TypeScript error when the variable doesn’t match the defined interface

Simple enough? Good, let’s move on.

javascript-tips typescript javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Top 5 pro tips for your next TypeScript code

JavaScript started its journey a few decades back by doing simple dynamic things on web pages. But now JavaScript has very useful features such as classes support and powerful standard built-in objects like any other modern programming language. JavaScript is a dynamically typed programming language because the whole concept is to execute a source script in the user’s sandboxed environment via an interpreted way. TypeScript is very popular because it introduced a new way that will help developers to write JavaScript using the statically typed concept. So it’s easy to identify data types before the execution of the code. In this tutorial, you'll see Top 5 pro tips for your next TypeScript code

The essential JavaScript concepts that you should understand

The essential JavaScript concepts that you should understand - For successful developing and to pass a work interview

What is TypeScript? Why TypeScript? and Why Not TypeScript?

TypeScript extends JavaScript by adding Types. There are many great reasons to switch to TypeScript. Especially if your team uses JavaScript. There are some reasons to not use TypeScript as there are with any language or framework.

7 Simple JavaScript Tips for Optimizing Your Code

You may not know about these tips 7 Simple JavaScript Tips for Optimizing Your Code

TypeScript Tutorial For JavaScript Developers - TypeScript Basics

TypeScript Tutorial For JavaScript Developers - TypeScript Basics. I will show you guys 4 example of JavaScript code, and how to convert it to TypeScript. This is a typescript beginners tutorial.