Convertir el proyecto a TypeScript

Al principio TypeScript me parecía aburrido y una perdida de tiempo… Que equivocado estaba y cuanto tiempo perdí por no aprender antes un poco sobre el…

![](

Refactorización

La refactorización del código fuente puede mejorar la calidad y la facilidad de mantenimiento de su proyecto al reestructurar su código sin modificar el comportamiento del tiempo de ejecución. Visual Studio Code admite operaciones de refactorización (refactorizaciones) como el Método de extracción y la Variable de extracción para mejorar su base de código desde su editor.

La refactorización de código es el proceso de reestructurar el código de computadora existente, cambiar la factorización, sin cambiar su comportamiento externo. La refactorización está destinada a mejorar los atributos no funcionales del software . Las ventajas incluyen legibilidad mejorada del código y complejidad reducida ; Estos pueden mejorar el mantenimiento del código fuente y crear una arquitectura interna más expresiva o un modelo de objeto para mejorar la extensibilidad .

Un pequeño aporte:

Para asegurarnos de que el objeto de configuración pasado a la clase MediaPlayer siempre sea correcto podemos utilizar una interface.

// Para estar seguros de que el objecto de configuración siempre sea correcto.
const player: MediaPlayer = new MediaPlayer({ elm: video, plugins: [AutoPlay, AutoPause] });

Note como la propiedad plugins es opcional.

Si tienen el error Uncaught ReferenceError: regeneratorRuntime is not defined, se corrige instalando npm i -S @babel/polyfill y agregando al archivo sw.js: import '@babel/polyfill';
😃

Ya entendi porque tanto amor hacia typeScript, de verdad “facilita las cosas”

Estuve batallando con el error desde que hicimos el cambio a parcel, y resulta que era todo porque no limpiaba el Application Storage. :face

sin opción quick fix, alguna sugerencia???

Alguien mas tiene problemas con el video de la película???

En Chrome Dev Tools me aparece lo siguiente:

“Uncaught (in promise) TypeError: Failed to execute ‘put’ on ‘Cache’: Partial response (status code 206) is unsupported
at updateCache (sw.js? [sm]:44)”

Creo entender que es porque tiene que tener un status de 200 y no de 206 pero no encuentro la solución aún.

Pd: Tengo el mismo código que el profesor

Me hace acordar a mi primer año en la universidad donde aprendi C, y sinceramente, estoy encontrando un nuevo amor llamado TypeScript

La verdad es que si no me hubiera apuntado al curso, no hubiera aprendido esto. Muchas gracias Richard por la explicación de cada detalle. Crack

Habia usado TypeScript, pero no sabia lo del tipo HTMLElement y HTMLMediaElement.

#NuncaParesDeAprender

Por qué pasa esto??

sw.js? [sm]:36 Uncaught ReferenceError: regeneratorRuntime is not defined
at _cacheResponse (sw.js? [sm]:36)
at cacheResponse (sw.js? [sm]:36)
at sw.js? [sm]:15

const VERSION = "v1";

self.addEventListener('fetch', event => {
  const request = event.request;
  // get
  if (request.method !== "GET") {
    return;
  }

  // buscar en cache
  event.respondWith(cacheResponse(request))

  // actualizar el cache
  event.waitUntil(updateCache(request))
})

async function precache() {
  const cache = await caches.open(VERSION);
  return cache.addAll([
    // './',
    // './index.html',
    // './assets/index.js',
    // './assets/MediaPlayer.js',
    // './plugins/AutoPlay.js',
    // './plugins/AutoPause.js',
    // './assets/index.css',
    // './assets/BigBuckBunny.mp4',
  ]);
}

self.addEventListener('install', event => {
  event.waitUntil(precache());
});

async function cacheResponse(request) {
  const cache = await caches.open(VERSION);
  const response = await cache.match(request)
  return response || fetch(request)
}

async function updateCache(request) {
  const cache = await caches.open(VERSION);
  const response = await fetch(request);
  return cache.put(request, response)
}

Lo logré !

Todo me funciona pero me sale este error en consola:
MediaPlayer.ts:56 Uncaught ReferenceError: parcelRequire is not defined
at MediaPlayer.ts:56
at MediaPlayer.ts:56
(anonymous) @ MediaPlayer.ts:56
(anonymous) @ MediaPlayer.ts:56

¿Que significa ParcelRequire is not defined?
En el source me resalta esto:
// Override the current require with this new one //
parcelRequire = newRequire;

No lo entiendo :`/

tengo un erro algo peculiar y no encur¿ntro una explicacion clara

Error:

failed to load module script: The server responded with a non-JavaScript MIME type of “video/mp2t”. Strict MIME type checking is enforced for module scripts per HTML spec.

Para ser una aprendiz en JS me parece muy bueno usar TypeScript, me parece muy útil y brinda una expansión en el código para detectar los errores.

Si me recuerda un poco a java, la verdad venia demasiado perdido pero cuando ya se usan cosas que ya se de java me alegro la vida, no se en el campo laboral que tan usado sea

Fantástica clase.

como se reinicia el servidor en consola?

Lo de la conversión automática a clases solo funciona cuando el archivo es JS, si lo cambio antes a TS no me sale la opción, a alguno le paso igual?

Que genial typescript, amo que las cosas sean mas estructuradas y similares a C++

No sabía que TypeScript era tan genial, terminé amándolo

i love VS

Genial, muchas gracias!!

Gracias!

Al asignarle el tipo de Player, automáticamente me importa el Media Player! Excelente que es TS!

También se podría crear una interface Plugin y así la variable plugins podría ser de tipo Array<Plugin>.
Me encanta typescript porque hace que javascript se parezca más a otros lenguajes como Java, Kotlin o incluso Dart.

Tambien está la opción de compilar con webpack, aquí les dejo la documentación: https://webpack.js.org/guides/typescript/

Me gusta más trabajar con Javascript.
Typescript me parece más un lenguaje al estilo Dart, para transpilar y/o compilar para otros lenguajes. Algo bastante polivalente si se quiere trabajar multiplataforma un mismo código.
El código pierde toda la dinámica que tenía, trampas para jugar con la memoria ram o el reducir el uso de esta, se pierde tiempo transpilando (eso se nota en muchos frameworks especialmente en live reload), aunque ciertamente gana en prevención de excepciones de tipo TypeError y/o causadas por estas (cosa que puede abarcar un buen testing).

Una forma de saber de que tipo es un video o un boton es escribiendo en la consola lo siguiente:

console.dir(document.querySelector("button").__proto__)

esto nos devuele el Prototype del elemento
tambien podemos hacer esto directamente con una variable

console.dir(variable.__proto__)

Chicos, el archivo que esta en raíz, el sw.js no se convirtió a TypeScript, alguno lo convirtió?

repasando el modulo*.*

Can somebody helps me?
I ge this in console:

A bad HTTP response code (404) was received when fetching the script.
index.ts:27 Failed to register a ServiceWorker for scope (‘http://localhost:1234/’) with script (‘http://localhost:1234/assetssw.js’): A bad HTTP response code (404) was received when fetching the script.

Thanks…

rm -rf .cache dist

no se que le ven a TypeScript pero a mi no me gustó

Los super poderes de typescript.

Si tienen el error Uncaught ReferenceError: regeneratorRuntime is not defined.
Yo lo solucione agregando esto en el package.json
"browserslist": [
“last 1 Chrome version”
]

En clases anterios habia dejado un browserlist* y ese * es el que me generaba el error.

Con estos comandos borramos la cache y la carpeta dist de nuestros documentos dentro de VSCode.

rm -rf .cache dist

bacano !!

por favor auida con este error, me sale cuando intento iniciar el servidor con npm start y tambien me lo dice en la pagina index.html

D:\Platzi\JavaScript\Professionaljs\MediaPlayer\sw: ENOENT: no such file or directory, open

Parafraseando, typescript nos permite asegurarnos que lo que implementemos (ya sean clases o funciones) tenga argumentos y returns validos

Todo es risa y diversión hasta que recuerdas que habrá un examen de todo lo visto hasta hora y más 🙃

Una gran clase sobre la utilidad práctica de TypeScript.

Para los que no les aparece quick fix primero deben convertir la clase antes de renombrar el archivo a .ts y luego si se renombra el archivo Autoplay con la extension .ts

Me sigue apareciendo esto, alguien tiene idea de qué será?

No me agrado mucho TS, no porque esta mal pero vengo de C# (fuertemente tipado), es como quitarle algo especial al JS. 🙈

Esta es la historia de un nuevo amor, llamado Typescript 😄

Los mortales sorprendidos por el quick fix mientras Webstorm hace eso y mas :v

Increíble el poder y facilidad que nos da utilizar TypeScript. Muy recomendado poder aprenderlo para utilizarlo en nuestros proyectos que podamos escalar a más grandes.

Fue un modulo estupendo!!! 🙂

Ya tambien lo tenia como clases todo :c jajaja ni refactorizacion hice

esta chevere typescript

me gusta typescript…

Excelten muchas gracias

Ose que lo ideal es dejar de trabajar con formato .js y trabajar con formato .ts?

Great!

Debo volver a repasar estas clases

Que plugin se necesita para el refactoring a class?

muy bueno 😃

Usar typescript es lo mejor, siento que el codigo queda mas limpio y tambien es mejor tipar las variables para evitar errores y hasta bugs.

Lo mas importante de Typescript es que ayuda hacer muchisimo mas facil el poder leer el codigo. 😄

Buenas tardes, Me sirvió pero tengo este error que no me permite que el vídeo que no se activa automáticamente. Me podría ayudar con ese error ?

A mi no me lanzó ningún error…, también veo lo mismo en Type y Java Script jaja la diferencia es mínima y tienes que escribir siempre los types…

Genial Typescript ofrece muchos beneficios

Typescript fue creado por Microsoft .

Una pregunta:
Se puede usar el “strict mode” con type script tambien??

Cuando estén renombrando los archivos, para que sea frendly con git, pueden hacerlo con el siguiente comando
.

$ git mv assets/index.js assets/index.ts

.
git lo tomará como un renombrado, conservando así el historico del archivo. En caso contrario, git lo tomará como el trackeo de un archivo nuevo.

TypeScript me parece mejor que solo js puro.

rm -rf .cache dist

Por si lo necesitan!

Me gustó más como quedó con TS 😁

Me parece bastante útil el typescript, pero no se si es el parcel o que sera, pero me aparecen errores incompresibles de la nada XD que se arreglan solos después de unos minutos.

Siempre cuesta un poco al principio, pero es realmente útil usar typescript.

Buenas!! Espero por favor me ayuden con este error, llevo días tratando y no he podido, he inicializado todo e incluso he usado el proyecto descargado directamente de los ‘Archivos y Enlaces’.

GRACIAS!!

Es genial TypeScript

si les aparecen muchos errores tal vez sea por el services worker lo mejor es comentar la linea donde se llama

¿En este caso, utilizando TypeScript no es posible utilizar un Service Worker ya que no podemos apuntar a los archivos compilados o cual sería su aplicación?

Me recuerda bastante a java

Bonus de interfaces 👨‍💻

Hay otra cosa interesante con las interfaces que no se menciona, asi como puedes definir los atributos que debe tener el objeto/clase, tambien nos permite definir que metodos debe tener. Y con el proyecto podemos entender mas a fondo esto. 👀

Primero creamos una interfaz para nuestros plugins, para poder decir que son “tipo plugin”:

import MediaPlayer from '../MediaPlayer'

interface IPlugin {
  run(player: MediaPlayer): void
}

export default IPlugin

Como pueden observar, la “firma” del metodo es lo que se escribe dentro de la interfaz, tipo de argumento y de regreso.
La I al inicio es por convencion, para identificar rapidamente que es una interfaz.

Posteriormente, vamos a implementar esta interfaz en nuestras clases plugin, esta es una practica muy comun en lenguajes fuertemente tipados, como Java.
Para implementar la interfaz usamos la palabra reservada implements.

import MediaPlayer from '../MediaPlayer'
import IPlugin from './IPlugin'

class AutoPlay implements IPlugin {
  constructor() {}

  run(player: MediaPlayer) {
    player.mute()
    player.play()
  }
}
export default AutoPlay

import MediaPlayer from '../MediaPlayer'
import IPlugin from './IPlugin'

class AutoPause implements IPlugin {
  private threshold: number
  private player: MediaPlayer

  constructor() {
    this.threshold = 0.25
    this.handleIntersection = this.handleIntersection.bind(this)
    this.handleVisibilityChange = this.handleVisibilityChange.bind(this)
  }

  run(player: MediaPlayer) {
    this.player = player
    // visibilityChange e intersectionObserver setup
  }

// todo lo demas...
}

export default AutoPause

Ah pues ahora que tenemos definidas las clases de los plugins como tipo IPlugin ya sabemos que todas las clases que implementen esta interfaz deben contener el metodo run(player: MediaPlayer): void, que en este caso nos ayuda muchisimo al momento de inicializar los plugins en el MediaPlayer.

Vamos a definir el tipo de plugins como un arreglo de IPlugin

plugins: IPlugin[]
// o'
plugins: Array<IPlugin>

import IPlugin from './plugins/IPlugin'

class MediaPlayer {
  media: HTMLMediaElement
  plugins: IPlugin[] // Definimos nuestro arreglo de tipo IPlugin

  constructor({ mediaElement, plugins = [] }) {
    this.media = mediaElement
    this.plugins = plugins

    this.initPlugins()
  }

  private initPlugins() {
    this.plugins.forEach(plugin => {
      plugin.run(this) // ahora podemos estar seguros de que nuestros plugins contienen el metodo run
    })
  }
}

Y listo, ahora sabes que tambien puedes definir los metodos que deben contener los objetos/clases que implementen una interfaz.

Repo: https://github.com/Destroy-Youth/pl-curso-profesional-javascript

es cuestión de acostumbrarse a usar typescript y nada, siempre mejorando.

TypeScript no solo trae el tipado a JS sino que muchas mas ventajas como los enum y el poder declarar variables privadas, asi como la refactorización

Hoy comprendo mejor por qué es excelente decisión aprender TS !

Si alguien de los que no le aparece el quickfix le sirve…
A mi el quickfix de function a class me aparece en los archivos .js pero no en los .ts, intenta cambiar la extensión solo para ver si te aparece ese quickfix

Lo de pasarlo a formas de clases con VSC ya se podía hacer antes de pasarlo a TS, yo lo hacia antes, pero después empecé a escribir el código en forma de clases, lo veía mas sencillo.

Estuvo increíble, aunque lo de la conversión de clases, mas que ser de TypeScript considero que es de ES2015 ya que a mi antes me salía también y no usaba TS, y esto realmente lo convierte a clases de ES2015, no a clases de TS ^^

TypeScript es genial!

esta perfecto para aplicar patrones ;D

Otra manera rápida de limpiar el cache es pulsando “ALT + F5”. 😃

Excelente guia.