Crea una cuenta o inicia sesi贸n

隆Contin煤a aprendiendo sin ning煤n costo! 脷nete y comienza a potenciar tu carrera

Repaso a TypeScript: tipos y POO

5/23
Recursos

NestJS utiliza TypeScript como lenguaje de programaci贸n y conocer sus caracter铆sticas y qu茅 le adiciona a Javascript te convertir谩 en un profesional m谩s completo de esta tecnolog铆a.

Qu茅 es TypeScript

TypeScript es un lenguaje de programaci贸n mantenido por Microsoft. En otras palabras, es un 鈥渟uperconjunto鈥 de Javascript que le agrega tipado de datos y programaci贸n orientada a objetos.

El c贸digo fuente escrito en TypeScript, se 鈥渢ranspila鈥 a c贸digo Javascript que es el que finalmente entienden los int茅rpretes de Javascript como los navegadores web o NodeJS.

Tipado de Datos con TypeScript

Con Javascript puedes crear una variable del tipo String y posteriormente asignarle un valor del tipo Entero o Boolean. Esto es propenso a tener errores en tiempo de ejecuci贸n.
TypeScript permite tipar los datos para que estos no cambien de tipo.

// Tipado de datos con TypeScript
const text: string;
const num: number;
const bool: boolean:
const arr: Array<number>[];

Safe type

let name: string;
const age = 19;
const suma = (a: number, b:number) => {
   return a + b;
}

Classes

class Person {
   constructor(private age: number, private name: string) {}

   getSummary() {
      return `I'm ${this.name} and I'm ${this.age}`;
   }
}

POO con TypeScript

Javascript permite el desarrollo de aplicaciones utilizando POO basada en Prototipos. Puedes tomar el Curso B谩sico de Programaci贸n Orientada a Objetos con JavaScript para entrar en m谩s detalle.

TypeScript llega para permitir escribir c贸digo utilizando los conceptos de la POO m谩s f谩cilmente con clases, herencia, polimorfismo, etc.

// Programaci贸n Orientada a Objetos con TypeScript
class Alumno {
  private nombre: string;
  private apellido: string;
  
  constructor(nombre: string, apellido: string) {
    this.nombre = nombre;
    this.apellido = apellido;
  }
  
  getNombre() {
    return this.nombre;
  }
  setNombre(nuevoNombre: string) {
    this.nombre = nuevoNombre;
  }
}
const alumno = new Alumno('Freddy', 'Vega');

Estas son las diferencias b谩sicas que tienes que conocer entre Javascript y TypeScript. Si quieres aprender m谩s de esta tecnolog铆a puedes tomar el Curso de Fundamentos de TypeScript.


Contribuci贸n creada por: Kevin Fiorentino.

Aportes 17

Preguntas 3

Ordenar por:

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

Safe type

let name: string;
const age = 19;
const suma = (a: number, b:number) => {
   return a + b;
}

Classes

class Person {
  constructor(private age: number, private name: string) {}
  getSummary() {
     return `I'm ${this.name} and I'm ${this.age}`;
  }
}

Si desean evitarse formatear el c贸digo manualmente, pueden hacer que se autoformatee cada vez que se guarda el archivo, para esto pueden hacer lo siguiente:

  1. Abrir configuraci贸n de VS en JSON
  • F1
  • Preferences: Open Settings (JSON)
  1. A帽adir la siguiente l铆nea, puede ser al final
"editor.formatOnSave": true
  1. Adicional, tambi茅n pueden configurar Prettier globalmente para que cuando guarden Prettier tome esa configuraci贸n

Like si los errores que marca prettier te dan ansiedad 鉁

Si quieren tambi茅n pueden usar typescript playground para probar el c贸digo: https://www.typescriptlang.org/play

Por si requieren mas informaci贸n aqu铆 est谩n las notas del Curso de TypeScript en Platzi, las realice en notion

Me encanto esta clase. Muy bueno el curso Nicolas!

Ojitoo鈥 me sorprende la similitud de la estructura con angular
excelente鈥

Buenas aqui mi aporte, en el vscode pueden user la combinacion de telcas shift + ctrol + i para auto-formatear el codigo como est谩 especificado en los archivos de configuracion de ESlint, al ser la primera vez en usar la combinacion de teclsa les preguntar谩 que formater user elijan el ESlint

Hola 馃憢
Para todos aquellos que quieran profundizar en typescript, platzi tiene un curso de fundamentos muy bueno, lo encontrara click 馃憠 typescript.
Espero haberles aportado algo 馃殌

Yo tuve un problema donde eslint me indicaba que no pod铆a leer el archivo tsconfig.json.

Tuve que dirigirme al archivo .eslintrc.js y buscar el apartado de parserOptions y indicarle que lo busque en el directorio de trabajo con tsconfigRootDir: __dirname

parserOptions: {
   project: 'tsconfig.json',
    tsconfigRootDir: __dirname,
    sourceType: 'module',
  }

importante el uso del constructor para la inyecci贸n otras clases.

Hola, Recuerden que el tipado de TypeScript solo es para el desarrollador (T煤) no se debe confiar en los datos que ingresa el cliente porque TypeScript no v谩lida cuando compila, solo es para ayudar durante el desarrollo.

nest viene con prettier pre instalado y configurado con el archivo .prettierrc en este archivo podemos colocar opciones de configuraci贸n para que nuestro c贸digo quede con un buen formato un ejemplo podria ser el siguiente { "singleQuote": true, "trailingComma": "all", "printWidth": 60 } y ademas visual studio code se puede configurar para que aplique el formateo autormaticamente. solo basta con abrir o crear el archivo .vscode/settings.json y colocar estas opciones dentro { "editor.defaultFormatter": "esbenp.prettier-vscode", "prettier.printWidth": 60, "editor.formatOnSave": true, "prettier.requireConfig": true } } Asi cada vez que guardemos el archivo el pluggin prettier dar谩 formato a los archivos

Buen repaso, mi aporte : Revisar informaciont acerca de type e interface ya que se usa mucho en el curso y esto es propio de Typescript

Excelente repaso

Muy bn, muy bn excelente鈥