¿Cómo puede un editor mostrar automáticamente errores de tipo cuando creas un solo archivo TypeScript sin ejecutar "npm install typescript" o tener un archivo tsconfig.json? ¿Se construye una lista de finalización por tu editor de código, TypeScript mismo o algún otro ser misterioso? ¿Qué es TSServer?
En esta charla te daré una visión general de cómo el servidor de TypeScript se comunica con los IDE y otros editores, ofreciendo funciones de lenguaje avanzadas sin ejecutar nunca tsc.
Cómo se integra TypeScript en tu editor
FAQ
María Solano es ingeniera de software en Microsoft, enfocada en las herramientas del editor de TypeScript y ocasionalmente trabaja en la extensibilidad de LSP y el sistema de proyectos de JavaScript de Visual Studio.
Una acción de código en TypeScript está vinculada a un diagnóstico y representa algo que puedes hacer para solucionar errores en el código.
La principal diferencia es que una acción de código está diseñada para corregir errores, mientras que una refactorización ofrece recomendaciones inteligentes para mejorar la calidad del código sin que necesariamente haya un error.
TypeScript se integra a través de un servidor de lenguaje, TS-Server, que utiliza un protocolo JSON para comunicarse con los editores. Este enfoque permite que características como autocompletado y acciones de código funcionen de manera uniforme en diferentes plataformas de edición.
TS-Server es el servidor de lenguaje de JavaScript y TypeScript que encapsula el compilador de lenguaje y otras características. Utiliza un protocolo JSON para definir comandos y formatos de solicitud y respuesta, permitiendo así la comunicación con diferentes editores.
Al hacer clic en la bombilla, se despliega una lista de acciones de código o refactorizaciones disponibles basadas en el contexto del código donde se encuentra el cursor. Esta lista es construida por el editor que consulta a diferentes proveedores de acciones de código.
TypeScript, a través del TS-Server, identifica refactorizaciones aplicables basadas en la posición del cursor y el contexto del código. Una vez seleccionada la refactorización, TS-Server calcula y envía las modificaciones necesarias al editor para aplicarlas.
Aunque LSP es flexible y se utiliza en muchos lenguajes de programación, TypeScript utiliza su propio protocolo personalizado para soportar características específicas que requieren extensiones personalizadas para proporcionar una experiencia de edición rica.
Video Summary and Transcription
La charla de hoy explora la integración y refactorización de TypeScript, el manejo de acciones de código, el servidor de TypeScript y el proceso de refactorización, la generación de informes de errores y el protocolo y LSP de TypeScript. La charla analiza cómo se integra TypeScript en los editores, el papel de los proveedores de acciones de código y la comunicación entre el cliente y el servidor. También destaca el proceso de dos etapas de las acciones de código y la importancia de la generación de informes de errores. Además, menciona el protocolo de TypeScript y cómo permite extensiones específicas del lenguaje. LSP se menciona como una solución de extensibilidad potente utilizada por varios lenguajes.
1. Integración y Refactorización de TypeScript
¡Hola a todos! Hoy exploraremos cómo se integra TypeScript en tu editor, quién hace qué y cuándo. Usaremos el refactorizado de variables en línea de TypeScript como ejemplo. Una acción de código está vinculada a un diagnóstico, que representa algo que puedes hacer para solucionar errores. La refactorización proporciona recomendaciones inteligentes para escribir un código más limpio o más agradable. El editor reconoce eventos desencadenantes, que pueden ser pasivos o explícitos. TypeScript muestra refactorizaciones basadas en el tipo de desencadenante, y puedes solicitar explícitamente una refactorización para variables.
Hola a todos, y gracias por acompañarme hoy. Soy María Solano, y soy ingeniera de software en Microsoft. Permítanme presentarme rápidamente, me enfoco en las herramientas del editor de TypeScript, pero a veces también profundizo en la extensibilidad de LSP, el sistema de proyectos de JavaScript de Visual Studio, o simplemente miro fijamente el verificador de TypeScript durante un par de horas, tratando de absorber su sabiduría, como estoy segura de que todos ustedes han hecho.
Hoy exploraremos cómo se integra TypeScript en tu editor, quién hace qué y cuándo. Para esto, usaremos el refactorizado de variables en línea de TypeScript como ejemplo, que es mi favorito, principalmente porque lo implementé. Supongamos que tienes esta función de saludo por consola, y tu cursor está en la primera línea de su cuerpo. En un editor como VS Code, verás una bombilla. ¿De dónde viene esa bombilla? Spoiler alerta, si haces clic en ella, aparecerá una lista. ¿Quién construye esa lista y cómo se insertan los elementos en ella? No solo VS Code tiene esta funcionalidad, Visual Studio, NeoVim, Emacs, Zed y otros editores oscuros también tienen una experiencia de bombilla de TypeScript que no difiere mucho de la de VS Code. ¿Cómo se hace eso?
Como nota al margen, durante esta charla usaré acción de código y refactorización como sinónimos, a pesar de que no son exactamente lo mismo. Aunque la diferencia es una tecnicidad, lo explicaré de todos modos para que puedas entenderlo en tu próximo juego de trivia de editores de código. Una acción de código está vinculada a un diagnóstico y, por lo tanto, representa algo que puedes hacer para solucionar esos errores. La refactorización, por otro lado, no son correcciones, son recomendaciones inteligentes para escribir un código más limpio o más agradable, pero no significa que haya algo mal con lo que escribiste.
Volviendo a PrintGreeting, lo primero que sucede es que el editor reconocerá un evento desencadenante. Esto puede ser una acción pasiva, como colocar el cursor en una posición donde se pueda aplicar una refactorización. El desencadenante también puede ser explícito, como uno que configuras con un atajo de teclado. Ten en cuenta que los resultados pueden diferir según el tipo de desencadenante. Tener una bombilla constante apareciendo en todas partes de tu pantalla puede ser molesto, por lo que TypeScript podría decidir mostrarte ciertas refactorizaciones solo si realmente quieres verlas. En este ejemplo, TypeScript mostrará una bombilla junto al identificador de una variable que se podría inlinear, pero deberás solicitar explícitamente la refactorización en las referencias de dichas variables.
2. Manejo de Acciones de Código y Proveedores
El editor necesita a alguien que pueda entender el código para determinar qué refactorizaciones mostrar. Registra la posición y el tipo de contenido, que puede no corresponder directamente a la extensión del archivo. Las extensiones pueden manejar las solicitudes de acciones de código utilizando diferentes mecanismos, como registrar una devolución de llamada. Varios proveedores de acciones de código pueden mejorar las correcciones proporcionadas por el servidor de lenguaje.
Ahora supongamos que no somos expertos en bombillas y usamos el mouse para hacer clic en la bombilla. El editor en realidad no sabe qué refactorizaciones mostrar aquí. Necesita a alguien que pueda entender el código.
Para comunicarse con esa persona, el editor registrará la posición y el tipo de contenido. Ten en cuenta que el tipo de contenido no es exactamente una correspondencia 1 a 1 con el tipo que proviene de la extensión del archivo. Un fragmento de TypeScript dentro de un bloque de script de un archivo HTML también se asigna al tipo de contenido TypeScript. Así es como aún puedes obtener acciones de código, autocompletado y resaltado de sintaxis correcto en código incrustado.
Una extensión anuncia que puede manejar la solicitud de acción de código. Hay diferentes mecanismos para hacerlo. En VS Code, registrarías un proveedor de acciones de código para el tipo de contenido TypeScript. En Visual Studio, podrías usar las API de Roslyn o el protocolo del servicio de lenguaje. La mayoría de las veces, esto implica básicamente registrar una devolución de llamada y decirle al editor cuándo invocarla. Ten en cuenta que esto no se limita a los servidores de lenguaje. Las extensiones como ESLint también pueden conectarse a la lista de acciones de código para mejorar las correcciones proporcionadas por el servidor de lenguaje. Esto también significa que puede haber varios proveedores de acciones de código provenientes de diferentes extensiones. El editor luego combinará todos los resultados en una sola lista.
Check out more articles and videos
We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career
Workshops on related topic
¿Los dos juntos? No tanto. Dado que ambos cambian rápidamente, es difícil encontrar materiales de aprendizaje precisos.
¿React+TypeScript, con los IDEs de JetBrains? Esa combinación de tres partes es el tema de esta serie. Mostraremos un poco sobre mucho. Es decir, los pasos clave para ser productivo, en el IDE, para proyectos de React utilizando TypeScript. En el camino, mostraremos el desarrollo guiado por pruebas y enfatizaremos consejos y trucos en el IDE.
En esta masterclass de tres horas, presentaremos la Biblioteca de Pruebas de React junto con un modelo mental de cómo pensar en el diseño de tus pruebas de componentes. Este modelo mental te ayudará a ver cómo probar cada bit de lógica, si debes o no simular dependencias, y ayudará a mejorar el diseño de tus componentes. Te irás con las herramientas, técnicas y principios que necesitas para implementar pruebas de componentes de bajo costo y alto valor.
Tabla de contenidos- Los diferentes tipos de pruebas de aplicaciones de React, y dónde encajan las pruebas de componentes- Un modelo mental para pensar en las entradas y salidas de los componentes que pruebas- Opciones para seleccionar elementos DOM para verificar e interactuar con ellos- El valor de los mocks y por qué no deben evitarse- Los desafíos con la asincronía en las pruebas de RTL y cómo manejarlos
Requisitos previos- Familiaridad con la construcción de aplicaciones con React- Experiencia básica escribiendo pruebas automatizadas con Jest u otro marco de pruebas unitarias- No necesitas ninguna experiencia con la Biblioteca de Pruebas de React- Configuración de la máquina: Node LTS, Yarn
Durante la masterclass, realizarás:
- Maximizar la mantenibilidad y escalabilidad del código con prácticas avanzadas de TypeScript
- Desatar los beneficios de rendimiento de los Componentes de Servidor React, superando enfoques tradicionales
- Potenciar tu TypeScript con el poder de los Tipos Mapeados
- Hacer tus tipos TypeScript más seguros con Tipos Opacos
- Explorar el poder de los Tipos de Plantillas Literales al usar Tipos Mapeados
Maurice estará virtualmente a tu lado, ofreciendo una guía completa y respondiendo a tus preguntas mientras navegas por cada ejercicio. Al final de la masterclass, habrás dominado los Componentes de Servidor React, armado con un nuevo arsenal de conocimientos de TypeScript para potenciar tus aplicaciones React.
No pierdas esta oportunidad de elevar tu experiencia en React a nuevas alturas. Únete a nuestra masterclass y desbloquea el potencial de los Componentes de Servidor React con TypeScript. Tus aplicaciones te lo agradecerán.
Comments