Conceptos básicos de TypeScript para usar Angular
Contenido del curso
Comunicación de datos
Estructuras de control
Estilos
Deploy
Despedida
Conceptos básicos de TypeScript para usar Angular
Conceptos básicos de TypeScript para usar Angular
Contenido del curso
Otro truco para las funciones en typescript es que pueden especificar que tipo de dato van a devolver de manera explicita despues de los parametros y antes de las flechas de la arrow function
const suma = ( a : number , b: number):number => a + b const saludar = (nombre: string , edad: number ):string => `Hola me llamo ${nombre} y tengo ${edad} años`
gracias por el dato, creo que deberia de ir a ver el curso de typerscript antes jaja me lo deje a la mitad hace mucho
Se parece a go
Si tienes variables que vas a inicializar en el constructor y son publicas, puedes usar la abreviatura .
constructor ( public age: number, public lastName: string){}
Recuerden esta simple linea de código, puede ahorrar inicializar objetos gigantes en vacío.
Bellisimo
//Variables en TS const username: string | number = "Jenoz"; //funcion flecha const suma = (a: number, b:number)=>{ return a + b; } //funcion flecha, llamado suma(1, 2); //Inicialización de clase class Person { //encapsulamiento //private age:number; //lastName:string; //constructor //si pongo el alcance como parametro, la variable se crea y se autoasigna con el parametro constructor( private age:number,public lastName:string){} setage (age:number){ this.age = age; } } //Instanciación const nico = new Person(12,"Martinez"); nico.setage(22); /*a las funciones tambien se les puede asignar el valor que devolverán desde ellas mismas, poniendo el tipo de devolucion luego de los parámetros*/ const suma2 = ( a : number , b: number):number => a + b const saludar = (nombre: string , edad: number ):string => `Hola me llamo ${nombre} y tengo ${edad} años`
imposible :o
Hasta este punto voy bien, he comprendido la clase, las configuraciones, inicializaciones. Gracias Nico 💯 ✔️ Para los que no pueden abrir code desde la terminal primero ejecutar:
> sudo apt-get purge code //Para abrir code . > code . //Abre el VSC ☑️ #NuncaParesDeAprender💚 🚀
Es el profesor cuyas explicaciones me hacen sentir mas comodo
A algunos si nos cuesta un poco mas.. pero le vamos a hacer hasta que la logremos!!
++CONCEPTOS BASICOS DE TYPESCRIPT PARA USAR ANGULAR++
El tipado nos ayuda a eliminar ese porcentaje de errores que nosotros como desarrolladores ignoramos por el tipado. Esta comprobado que definir un tipo de dato ayuda a eliminar hasta en un 60% de errores en nuesrto codigo.
++Variables en typescript:++
Las variables en typescript las definimos de la siguiente forma:
const username1 = 'gepinilladev' // Sin tipado const username2: string = 'gepinilladev' // Con tipado const username3: string | number = 'gepinilladev' // Con tipado multiple
Typescript nos permite definir el tipo de dato de nuestras variables, los cual nos ayuda a reducir hasta en un 60% los errores que podemos producir nosotros como desarrolladores. Definir el tipo de dato es importante ya que nos ayuda a documentar el mucho mas el codigo. Ayuda al lint a informar en tiempo de codificacion los errores de forma adecuada.
En esta funcion fleja podemos detallar como los parametros tambien pueden ser declarados con un tipo de dato.
// Definicion del tipo de dato que deben llevar los parametros obligatoriamente const sum = (a: number, b: number) => { return a + b; } sum(1,3); // Implementacion del metodo
Typescript tambien nos permite usar el paradigma de la programacion orientada a objetos (POO), por lo cual podemos usar clases, metodos, propiedades, etc, tal y como lo usan otros lenguajes de programacion fuertemente tipados como C#, Java, Python entre otros.
class Persona { private age: number; public lastName: string; constructor(age: number, lastName: string){ this.age = age; this.lastName = lastName; } }
Aun asi nos typescript nos permite hacer lo anterior de forma abreviada. De esta forma podemos definir las propiedades de la clase con su visibilidad y su tipo de dato sin tener que asignarlas a la propiedad creada previamente. Ejemplo:
class Persona { constructor(public age: number, public lastName: string){ } }
Isntancia de la clase, similar a otros lenguajes, cuidando el tipo de dato:
const german = new Persona(15, 'Pinilla'); german.age;
No se olviden que una variable puede asumir dos tipos de datos:
const username: string | number = 'Aaron';
dos o más tipos:
const username: string | number | boolean;
Como dice José, pueden ser mas tipos de tipado y es mas recomendable usar esta forma que llenar nuestro código con el tipo "any" que supongo veremos mas adelante.
Conceptos básicos de TypeScript para usar Angular
const username: string = 'mike'; const sum = (a: number, b: number): number => { return a + b; } console.log(sum(4, 8)); class Person { constructor(public age: number, public lastName: string) {} } const mike = new Person(24, 'Reyes'); console.log(mike);
const suma = ( a : number , b: number):number => a + b const saludar = (nombre: string , edad: number ):string => `Hola me llamo ${nombre} y tengo ${edad} años`
a
💙TypeScript Constructor Shorthand
Para poder aplicar este shorthand en una clase es necesario que las variables o propiedades declaradas dentro y fuera del constructor tengan el mismo nombre.
Esta característica o nueva sintaxis que nos proporciona Typescript es exclusiva de Typescript, por ende, si intentamos hacerlo en Vanilla JS veras la consola prendida fuego 🔥, mostrando algún error.
// Longhand class Ninja () { public name: string; public clan: string; private ninjaRank: string; protected kekkeiGenkai: bool; constructor (name: string, clan: string, ninjaRank: string, kekkeiGenkai: bool) { this.name = name; this.clan = clan; this.ninjaRank = ninjaRank; this.kekkeiGenkai = kekkeiGenkai } } // Shorthand class Person () { constructor ( private name: string, public clan: string, private ninjaRank: string, protected kekkeiGenkai: bool ) {} }
Muchas Gracias por el ejemplo!
me quedo con el camino largo por cuestiones mias de clean code, por otro lado, tal vez es cuestion del lenguaje, pero porque uso const para instanciar un obj?
Me tira error al colocar
Person Ejemplo = new Person(30,'Ejemplito');
gracias!
estoy enamorado te TypeScript es muy parecido a java !!!!!!!!!!
Hace rato no programar en java,pero me acuerdo que su curva de aprendizaje era larga,ya que el lenguaje su sintaxis era mas difícil en comparación con Python o JavasCript vanilla.
TypeScript se puede usar también en Vue y Reac?:Gracias por compartir su experiencia.
nico es muy buen profesor!
Llevo trabajando con Angular ya casi 3 meses y no tenía idea de que era por eso que se podían usar las librerías externas si yo simplemente les pasaba la asignación de esa manera en el constructor. Wow!
Del patron orientado a objetos en TypeScript podemos definir los atributos como public ó private
Inicializamos atributos en el constructor
constructor(public age: number,private lastName: string) { }
apoco?
Hola, vengo de Java y me surge una duda: ¿En typescript es recomendable dejar los atributos de una clase como privados y crear un getters y setters para accederlos o simplemente no es necesario en este lenguaje?
A nivel de encapsulamiento me parecería buena práctico, pero como al final TS es JS, no sé si eso aplica en tiempo de ejecución.
Agradeceré los comentarios de alguien que tenga experiencia con TS. :)
esto: "constructor ( public age: number, public lastName: string){}" no es lo mismo que la inyección de dependencias a una clase?
Esto es muy buena pregunta se supone que la inyección de dependencias es dejarle a otra clase la responsabilidad e inyectarla en el constructor. Alguien que me corrija?
no es lo mismo, una cosa es la declaración, que es especificar los parámetros del constructor y en este caso los atributos públicos.
Otra cosa es "instanciar la clase", incluso "resolver las dependencias", si viste en el video, el tuvo que pasar los valores de los parámetros del constructor. Es decir, el tuvo el control de hacer new Persona, y de asignar 15 años de edad.
Cuando te refieres inyección de dependencias se parece un poco, pero por lo general tu no resuelves las dependencias ni llamas el constructor directamente, es el framework de desarrollo el que se encarga de resolver éstas dependencias y pasarlas al objeto que se está creando.
Aqui hay una descripcion un poco resumida de la clase de hoy.
"se llama como proteger las variables" , explica un poco mejor porfa esto y muchas otras cosas las estas esplicando bastate mal. perdon que te lo diga pero le falta bastate energia . se llama encapsulamiento lo que queres decir.
vamos a ver si mejoras en los proximos 16 videos que faltan
mmmm puede ser pero... No se supone que uno ya debe tener conocimientos básicos en POO y programacion básica?
Para los que vean esto, el profesor mencionó que en typescript se usan en varias ocaciones clases, por lo que deberian tomar el curso de POO aqui en platzi.
Como dijo el dermatólogo.... al grano.
Excelente explicación. Muy claro.
Buenas tardes, re coloco mi email para reenviar confirmación pero no llega el correo
Hola Miguel Ángel 👋
El Team Platzi ya está trabajando para resolver este detalle. ¿Por favor puedes revisar en un rato y avisarnos por aquí si aún NO puedes acceder?
Gracias por tu comprensión 😄
Buenas tardes, re coloco mi email para reenviar confirmación pero no llega el correo