Sintaxis de una funcion en Typescript

Fecha de Publicación: 06 - 11 - 2023

Como escribir una función en typescript es una pregunta común para aquellos que están aprendiendo este lenguaje de programación.

Si vienes del mundo de Javascript te recomiendo que le eches una ojeada a este artículo: las funciones de JavaScript ya que en estructura son muy parecidos.

Un ejemplo de una función en TS sería algo como esto:

function nombreDeLaFuncion(parametro){
  //Lógica de la función
}

¿Pero cuál es la diferencia con una función de Javascript? 🤔

TypeScript infiere el tipo de dato que le pasas a los parámetros como any.

¿No sabes qué es un tipo de dato inferido?

Acá abajo te le explico en otro artículo 👇🏻

Pero si te da flojera ir a leer te le explico brevemente.

Los tipo "any" son aquellos que aceptan cualquier valor o dato. No es muy recomendable usarlos ya que se come con papas cualquier cosa que le pases y puede generar errores.

Si no entendiste anda al artículo que dejé arriba que ahí explico con más detalle.

📢 PARA TOMAR EN CUENTA: TypeScript es capaz de compilar código que posean "errores" de tipado pero en tiempo de ejecución advierte al desarrollador que la práctica que está haciendo no es la recomendada. Lo cual hace que la experiencia en la construcción de proyectos sea mas comoda.

¿Cómo tipar los parametros de una funcion de TypeScript?

¡Es bastante simple!

Los parámetros de una función son variables que vas a manejar dentro del flujo de este.

Y se pueden tipar como tal.

function nombreDeLaFuncion(parametro: string){
  //Lógica de la función
}

Resolviendo la duda de los retornos de una funcion en TypeScript

Por defecto el retorno de una función es undefined.

A no ser que en realidad quieras retornar algo.

Ahí es donde explícitamente con TypeScript puedes indicar que quieres que devuelva una función.

function nombreDeLaFuncion(parametro: string): string { //👈🏻 El tipo de dato que va a retornar 
  return parametro 
}

Ejemplos de una función con parámetros opcionales o parámetros por defecto

La sintaxis de un parametro opcional es la misma que cuando usamos interfaces (chequea el link)

Los parametros opcionales permiten no pasar algun argumento que no sea necesario para que la función haga su trabajo.

Los parametros por defecto son valores predeterminados que podrian ser cambiados o no.

// Función con parámetros opcionales 
function jutsu (estilo?: string, nombre: string): string {
  return estilo ? `Estilo de ${estilo}, ${nombre}` : `${nombre}`
}

// Función con parámetros por defecto 
function amaterasu (mangekyoSharingan = true, estilo: string, nombre: string): string {
  return "Overkill"
}

Como escribir funciones de flecha (arrow functions) en TypeScript

La sintaxis de una función de flecha es la misma que como lo vemos en JavaScript

//Sintaxis de una arrow function en TS

const jutsu = (nombre) => {
  return `${nombre}
}

Y la forma de tipar sus parametros y retornos es la siguiente:

//Funcion de flecha tipada

const jutsu = (nombre: string): string => {
  return `${nombre}
}

//Ejemplo con parametros opcionales

const jutsu = (estilo?: string, nombre: string): string => {
  return estilo ? `Estilo de ${estilo}, ${nombre}` : `${nombre}`
}

// Ejemplo con parametros por defecto 

const amaterasu = (mangekyoSharingan = true, estilo: string, nombre: string): string => {
  return "Overkill"
}

Este artículo apenas es un abrebocas de todas las posibilidades que se pueden hacer con Typescript respecto a las funciones.

La idea es que sea informacion ligera.

Ya sea de repaso o para aprender algo nuevo.

Espero haberte brindado algo de luz en el tema y que sigas mejorando en tu crecimiento como desarrollador.

Si no te gusto por lo corto puedes ir a ChatGPT, Bard o cualquier otra IA o tutorial de YT que mas te guste.

Como diría Jack el Destripador, vamos por partes. 🙂