Conceptos básicos de TypeScript para usar Angular

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`

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.

//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`

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💚 🚀

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’;

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`

💙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
	) {}
}

estoy enamorado te TypeScript es muy parecido a java !!!

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) { }

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

Como dijo el dermatólogo… al grano.

Excelente explicación. Muy claro.

✅

Te recomiendo que hagas los cursos de typescript y programación orientada a objetos con javascript, pero te recomiendo más el curso de Typescript POO. De esta manera no tendrás ningún problema más adelanta, además aprenderás cosas nuevas 🙂💚

Conceptos basicos de TS

• Typescript puede inferir tipos, pero no es una buena practica al final del día, lo que buscamos es que podamos asignar tipos a nuestras variables
• Para asignar tipos se puede realizar de la siguiente manera:

const number1: number = 1 ;
const number2: number = 2; 
const Myname: string = "Alejandro";

TS y POO

• TS también usa POO (Programación Orientada a Objetos)
• En el siguiente ejemplo se puede ver como inicializamos un objeto por medio de un constructor
  • Podemos inicializarlo de una manera mas fácil directamente desde este mismo

const number1: number = 1 ;
const number2: number = 2; 
const Myname: string = "Alejandro";

class miPersona { 
    constructor(public number1:number, public number2:number,public Myname:string ){
        console.log(Myname +  number1 + number2)
    }
}

const nico: miPersona = new miPersona(number1,number2,Myname);

// Salida 
// Alejandro 3

Corríjanme si me equivoco, en mi poca experiencia con Typescript he notado que en la inicialización de variables con el tipado para evitar requerir todos los parámetros desde el constructor(), puedes asignar establecer tu variable como pendiente de la siguiente forma

Class Person {
	age!;	number;
}

añadiendo el signo “!”, Typescript entiende que de momento será establecido un valor null hasta su asignación.

los constructores ayudan mucho cuando se define una variable por fuera de la clase, para tener en cuenta y que se puede invocar sin ningun inconveniente

sin ser clase de programacion en ts, es una de las mejores clases que he visto

No me gusta como explica y habla este profesor. pareciera que tuviera algo en la boca.

Guia de estilos de TypeScript:

Es una buena práctica empezar aprendiendo TypeScript siguiendo las convenciones del lenguaje.

Google TypeScript Style Guide

Muy bien explicado!

Primer profe de entre React vs Angular que le entiendo por su dinamica y forma de explicar,

El intellisense del IDE (vscode) me tiro otras recomendaciones que probe y funcionaron. Una es en la definicion del constructor para pasar un json (bajo la leyenda convert parameters to destructured object):

constructor({ age, lastname }: { age: number; lastname: string; })

y la otra es poner guion bajo en los nombres de los parametros.

en JS también puedes declarar las variables asi :
const userName = String (Juan);

//Crear variable y determinar su tipo
const username: string = “Joaquin”;

//Crear tipo funcion
const sum = (a:number,b:number) =>{return a+b;}
//Usar funsion
sum(1,3);

//Crear clase objeto con su constructor
class Person{
age: number;
lastName: string;

constructor(ager:number , lastName:string)
{
this.age = ager;
this.lastName = lastName;
}

}
//Utilzar clase objeto
const nuco = new Person(12,“Mardones”);
nuco.age;

//Crear objeto clase mas resumido
class PersonResumido{
constructor(public age:number , public name:string){}
}
const person2 = new PersonResumido(1,“nombre”);