¿Qué es "estrechamiento" en TS?
Antes de que echemos un vistazo a la mejora de los tipos literales en TypeScript 4.5 y versiones posteriores, solo quiero recapitular rápidamente lo que realmente significa "Narrowing" en este contexto. Básicamente, puede reducir un tipo en TypeScript al verificar las propiedades de la entidad. Si existe una propiedad en la entidad que solo está disponible para un determinado tipo, Typecript lo comprende y, por lo tanto, puede proporcionar los tipos correctos.
El siguiente ejemplo de código demuestra lo que quiero decir con eso.
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;
}
}
Estrechamiento para tipos de cadenas de plantillas
A partir de la versión 4.5 de Typescript, este patrón también se puede aplicar para tipos de literales de plantilla, también conocidos como cadenas especiales con comillas inversas. La coincidencia de patrones se está volviendo realmente poderosa en el idioma.
Por supuesto, para que el estrechamiento sea utilizable, todos los tipos de la comparación deben compartir la misma clave de propiedad. De lo contrario, puede usar el estrechamiento común como el anterior.
El siguiente ejemplo de código muestra cómo las cadenas de plantillas pueden usar la restricción:
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;
}
}
¡Y ahora sabe cómo reducir los literales de plantilla en Typecript! Esta puede ser una característica que no usará con mucha frecuencia, pero cuando sea apropiado, creo que puede reducir en gran medida la complejidad del código y mantener su base de código un poco más limpia que sin la característica.
