Cómo se integra TypeScript en tu editor

Rate this content
Bookmark

¿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.

Maria Solano
Maria Solano
18 min
21 Sep, 2023

Comments

Sign in or register to post your comment.

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

Short description:

¡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

Short description:

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

A Guide to React Rendering Behavior
React Advanced Conference 2022React Advanced Conference 2022
25 min
A Guide to React Rendering Behavior
Top Content
React is a library for "rendering" UI from components, but many users find themselves confused about how React rendering actually works. What do terms like "rendering", "reconciliation", "Fibers", and "committing" actually mean? When do renders happen? How does Context affect rendering, and how do libraries like Redux cause updates? In this talk, we'll clear up the confusion and provide a solid foundation for understanding when, why, and how React renders. We'll look at: - What "rendering" actually is - How React queues renders and the standard rendering behavior - How keys and component types are used in rendering - Techniques for optimizing render performance - How context usage affects rendering behavior| - How external libraries tie into React rendering
Modern Web Debugging
JSNation 2023JSNation 2023
29 min
Modern Web Debugging
Top Content
Few developers enjoy debugging, and debugging can be complex for modern web apps because of the multiple frameworks, languages, and libraries used. But, developer tools have come a long way in making the process easier. In this talk, Jecelyn will dig into the modern state of debugging, improvements in DevTools, and how you can use them to reliably debug your apps.
React Concurrency, Explained
React Summit 2023React Summit 2023
23 min
React Concurrency, Explained
Top Content
React 18! Concurrent features! You might’ve already tried the new APIs like useTransition, or you might’ve just heard of them. But do you know how React 18 achieves the performance wins it brings with itself? In this talk, let’s peek under the hood of React 18’s performance features: - How React 18 lowers the time your page stays frozen (aka TBT) - What exactly happens in the main thread when you run useTransition() - What’s the catch with the improvements (there’s no free cake!), and why Vue.js and Preact straight refused to ship anything similar
The Future of Performance Tooling
JSNation 2022JSNation 2022
21 min
The Future of Performance Tooling
Top Content
Our understanding of performance & user-experience has heavily evolved over the years. Web Developer Tooling needs to similarly evolve to make sure it is user-centric, actionable and contextual where modern experiences are concerned. In this talk, Addy will walk you through Chrome and others have been thinking about this problem and what updates they've been making to performance tools to lower the friction for building great experiences on the web.
TypeScript and React: Secrets of a Happy Marriage
React Advanced Conference 2022React Advanced Conference 2022
21 min
TypeScript and React: Secrets of a Happy Marriage
Top Content
TypeScript and React are inseparable. What's the secret to their successful union? Quite a lot of surprisingly strange code. Learn why useRef always feels weird, how to wrangle generics in custom hooks, and how union types can transform your components.
React's Most Useful Types
React Day Berlin 2023React Day Berlin 2023
21 min
React's Most Useful Types
Top Content
We don't think of React as shipping its own types. But React's types are a core part of the framework - overseen by the React team, and co-ordinated with React's major releases.In this live coding talk, we'll look at all the types you've been missing out on. How do you get the props type from a component? How do you know what ref a component takes? Should you use React.FC? And what's the deal with JSX.Element?You'll walk away with a bunch of exciting ideas to take to your React applications, and hopefully a new appreciation for the wonders of React and TypeScript working together.

Workshops on related topic

React Hooks Tips Only the Pros Know
React Summit Remote Edition 2021React Summit Remote Edition 2021
177 min
React Hooks Tips Only the Pros Know
Top Content
Featured Workshop
Maurice de Beijer
Maurice de Beijer
The addition of the hooks API to React was quite a major change. Before hooks most components had to be class based. Now, with hooks, these are often much simpler functional components. Hooks can be really simple to use. Almost deceptively simple. Because there are still plenty of ways you can mess up with hooks. And it often turns out there are many ways where you can improve your components a better understanding of how each React hook can be used.You will learn all about the pros and cons of the various hooks. You will learn when to use useState() versus useReducer(). We will look at using useContext() efficiently. You will see when to use useLayoutEffect() and when useEffect() is better.
React, TypeScript, and TDD
React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
Top Content
Featured WorkshopFree
Paul Everitt
Paul Everitt
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
Designing Effective Tests With React Testing Library
React Summit 2023React Summit 2023
151 min
Designing Effective Tests With React Testing Library
Top Content
Featured Workshop
Josh Justice
Josh Justice
React Testing Library is a great framework for React component tests because there are a lot of questions it answers for you, so you don’t need to worry about those questions. But that doesn’t mean testing is easy. There are still a lot of questions you have to figure out for yourself: How many component tests should you write vs end-to-end tests or lower-level unit tests? How can you test a certain line of code that is tricky to test? And what in the world are you supposed to do about that persistent act() warning?
In this three-hour workshop we’ll introduce React Testing Library along with a mental model for how to think about designing your component tests. This mental model will help you see how to test each bit of logic, whether or not to mock dependencies, and will help improve the design of your components. You’ll walk away with the tools, techniques, and principles you need to implement low-cost, high-value component tests.
Table of contents- The different kinds of React application tests, and where component tests fit in- A mental model for thinking about the inputs and outputs of the components you test- Options for selecting DOM elements to verify and interact with them- The value of mocks and why they shouldn’t be avoided- The challenges with asynchrony in RTL tests and how to handle them
Prerequisites- Familiarity with building applications with React- Basic experience writing automated tests with Jest or another unit testing framework- You do not need any experience with React Testing Library- Machine setup: Node LTS, Yarn
Best Practices and Advanced TypeScript Tips for React Developers
React Advanced Conference 2022React Advanced Conference 2022
148 min
Best Practices and Advanced TypeScript Tips for React Developers
Top Content
Featured Workshop
Maurice de Beijer
Maurice de Beijer
Are you a React developer trying to get the most benefits from TypeScript? Then this is the workshop for you.In this interactive workshop, we will start at the basics and examine the pros and cons of different ways you can declare React components using TypeScript. After that we will move to more advanced concepts where we will go beyond the strict setting of TypeScript. You will learn when to use types like any, unknown and never. We will explore the use of type predicates, guards and exhaustive checking. You will learn about the built-in mapped types as well as how to create your own new type map utilities. And we will start programming in the TypeScript type system using conditional types and type inferring.
Deep TypeScript Tips & Tricks
Node Congress 2024Node Congress 2024
83 min
Deep TypeScript Tips & Tricks
Top Content
Workshop
Josh Goldberg
Josh Goldberg
TypeScript has a powerful type system with all sorts of fancy features for representing wild and wacky JavaScript states. But the syntax to do so isn't always straightforward, and the error messages aren't always precise in telling you what's wrong. Let's dive into how many of TypeScript's more powerful features really work, what kinds of real-world problems they solve, and how to wrestle the type system into submission so you can write truly excellent TypeScript code.
Practice TypeScript Techniques Building React Server Components App
TypeScript Congress 2023TypeScript Congress 2023
131 min
Practice TypeScript Techniques Building React Server Components App
Workshop
Maurice de Beijer
Maurice de Beijer
In this hands-on workshop, Maurice will personally guide you through a series of exercises designed to empower you with a deep understanding of React Server Components and the power of TypeScript. Discover how to optimize your applications, improve performance, and unlock new possibilities.
 
During the workshop, you will:
- Maximize code maintainability and scalability with advanced TypeScript practices
- Unleash the performance benefits of React Server Components, surpassing traditional approaches
- Turbocharge your TypeScript with the power of Mapped Types
- Make your TypeScript types more secure with Opaque Types
- Explore the power of Template Literal Types when using Mapped Types
 
Maurice will virtually be by your side, offering comprehensive guidance and answering your questions as you navigate each exercise. By the end of the workshop, you'll have mastered React Server Components, armed with a newfound arsenal of TypeScript knowledge to supercharge your React applications.
 
Don't miss this opportunity to elevate your React expertise to new heights. Join our workshop and unlock the potential of React Server Components with TypeScript. Your apps will thank you.