Wat is "Vernouing" in TS?
Voordat ons kyk na die verbetering van letterlike tipes in Typescript 4.5 en later, wil ek net vinnig opsom wat "Vernouing" in hierdie konteks eintlik beteken. Basies kan jy 'n tipe in Typescript verklein deur die entiteit se eienskappe na te gaan. As 'n eiendom op die entiteit bestaan wat slegs vir 'n sekere tipe beskikbaar is, dan verstaan Typescript dit en kan dus die korrekte tipes verskaf.
Die volgende kodevoorbeeld demonstreer wat ek daarmee bedoel.
type Addition = {
sum: number;
}
type Subtraction = {
result: number;
}
function calculate(action: Addition | Subtraction) {
if ('sum' in action) {
// Simple example of using properties
// of an entity to narrow down its
// actual type.
//
// 'action' is at this point of type
// 'Addition'. Nice!
const addition = action;
}
}
Vernouing vir sjabloonstringtipes
Begin met Typescript weergawe 4.5, hierdie patroon kan ook toegepas word vir sjabloon letterlike tipes, ook bekend as daardie spesiale stringe met backticks. Die patroonpassing word regtig kragtig in die taal.
Natuurlik, vir vernouing om bruikbaar te word, moet alle tipes in die vergelyking dieselfde eiendomsleutel deel. Andersins kan jy eenvoudig die algemene vernouing soos hierbo gebruik.
Die volgende kodevoorbeeld wys hoe sjabloonstringe Vernouing kan gebruik:
type Addition = {
variant: `${string}-addition`;
sum: number;
}
type Subtraction = {
variant: `${string}-subtraction`;
result: number;
}
function process(action: Addition | Subtraction) {
if (action.variant === "simple-addition") {
// Stupid simple example, but you get the idea:
// We used 'simple-addition', and the pattern
// matching by TS understood that '...-addition'
// can be discriminated to 'Addition'.
const addition = action;
}
}
//
// Example that DOES NOT work.
//
// This demo illustrates that the
// discriminante has to be a string,
// else the pattern matching worn't work.
type Addition = {
variant: `${string}-arithemtic`;
sum: number;
}
type Subtraction = {
variant: `${number}-arithemtic`;
result: number;
}
function process(action: Addition | Subtraction) {
if (action.variant === "123-arithemtic") {
// Still 'Addion | Subtraction',
// as we can only compare against
// a string '123-arithmetic', which
// is of course the same for both.
const addition = action;
}
}
En nou weet jy van die vernouing van sjabloonletters in Typescript! Dit is dalk 'n kenmerk wat jy nie baie gereeld sal gebruik nie, maar wanneer dit gepas is, dink ek dit kan kodekompleksiteit aansienlik verminder en jou kodebasis 'n bietjie skoner hou as sonder die kenmerk.
