Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
February 13, 2022 01:17 pm GMT

Interface vs Type in Typescript

My personal convention, which I describe below, is this:

Always preferinterfaceovertype.

When to usetype?

  • Usetypewhen defining an alias for primitive types (string, boolean, number, bigint, symbol, etc)
  • Usetypewhen defining tuple types
  • Usetypewhen defining function types
  • Usetypewhen defining a union
  • Usetypewhen trying to overload functions in object types via composition
  • Usetypewhen needing to take advantage of mapped types

Additions:

Generic Transformations

Use thetypewhen you are transforming multiple types into a single generic type.

Example:

type Nullable<T> = T | null | undefinedtype NonNull<T> = T extends (null | undefined) ? never : T

Type Aliasing

We can use thetypefor creating the aliases for long or complicated types that are hard to read as well as inconvenient to type again and again.

Example:

type Primitive = number | string | boolean | null | undefined

Creating an alias like this makes the code more concise and readable.

Type Capturing

Use thetypeto capture the type of an object when the type is unknown.

Example:

const orange = { color: "Orange", vitamin: "C"}type Fruit = typeof orangelet apple: Fruit

Here, we get the unknown type oforange, call it aFruitand then use theFruitto create a new type-safe objectapple.

When to useinterface?

  • Useinterfacefor all object types where usingtypeis not required (see above)
  • Useinterfacewhen you want to take advantage of declaration merging.

Additions:

Polymorphism

Aninterfaceis a contract to implement a shape of the data. Use the interface to make it clear that it is intended to be implemented and used as a contract about how the object will be used.

Example:

interface Bird {    size: number    fly(): void    sleep(): void}class Hummingbird implements Bird { ... }class Bellbird implements Bird { ... }

Though you can use thetypeto achieve this, the Typescript is seen more as an object oriented language and theinterfacehas a special place in object oriented languages. It's easier to read the code withinterfacewhen you are working in a team environment or contributing to the open source community. It's easy on the new programmers coming from the other object oriented languages too.

The official Typescriptdocumentationalso says:

... we recommend using aninterfaceover atypealias when possible.

This also suggests that thetypeis more intended for creating type aliases than creating the types themselves.

Declaration Merging

You can use the declaration merging feature of theinterfacefor adding new properties and methods to an already declaredinterface. This is useful for the ambient type declarations of third party libraries. When some declarations are missing for a third party library, you can declare the interface again with the same name and add new properties and methods.

Example:

We can extend the aboveBirdinterface to include new declarations.

interface Bird {    color: string    eat(): void}

That's it! It's easier to remember when to use what than getting lost in subtle differences between the two.

PS: According to TypeScript handbook the answer is:

Almost all features of an interface are available in type.The key distinction is that a type cannot be re-opened to add new properties vs an interface which is always extendable.


Original Link: https://dev.to/ridhoanshory/interface-vs-type-in-typescript-4ca0

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To