An Interest In:
Web News this Week
- April 26, 2024
- April 25, 2024
- April 24, 2024
- April 23, 2024
- April 22, 2024
- April 21, 2024
- April 20, 2024
Interface vs Type in Typescript
My personal convention, which I describe below, is this:
Always preferinterfaceovertype.
When to usetype
?
- Use
type
when defining an alias for primitive types (string, boolean, number, bigint, symbol, etc) - Use
type
when defining tuple types - Use
type
when defining function types - Use
type
when defining a union - Use
type
when trying to overload functions in object types via composition - Use
type
when needing to take advantage of mapped types
Additions:
Generic Transformations
Use thetype
when 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 thetype
for 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 thetype
to 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 aFruit
and then use theFruit
to create a new type-safe objectapple
.
When to useinterface
?
- Use
interface
for all object types where usingtype
is not required (see above) - Use
interface
when you want to take advantage of declaration merging.
Additions:
Polymorphism
Aninterface
is 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 thetype
to achieve this, the Typescript is seen more as an object oriented language and theinterface
has a special place in object oriented languages. It's easier to read the code withinterface
when 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 thetype
is more intended for creating type aliases than creating the types themselves.
Declaration Merging
You can use the declaration merging feature of theinterface
for 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 aboveBird
interface 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
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To