DEV Community

Cristian Fernando
Cristian Fernando

Posted on

2 2

Fundamentos de TypeScript 🦆| #9: Narrowing

Es una técnica que se usa sobre todo en los parámetros de una función. Consiste en que por medio de validaciones podamos modificar el flujo de la función dependiendo si sus parámetros aceptan varios tipos de datos a la vez mediante uniones de tipos.

La forma más común de Narrowing se observa usando el operador typeof y condicionales, de este manera podemos controlar cómo actuará esa función de manera controlada y evitando bugs.

Veamos algunos ejemplos para comprender todo esto.

//creamos una tupla de strings
const choices: [string, string] = ['NO', 'YES'];

const processAnswer = (answer: number | boolean) => {
  if (typeof answer === 'number') {
    console.log(choices[answer]);
  } else if (typeof answer === 'boolean') {
    if (answer) {
      console.log(choices[1]);
    } else {
      console.log(choices[0]);
    }
  }
}
processAnswer(0);       // Prints "NO"
processAnswer(true);    // Prints "YES"
Enter fullscreen mode Exit fullscreen mode

Analicemos la función processAnswer, sólo recibe un parámetro answer que puede ser number o boolean.

  • Si answer es number:
    Accedemos a la tupla choices en la posición que le pasemos, siendo choices[0] = 'NO' y choices[1] = 'SI'; ergo, si llamamos a la función processAnswer(0) obtendremos como salida NO.

  • Si answer es boolean:
    Si answer existe entonces regresamos choices[1], osea SI.
    Si answer no existe entonces regresamos choices[0] osea NO.

¿Bastante fácil verdad?

Veamos otro ejemplo:

function roughAge(age: number | string) {
  if (typeof age === 'number') {
    // In this block, age is known to be a number
    console.log(Math.floor(age));
  } else {
    // In this block, age is known to be a string
    console.log(age.split(".")[0]);
  }
}
roughAge('3.5');  // Prints "3"
roughAge(3.5);    // Prints 3
Enter fullscreen mode Exit fullscreen mode

La función roughAge recibe un solo parámetro age, nuevamente evaluamos que hará:

  • Si age es number redondeamos el valor hacia abajo con Math.floor(), por ello llamar roughAge(3.5) regresa el número 3.

  • Si age es string usamos el método split de las cadenas y obtenemos la primera posición de dicha cadena. Por ello si llamamos roughAge('3.5') obtenemos '3' como string.

Conclusiones

  • Narrowing es un técnica muy poderosa y sencilla de comprender para que el flujo de las funciones hagan lo que nosotros necesitamos.
  • Usualmente typeof será nuestro mejor aliado al momento de hacer Narrowing.

Referencias

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more