Code Monkey home page Code Monkey logo

devtalles-typescript's Introduction

devtalles-typescript

devTalles - TypeScript: Tu completa guía y manual de mano

https://cursos.devtalles.com/courses/take/typescript-guia-completa

Descripción

Mis notas personales del TypeScript: Tu completa guía y manual de mano) brindado por Fernando Herrera.

Tabla de contenidos

Sección 1: Introducción a TypeScript

Sección 2: Introducción a TypeScript

Instala typescript de forma global:

npm install -g typescript
tsc --version

tsc --init // Crear el archivo TSConfig.json
tsc -w // Compilar automáticamente todos los .ts a .js

tsc: es un transpilador (convierte typescript en javascript).

  • [Hola Mundo en TypeScript]
  • [Modo observador]
tsc --watch // o tsc -w

Sección 3: Tipos básicos

Angular de cero a experto - Edición 2023

Sección 3: Bases de TypeScript - Recomendado

https://cursos.devtalles.com/courses/take/angular/lessons/41410397-inicio-de-proyecto-typescript

Fuente de ejercicios online

npm create vite
cd typescript-intro
npm install
npm run dev

JavaScript tipos: primitivos (String, Number, Boolean, Symbol), compuestos/objetos (Objetos literales, Funciones, Clases, Arreglos)

// algunos tipos
age = null
otro = undefined
sym = Symbol()
sym2 = Symbol('myProperty') // cuando se tiene un propiedad en un objeto que se desea que tenga un espacio en memoria diferente
NaN // es considerado un number

// tipo Any mejor nunca usarlo pues se pierde el testeo por el tipado
let avenger: any = 123
console.log((avenger as string).charAt(0)) // casting as string
console.log(avenger.toFixed(2))
console.log(<number>avenger.toFixed(2)) // casting as number
// Esto es correcto, pues un array también es un any
let arr: any = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

let nada: undefined = undefined
let nulo: null = null
// null != undefined
console.log(nada)
let isActive: boolean | undefined = undefined

// Tupla de dos valores que en js es un array
const hero: [string, number] = ['Dr. Strange', 100]
hero[0] = 'Ironman'
hero[1] = 20
console.log(hero)

// tipo enum (enumeraciones)
enum AudioLevel1 {
  min = 1,
  medium,
  max = 10,
}
const currentAudio1: AudioLevel1 = AudioLevel1.medium
console.log(currentAudio1)
console.log(AudioLevel1)

// Diccionario
person = {
  name: 'Fernando',
  Age: 35,
}

// Clases
class Person {
  name
  age
}

// funciones
function sayHello() {}

const sayHello = () => {} // arrow functions

// void especifica que la función no retorna nada
function callBatman(): void {
  console.log('Mostrar la batiseñal')
  //una función que no retorna nada (sin return), retorna undefined
  // void != null (null es un valor, void es como vacío o nada)
  // también return; devuelve un void
}
const a = callBatman()

// never no es undefined, no es null, no es void, no es void (nada)
// cuando se usa never, la función nunca retorna nada y no se seguirá ejecutando,
// es decir, la función nunca termina y el código revienta en ese punto
const error = (message: string): never => {
  throw new Error(message)
}
const abc = (message: string): never | number => {
  if (false) {
    throw new Error(message)
  }
  return 1
}
error('Auxilio!!')

// Interfaces

interface Character {
  name: string
  hp: number
  skills: string[]
  other?: string
  hometown: string | undefined
}

const strider: Character = {
  name: 'Strider',
  hp: 100,
  skills: ['Bash', 'Counter', 'Healing'],
  // other: 'test'
  hometown: undefined,
}

strider.hp = 95
strider.skills.push('Fire')
strider.other = 'test'
strider.hometown = 'Gondor'

//-------
// Ejemplo de resolución de tarea de ejercicio #1
// https://import.cdn.thinkific.com/643563/courses/1870132/appts-220520-123101.zip
;(() => {
  // Tipos
  const batman: string = 'Bruce'
  const superman: string = 'Clark'
  const existe: boolean = false
  console.log(batman, superman, existe)

  // Tuplas
  const parejaHeroes: [string, string] = [batman, superman]
  const villano: [string, number, boolean] = ['Lex Lutor', 5, true]
  console.log({ parejaHeroes, villano })

  // Arreglos
  const aliados: string[] = ['Mujer Maravilla', 'Acuaman', 'San', 'Flash']
  console.log({ aliados })

  //Enumeraciones
  enum fuerza {
    acuaman = 0,
    batman = 1,
    flash = 5,
    superman = 100,
  }
  const fuerzaFlash = fuerza.flash
  const fuerzaSuperman = fuerza.superman
  const fuerzaBatman = fuerza.batman
  const fuerzaAcuaman = fuerza.acuaman
  console.log(fuerza)

  // Retorno de funciones
  function activar_batiseñal(): string {
    return 'activada'
  }
  console.log(activar_batiseñal())

  function pedir_ayuda(): void {
    console.log('Auxilio!!!')
  }
  console.log(pedir_ayuda())

  // Aserciones de Tipo
  const poder: any = '100'
  const largoDelPoder: number = (poder as string).length
  const largoDelPoder1: number = (<string>poder).length
  console.log({ poder, largoDelPoder, largoDelPoder1 })
})()

Recursos

devtalles-typescript's People

Contributors

patchamama avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.