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 20

Preguntas 4

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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

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.

Me encanto esta clase. Muy bueno el curso Nicolas!

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

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',
  }

si les sigue apareciendo errores: Take a look at your .eslintrc.js file. removing 鈥榩lugin:prettier/recommended鈥 from the extends array should fix the issue. (tomado de stackoverflow)

un tip adicional para el formateo de los archivos

agregamos a nuestro proyecto el paquete husky con este comando

npx husky-init && npm install

esto nos crea un archivo en .husky/pre-commit que inicialmente tiene este contenido

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npm test

ahi podemis editar el comando que muestra y sustituirlo por

npm run format

de esta manera, en el momento que vayamos a hacer el commit al repo, antes de que se haga el commit automaticamente se ejecutar谩 el comando format que viene en el package.json y automaticamente se formatearan todos los archivs

otra cosa adicional es que puedes definir reglas de formateo para el proyecto creando o editando el archivo .prettierrc

yo le he puesto estas reglas que me parecen de lo mejorer para no tener lineas de codigo tan largas y aj ser una configuraci贸n interna en el proyecto si trabajas con otros compa帽eros es bien util porque todos usan el mismo formato al trabajar y evitas problemas con los merges

{
  "singleQuote": true,
  "trailingComma": "all",
  "printWidth": 60
}

Cursos TpeScript

Les comparto algunos recursos, adicional al curso existente de TypeScript Platzi:
.

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

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鈥