A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Convertir el proyecto a TypeScript

29/42
Recursos

Aportes 90

Preguntas 26

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

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 鈥渇acilita 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:

鈥淯ncaught (in promise) TypeError: Failed to execute 鈥榩ut鈥 on 鈥楥ache鈥: 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 鈥渧ideo/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": [
鈥渓ast 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!

C# en Javascript :heart:

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 鈥渟trict 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 鈥楢rchivos 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 鈥渢ipo plugin鈥:

<h4>Interfaz IPlugin</h4>
import MediaPlayer from '../MediaPlayer'

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

export default IPlugin

Como pueden observar, la 鈥渇irma鈥 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.

<h4>Clases plugin</h4>

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.

<h5>Autoplay</h5>
import MediaPlayer from '../MediaPlayer'
import IPlugin from './IPlugin'

class AutoPlay implements IPlugin {
  constructor() {}

  run(player: MediaPlayer) {
    player.mute()
    player.play()
  }
}
export default AutoPlay
<h5>Autopause</h5>
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
<h4>驴Y esto pa鈥檘ue me sirve? 馃</h4>

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>
<h5>MediaPlayer</h5>
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 鈥淎LT + F5鈥. 馃槂

Excelente guia.