Funciones

Apuntes de la clase:

TypeScript: funciones y métodos

TypeScript aporta varias características que JavaScript no dispone hasta el momento cuando tenemos que plantear funciones y métodos.

Parámetros tipados y funciones que retornan un valor.

Podemos indicar a cada parámetro el tipo de dato que puede recibir y también el tipo de dato que retorna la función o método en caso que estemos en una clase:

	function sumar(valor1:number, valor2:number): number {
	  return valor1+valor2;
	}

	console.log(sumar(10, 5));

La función sumar recibe dos parámetros de tipo number y retorna un valor de tipo number. Luego si llamamos a esta función enviando un valor distinto a number el compilador nos avisará del error:

	console.log(sumar('juan', 'carlos'));

Se genera un error: "Argument of type '"juan"' is not assignable to parameter of type 'number'.

Inclusive editores de texto moderno como Visual Studio Code pueden antes de compilarse avisar del error.

El tipado estático favorece a identificar este tipo de errores antes de ejecutar la aplicación. Lo mismo cuando una función retorna un dato debemos indicar al final de la misma dicho tipo:

	function sumar(valor1:number, valor2:number): number {}

La función sumar retorna un valor de tipo number.

Luego si la función retorna un tipo distinto a number se genera un error:

	function sumar(valor1:number, valor2:number): number {
	  return 'Hola mundo';
	}

Como estamos retornando un string se genera el error: Type '"Hola mundo"' is not assignable to type 'number'.

Parámetros opcionales y predeterminados

En TypeScript, se supone que cada parámetro es requerido por la función. Esto no significa que no se pueda dar nullo undefined, sino que, cuando se llama a la función, el compilador verificará que el usuario haya proporcionado un valor para cada parámetro. El compilador también supone que estos parámetros son los únicos parámetros que se pasarán a la función. En resumen, el número de argumentos dados a una función tiene que coincidir con el número de parámetros que la función espera.

function buildName(firstName: string, lastName: string) {
    return firstName + " " + lastName;
}

let result1 = buildName("Bob");                  // error, too few parameters
let result2 = buildName("Bob", "Adams", "Sr.");  // error, too many parameters
let result3 = buildName("Bob", "Adams");         // ah, just right

En JavaScript, cada parámetro es opcional, y los usuarios pueden dejarlos como mejor les parezca. Cuando lo hacen, su valor es undefined. Podemos obtener esta funcionalidad en TypeScript agregando un ?al final de los parámetros que queremos que sean opcionales. Por ejemplo, supongamos que queremos que el parámetro de apellido anterior sea opcional:

function buildName(firstName: string, lastName?: string) {
    if (lastName)
        return firstName + " " + lastName;
    else
        return firstName;
}

let result1 = buildName("Bob");                  // works correctly now
let result2 = buildName("Bob", "Adams", "Sr.");  // error, too many parameters
let result3 = buildName("Bob", "Adams");         // ah, just right

Cualquier parámetro opcional debe seguir los parámetros requeridos. Si quisiéramos hacer que el primer nombre fuera opcional, en lugar del apellido, tendríamos que cambiar el orden de los parámetros en la función, colocando el primer nombre en la lista.

En TypeScript, también podemos establecer un valor que se asignará a un parámetro si el usuario no proporciona uno, o si el usuario pasa undefineden su lugar. Estos se denominan parámetros inicializados por defecto. Tomemos el ejemplo anterior y establezcamos el apellido por defecto "Smith".

function buildName(firstName: string, lastName = "Smith") {
    return firstName + " " + lastName;
}

let result1 = buildName("Bob");                  // works correctly now, returns "Bob Smith"
let result2 = buildName("Bob", undefined);       // still works, also returns "Bob Smith"
let result3 = buildName("Bob", "Adams", "Sr.");  // error, too many parameters
let result4 = buildName("Bob", "Adams");         // ah, just right

Los parámetros inicializados por defecto que vienen después de que todos los parámetros requeridos se tratan como opcionales, y al igual que los parámetros opcionales, se pueden omitir al llamar a su función respectiva. Esto significa que los parámetros opcionales y los parámetros predeterminados finales compartirán elementos comunes en sus tipos, por lo que ambos

function buildName(firstName: string, lastName?: string) {
    // ...
}

y

function buildName(firstName: string, lastName = "Smith") {
    // ...
}

compartir el mismo tipo (firstName: string, lastName?: string) => string. El valor predeterminado de lastNamedesaparece en el tipo, solo dejando atrás el hecho de que el parámetro es opcional.

A diferencia de los parámetros opcionales simples, los parámetros inicializados por defecto no necesitan ocurrir después de los parámetros requeridos. Si un parámetro inicializado predeterminado viene antes que un parámetro requerido, los usuarios deben pasar explícitamente undefinedpara obtener el valor inicializado predeterminado. Por ejemplo, podríamos escribir nuestro último ejemplo con solo un inicializador predeterminado en firstName:

function buildName(firstName = "Will", lastName: string) {
    return firstName + " " + lastName;
}

let result1 = buildName("Bob");                  // error, too few parameters
let result2 = buildName("Bob", "Adams", "Sr.");  // error, too many parameters
let result3 = buildName("Bob", "Adams");         // okay and returns "Bob Adams"
let result4 = buildName(undefined, "Adams");     // okay and returns "Will Adams"

Parece que TypeScript si se toma la proteina después de entrenar.

TypeScript es genial!

Un pequeño detalle para las funciones que regresan funciones, esta sería la forma correcta de tipar el parámetro de la segunda función:

function createAdder(a: number): (b: number) => number {
  return function(b): number {
    return a + b
  }
}

const addFour = createAdder(4)
const fourPlus6 = addFour(6)

un buen lugar para probar y “jugar” con typescript es el playground del sitio de typescript
https://www.typescriptlang.org/play/index.html

Otra forma de declarar funciones que retornan funciones

let myAdd:(a: number, b: number) => number =
  function(x: number, y:number): number {return x + y}

Traduccion de lo de alli arriba:

• myAdd es una funcion anonima que recibe dos numeros y retorna un numeros

  let myAdd	<- Javascript
  let myAdd: let myAdd:(a: number, b: number) => number  <- Typescript
  

• Y es igual a la funcion anonima que recibe dos numeros y retorna un numero

  = function(x,y) {return x+y}  <- Javascript
  = function(x: number, y:number): number {return x + y}  <- Typescript
  

Tambien se puede escribir asi:

let sumita:(a: number, b: number) => number = (x: number, y:number): number => x + y;

Genial! Si he visto que a veces cuando usaba algunas librerías me decían qué tipo de dato se recibía, y me preguntaba como hacían eso porque con JS VScode te pone por defecto “any” siempre, y pensé que se hacía poniendo comentarios xD Ahora veo que TypeScript es el culpable de eso! jaja

Funciones

// Funcion
function add (a:number, b:number): number {
    return a + b
}

const sum = add(5, 8)

function createAdder(a: number): (number) => number {
    return (b: number) => b + a
}

const addFour = createAdder(4)
const fourPlus6 = addFour(6)

Si queremos que un parámetro sea opcional hay que ponerle un ? antes.

function fullName(firstName: string, lastName?: string): string {
    return `${firstName} ${lastName}`
}

const PERSON = fullName('José')

Para creador un valor por default, lo hacemos así:

function fullName(firstName: string, lastName: string = 'Perez'): string {
    return `${firstName} ${lastName}`
}

const PERSON = fullName('José')

Visual Studio Code nos ayuda tanto que incluso usando vanilla JS, de acuerdo como declaremos nuestras funciones, infiere los tipos y nos lo indica.

En TS podemos ser explicitos en cuanto los argumentos de las funciones. Esto lo hacemso como

function add(a:number, b:number){
	return a+b
}

TS ya sabe con eso que valor vamos a retornar por los tipos de datos que utilizamos pero si queremos ser explicitos podemos utilizar:

function add(a:number, b:number): number{
	return a+b
}

VSCODE nos ayuda a saber los tipos de valores utilizados como parametros.

En el caso de las funciones que regresaremos mas funciones, estas se usarian:

function createAdder(a:number) (number) => number {
	return function(b:number){
			return b+a;
	};
}

Lo primero representa el valor utilizado y el valor que regresa.

Cuando no queremos que un parametro sea obligatorio y permitir que sea UNDEFINED podemos usar:

function fullName(nombre:string, apellido?: string): string {
	return `${nombre} ${apellido}`;
}

De esta forma el ? nos ayuda a que no nos obligue a usar ese valor. Otra forma es utilizar un valor por defecto enel caso de que no pongamos uno, esto es:

function fullName(nombre:string, apellido: string = "Sanchez"): string {
	return `${nombre} ${apellido}`;
}

Progrmacion en pareja xD

Excelente, soy muy novato pero se me hace hasta más “Lógico” y entendible en código usando TypeScript

typescript se me hace increíblemente cómodo a la hora de especificar el tipo de mis variables y valores 😃

Definitivamente es mas legible que java

El profe borró el index.ts, si lo borraste por seguir al profe, te lo dejo como una nota para que lo guardes si quieres recordar las bases de TypeScript

//boolean
let muted: boolean = true;
muted = false;


//numbrtos
let age = "10"
let numerador: number = 42;
let denominador: number = parseInt(age);
let resultaddo = numerador / denominador;

//string
let nombre: string = "Luis";
let saludo = `Mi nombre es ${nombre}`;

//Arreglos
let people: string[] = [];
people = ["Luis", "Raquel", "Michelle"];
// people.push("167")
let peopleAndNumbers: Array<string | number > =[]

peopleAndNumbers.push("Alejandra", 10)
console.log(peopleAndNumbers)

//EnuM
enum Color {
    Rojo = "Rojo",
    Verde = "Verde",
    Azul = "Azul"
}

let favColor: Color = Color.Rojo
console.log(`Mi color fav es ${favColor}`)

//Any
let comodin: any = "Joker"
comodin = {type: "Carta chida"}

//object
let someObject: Object = {};
someObject = {clave: "valor"}
console.log(someObject)

Otra manera de manejar un solo valor es dentro de la función, tomando el ejemplo de la clase puedo hacer una variable con un condicional que tomará un valor dependiendo si se le pasaron uno o dos argumentos, de esa manera no tendremos que preocuparnos por el undefined:

function fullName(firstName: string, lastName?: string): string {
    const fullname = lastName ? `${firstName} ${lastName}` : firstName
    return  fullname
}

const anfer = fullName("Anfer")
console.log(anfer)

Sinceramente he aprendido a amar javascript con typescript. nunca conoci typescript hasta ahora y cuando escribo typescript me recuerda cositas de Java (lenguaje que amo) con lo cual porque escribir JavaScript cuando puedes usar TypeScript jajajaja

Que genial, esto ahorra la sobrecarga de métodos, es una de las pocas cosas que no me gusta en Java

Siempre escuchaba “TypeScript” y no tenia bien en claro a que hacían referencia. Me quedo super claro y en principio, luce super útil. A seguir aprendiéndolo!

typescript es genia …

Interesante lo que podemos hacer con TyperScript

Gran aportación lo de las funciones que regresan funciones. Tenía esa duda de cómo implementar patrones de programación funcional con Typescript.

‘?’ funciona como en REGEX cuando hay uno o ninguno.

pueden profundizar un poco con este curso https://platzi.com/clases/typescript/

Siento que es añadirle un poco de c++ a javaScript. para evitar errores lógicos.

    /* Funcion Básica */
    function add(a: number, b: number): number {
        return a + b;
    }
    const sum = add(4, 6);


    /* Funcion que llama a otra función */
    function CreateAdder(a: number): (number) => number {
        return function (b: number) {
            return a + b;
        }
    }

    const addFour = CreateAdder(4);
    const fourPlus6 = addFour(6);



    /* Funcion con parámetros opcionales */
    function fullName(firstName: string, lastName?: string): string {
        return `${firstName} ${lastName}`;
    }

    const luis = fullName('Luis');


    /* Funcion con parámetros inicializados */
    function fullNameInitLastname(firstName: string, lastName: string = "Apellido"): string {
        return `${firstName} ${lastName}`;
    }

    const luis2 = fullNameInitLastname('Luis');

Excelente clase, muy buen explicación!!!

Ame el “uyyyy ahí tienes un error” jajajaja gracias Richard.

Resumen de la clase:

TypeScript es como tu pareja, pero una pareja que está constantemente revisando tu trabajo para que no cometas errores.

En el tipado de funciones provee el tipado para variables, retorno de las mismas, valores undefined si deseas y también valores por omisión en caso de…
Pero más allá de hacer este ejercicio es entender que la labor de type una función puede ahorrarte tiempo ahorrando errores ya que el editor de código va guiándote.

Código de la clase:

// funciones
function add(a:number, b:number) : number {
    return a + b;
}

const sum = add(4,6);

// funcion que retona funcion

function createAdder(a:number): (number)=>number{
    return function(b:number){
        return b + a;
    }
}

const addFour = createAdder(4);
const fourPlus6 = addFour(6);

console.log('fourPlus6 ', fourPlus6);

//parametros opcionales
function fullName(firstName:string, lastName:string = "Smith"):string{
    return `${firstName} ${lastName}`;
}

const max = fullName('Agente');

console.info('max: ', max);

muy buena ayuda TS

Genial !

Bendito seas Anders Hejlsberg, primero C# y ahora TypeScript ❤️

si type script , tiene poderes jajajajajaja 😄

TypeScript se puede decir que es un JS con super poderes?

Typescript me recuerda mucho a Java.

function add(a: number, b: number):number {
    return a + b
}

const sum = add(2,3)

function createAdder(a: number): (number) => number {
    return function (b: number) {
        return b + a
    }
}

const addFour = createAdder(4)
const fourPlus6 = addFour(6)

function fullName(firstName: String, lastName?: String): String {
    return `${firstName} ${lastName}`
}

const jose = fullName('José','Puicón')

console.log(jose);

En Typescript podemos ser explícitos con el tipo de los argumentos y el tipo de retorno de una función.

TyperScript es genial

Mira ese potencial

**Programacion pareja ** aajajajajajja excelente final

typescript, es muy parecido a kotlin

Creo que typescript es todo lo que le faltaba a JS para que me encante aún más.

super gracias 😃

me gusto la explicación

lo hace prototipar como los lenguajes orientados a objetos como C# o java

Jajaja programación en pareja… ahi tienes un error

Wow, esto mejora mucho el lenguaje

Muy bien

Excelente.

Me encanto esta clase 😃 Typescript me esta parece genial

Por alguna razon en la funcion de Full Name me dice que no puedo usar question mark e inicializar a la vez

super el uso de TypeScript

Luce bien Typescript, pero creo que las últimas versiones de js piensan agregarle tipado entonces ts quedaría en el olvido, sobre todo porque no es un estándar y los navegadores no lo reconocen

Genial siempre mejora la calidad del código porque evita muchos errores ademas que ofrece mucha ayuda cuando se usan funciones ya que avisa de errores básicos antes de correr la aplicacion

TypeScript rocks!!!

Cada vez mas interesante. Gracias!!

Excelente clase y ejemplos

Muy bueno!

Dos cosas que me he dado cuenta y que el profesor no ha explicado bien:

1.- Cuando especificamos la forma y el tipo que va a devolver una función entren paréntesis también hay que ponerle el nombre del argumento y no solo el tipo.

function createAdder(a: number): (b: number) => number {
  return function (b: number): number {
    return b + a;
  };
}

Justamente en el ejemplo dado pondriamos (b: number) => number para ser más precisos

2.- El último ejemplo donde ponemos una variable “undefined” y después por defecto le ponemos un valor si no se pasa como argumento, pues bien las dos cosas a la vez no se deben hacer ya que si te paras a pensarlo no tiene sentido.

O le ponemos el caracter ? para indicar que es “undefined”

function fullName(firstName: string, lastName?: string): string {
  return `${firstName} ${lastName}`;
}

O le ponemos un valor por defecto si el usuario no le pasa el 2º arg.

function fullName(firstName: string, lastName: string = `Ramirez`): string {
  return `${firstName} ${lastName}`;
}

Por acá comparto mi código:

// Command:  npx ts-node -T ts/functions.ts

// Function with specific type params and return
function add(n1: number, n2: number): number {
  return n1 + n2;
}
const sum = add(3, 5);
console.log('add', sum);

// Function of functions
function createAdds(n1: number): (param: number) => number {
  return function (n2: number) {
    return n1 + n2;
  }
}
const addFour = createAdds(4);
const sum2 = addFour(6);
console.log('createAdds', sum2);

// Optional params
function fullName(firstname: string = 'John', lastname: string = 'Doe', age?: number): string {
  return `${firstname} ${lastname}, ${age} years old`;
}
const cosme = fullName('Cosme', 'Fulanito', 35);
console.log(cosme);
let person = fullName();
console.log(person);
person = fullName('Arisa', undefined, 34);
console.log(person);

// Function return void
function hi(name: string): void {
  console.log(`Hi my name is ${name}`);
}
hi('Peter');

el tipado es el punto fuerte de typscript, a darle con javascript en futuros proyectos.

Excelente clase de funciones sobre TypeScripts.
Aporta varias características que JavaScript no dispone hasta el momento cuando tenemos que plantear funciones y métodos. Parámetros tipados y funciones que retornan un valor.