No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Funciones

26/42
Recursos

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

Aportes 64

Preguntas 10

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Reg铆strate o inicia sesi贸n para participar.

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 鈥渏ugar鈥 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 鈥渁ny鈥 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 鈥淟贸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 鈥淭ypeScript鈥 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 鈥渦yyyy 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 鈥渦ndefined鈥 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 鈥渦ndefined鈥

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.