Note: The term "Types" in this article is referring to the"type" aliases in Typescript
According to the official Typescript document: "TypeScript ...
For further actions, you may consider blocking this person and/or reporting abuse
An interface merge can be used to "add" new functionality to an existing class (as long as only public features are accessed):
So what is the difference between combining two types or interfaces, using '&' and using '|'.
See Naming of TypeScript's union and intersection types:
intersection of types (
&
): the shape of the data has to conform to the constraints of all the intersected types simultaneously.union of types (
|
): the shape of the data has to conform to the constraints of at least one of the unioned types.isCute: false,
but Winston IS cute :((lol just being silly. Thank you for the further clarification/doc resrouce)
thank you for explaining along with code snippets.....appreciate it!!
The & will merge the types, so all the properties of both types will be in the resulting type.
The | will give you the option to choose between all the given types, and use one of them, rather than all together :)
As a developer new to Typescript I struggle to see where I would need "type" really? 🤔
I am sure there are edge cases, but for now I just rely on "interface" .
Typically one is more comfortable with
interface
if one's zone of familiarity is in terms of class-oriented object orientation, i.e. one predominantly thinks of objects in terms of "instances of a class".type
is more useful when you are typing "general data". Types aren't limited to "objects as structured data" but also include literal types. Thetype
syntax also has a lot of features to pull information from JavaScript's value space into TypeScript's type space.Above
transform
andconvert
exist in JavaScript's value space whileTransform
,Key
andValue
exist in TypeScripts's type space.One of the more interesting types are discriminated unions:
So from that perspective
type
is my default - unless for some reason I'm working with classes theninterface
is a better fit.Wow appreciate your feedback. But, I think must of the stuff you described here is a bit beond my current skill level. I use typescript with React for now, and I have to admit I feel unsure why your above example wouldn't have worked equally well with "interface" instead of "types" 🤔
Actually it's easier to explore when to use
interface
instead oftype
:interface
declarations merge,type
aliases do not. So if it is necessary to declare an interface in bits-and-piecesinterface
is the only choice especially when monkey patching an existingclass
(which really should be avoided for built-in and even third party classes). Withtype
each piece needs to be a separate type which are then combined by intersecting them.By convention use
interface
nottype
when the declaration is going to be implemented by aclass
:While syntactically correct
a
class
should implement aninterface
, not atype
:Everywhere else use
type
to get full access to TypeScript's typing features.So for object types that are not class-based it makes sense to use
type
.Derived object types become
type
aliases, notinterface
s:type
supports Mapped Types and Generics:Most of the Utility Types are defined via
type
aliases.Because of the versatility of
type
aliases open source projects like comlink use them heavily - so being able to decipher type aliases can be helpful to understand the type constraints.By limiting yourself to
interface
you aren't leveraging TypeScript's features as much as you could.People usually get into
type
aliases once they realize how useful sum types (Union types) really are.Another nifty thing one can do with
type
:In TypeScript's type context
Email
is structurally different fromstring
- even though in JavaScript's value context it simply is astring
.This can help prevent a regular
string
from being assigned toEmail
without being validated (though a type assertion can force it) - without having to resort to a holder object:So types go beyond classes and interfaces. If you're not using
type
what are you using TypeScript for?Interface better