Typescript와 함께 제공되는 기능

사진 제공: Joan Gamell on Unsplash

Javascript와 Typescript의 상위 집합에 대해 정의하거나 기능을 선언하는 다른 형식이 존재하며, 다른 형식은 없으며, 다른 형식은 동일하지 않은 개체와 동일하지 않습니다.

Artículo Relacionado
¿Qué es Typescript?

En este breve tutorial encontrarás una lista de las formas más comunes que encontrarás a la hora de definir/declarar una función en Typescript.

Primero, para crear una función en Javascript existen 4 형식 기반:

기능 선언

function multiplicar(a,b) {
    return a * b
}

익명 표현

const multiplicar = function(a,b) {
    return a * b;
}

Expresion de función con nombre

const multiplicar = function multiplicar(a,b) {
    return a * b;
}

플레차 기능 / 화살표 기능

const multiplicar = (a, b) => {
    return a * b;
}

함축적 의미

const multiplicar = (a, b) => a * b;

Artículo Relacionado
Escribe Javascript Moderno con Arrow Functions en Escuela Frontend

El objetivo de agregar Typescript al stack es definir los tipos tanto de los argumentos de la función, como del valor de retorno (aunque este muchas veces puede ser inferido).

Comencemos por agregar tipos a los métodos mencionados

기능 선언

// Tipo de Retorno inferido
function multiplicar(a: number,b: number) {
    return a * b
}

// Tipo de Retorno definido
function multiplicar(a: number,b: number): number {
    return a * b
}

익명 표현

const multiplicar = function(a: number,b: number): number {
    return a * b;
}

Expresion de función con nombre

const multiplicar = function multiplicar(a: number,b: number): number {
    return a * b;
}

플레차 기능 / 화살표 기능

const multiplicar = (a: number, b: number): number => {
    return a * b;
}

함축적 의미

const multiplicar = (a:number, b: number): number => a * b;

También es posible extraer la definición de los tipos e incluirlos en una sección diferente que la propia función.

const multiplicar: (a:number, b: number): number  = (a,b)=> a * b;

En este ejemplo el tipo de la función es definido antes de la declaración de la misma.

También es posible extraer el tipo de la función para mejorar legibilidad o incluso para utilizarlo en otro lugar.

type MulFn = (a:number, b: number) => number
const multiplicar: MulFn  = (a,b)=> a * b;

Esto también puede ser logrado utilizando la sintaxis de objeto

type MulFn = {
    (a:number, b: number): number
}
const multiplicar: MulFn  = (a,b)=> a * b;

O también utilizando una interfaz

interface MulFn {
    (a:number, b: number): number
}
const multiplicar: MulFn  = (a,b)=> a * b;

Parametro opciones y parametros por Defecto

Una caracterítica interesante y muy útil al definir los tipos de tus funciones es la posibilidad declarar que parametros son opcionales.

const multiplicar: (a:number, b?: number): number  = (a,b)=> a * (b ?? 1);

Este ejemplo permite que el parametrob no se utilice o seaundefined

Importante! El orden en que definies los parámetros opcionales es importante ya que al definir un parámetro opcional todos los parámetros siguientes deberán ser opcionales también.

Otra forma de crear opcionalidad de parametros es definir su valor por deferto. Typescript tratará dicho parametro como un parametro opcional

const multiplicar: (a:number, b: number) => number  = (a,b = 1)=> a * b;
multiplicar(2) // = 2 
multiplicar(2, undefined) // 2

Esto implica que puedes "imitar"la opcionalidad de paraámetros sin importar el orde, por ejemplo haciendo que el primer parámetro sea "opcional".

const multiplicar: (a:number, b: number) => number  = (a = 1,b)=> a * b;
multiplicar(undefined,2) // = 2 

비동기

Las funciones asíncronas en Typescript funcionan de la misma forma que en Javascript, solo que el tipo de retorno es en efecto una Promise genérica.

async function somePromise(a: number, b: string): Promise<number> {
    // logic
}

const somePromise = (a: number, b: string): Promise<number> => {
    // logic
}

제네릭

Generics es en mi opinión una de las herramientas más poderosas de Typescript ya que permite total flexibilidad en la forma en que define tus tipos, en el caso de declarar funciones lo puedes hacer de la siguiente forma

function someFunction<GenericType>(a: GenericType): Array<GenericType> {
    // some logic
}

En este ejemplo la función toma un parametro tipo GenericType y retorna un arreglo del mismo tipo, ¿cómo se usa?

someFunction<number>(10) // [10]

Esto también se puede lograr con arrow functions pero, existe un problema: Si estás trabajando con React (o cualquier framework que acepte algo similar a JSX) el compilador de Typescript no sabrá si estás usando JSX o un Generic , por lo que necesitas agregar algo que le permita identificar que se trata de un genérico

const someFunction  = <GenericType extends unknown>(a: GenericType): Array<GenericType> => {
    //some logic
}

결론

Existen varias formas de definir funciones, he dejado muchas afuera pero creo que estas son las formas más generales.
알구나스 퀘 노 한 시도 메시오나다스:

타입 가드

어설션

제너레이터

함수 오버로드

모듈

수업

✉️ Únete a Micro-bytes 🐦 Sígueme en ❤️ Apoya mi trabajo