Mit jelent a „szűkítés” a TS-ben?
Mielőtt megvizsgálnánk a betűtípusok fejlesztését a Typescript 4.5-ös és újabb verzióiban, gyorsan szeretném összefoglalni, mit is jelent ebben az összefüggésben a „szűkítés”. Alapvetően az entitás tulajdonságainak ellenőrzésével szűkítheti le a típust a Typescriptben. Ha az entitáson létezik olyan tulajdonság, amely csak egy bizonyos típushoz érhető el, akkor a Typescript megérti ezt, és ezért tudja biztosítani a megfelelő típusokat.
A következő kódpélda bemutatja, mit értek ezen.
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;
}
}
Szűkítés a sablon karakterlánctípusokhoz
A Typescript 4.5-ös verziójától kezdődően ez a minta alkalmazható sablonliterális típusokhoz is, más néven speciális, backtick-es karakterláncokhoz. A mintaillesztés egyre erőteljesebb a nyelvben.
Természetesen ahhoz, hogy a szűkítés használhatóvá váljon, az összehasonlításban szereplő összes típusnak ugyanazt a tulajdonságkulcsot kell megosztania. Ellenkező esetben egyszerűen használhatja a fenti általános szűkítést.
A következő kódpélda bemutatja, hogyan használhatják a sablonkarakterláncok a szűkítést:
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;
}
}
És most már ismeri a sablonliterálok szűkítését a Typescriptben! Lehet, hogy ez egy olyan funkció, amelyet nem nagyon fog használni, de ha megfelelő, úgy gondolom, hogy jelentősen csökkentheti a kód bonyolultságát, és egy kicsit tisztábban tartja a kódbázist, mint a funkció nélkül.
