<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>Forem: Vinícius Cristofari Barbosa</title>
    <description>The latest articles on Forem by Vinícius Cristofari Barbosa (@viniciusnyp).</description>
    <link>https://forem.com/viniciusnyp</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1259967%2F55fc14be-556b-45fd-8d77-965b3a45c4c5.jpeg</url>
      <title>Forem: Vinícius Cristofari Barbosa</title>
      <link>https://forem.com/viniciusnyp</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/viniciusnyp"/>
    <language>en</language>
    <item>
      <title>Desk Check in remote teams</title>
      <dc:creator>Vinícius Cristofari Barbosa</dc:creator>
      <pubDate>Fri, 19 Jan 2024 13:19:04 +0000</pubDate>
      <link>https://forem.com/viniciusnyp/desk-check-in-remote-teams-3em7</link>
      <guid>https://forem.com/viniciusnyp/desk-check-in-remote-teams-3em7</guid>
      <description>&lt;p&gt;As developers, we try our best to avoid submitting overly large pull requests (PRs), but it's not always possible, either due to the scale of the task or the difficulty of breaking it into smaller parts. With that said, have you ever found yourself in a situation where you need to review a colleague's very large and complex PR? Do you feel that it would take hours to grasp the code, test the functionalities, check quality standards, and provide constructive feedback, or that you might get lost amid so many files? Would you like a quicker and more effective way to do this?&lt;/p&gt;

&lt;p&gt;If you answered yes to these questions, then you can benefit from a technique called Desk Check. In this post, I'll explain what Desk Check is, its benefits, and how to apply it.&lt;/p&gt;

&lt;h2&gt;
  
  
  What is Desk Check?
&lt;/h2&gt;

&lt;p&gt;Desk Check is a code review practice involving a synchronous session between the PR author and one or more reviewers. During this session, the author presents their work, explains the decisions made, demonstrates implemented features, and responds to reviewers' questions.&lt;/p&gt;

&lt;p&gt;The goal of Desk Check is to facilitate code understanding, validate proposed solutions, identify potential issues or improvements, and expedite the PR approval process.&lt;/p&gt;

&lt;h2&gt;
  
  
  What are the benefits of Desk Check?
&lt;/h2&gt;

&lt;p&gt;Desk Check offers several benefits to the team, both for the author and the PR reviewers. Some of these are:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Enhances code quality&lt;/strong&gt;: By presenting work to others, the author may notice errors or inconsistencies overlooked during development, especially concerning business logic. Additionally, reviewers can suggest improvements or point out flaws the author hadn't considered.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Reduces review time&lt;/strong&gt;: Instead of spending hours reading and testing complex code, reviewers can get an overview of the PR in a Desk Check session lasting between 15 and 30 minutes. This allows them to focus on the most important and relevant points without getting lost in irrelevant details.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Promotes collaboration and learning&lt;/strong&gt;: Through Desk Check, the team can exchange knowledge, experiences, and best practices regarding code and problem domain. This helps foster a culture of continuous feedback and disseminate optimal solutions among team members.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Increases confidence and satisfaction&lt;/strong&gt;: Positive and constructive feedback on their work boosts the author's confidence and motivation. Simultaneously, reviewers feel more engaged and valued by the team.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  How to conduct Desk Check in remote teams?
&lt;/h2&gt;

&lt;p&gt;To conduct Desk Check in remote teams, you'll need some tools and tips. Let's explore what they are:&lt;/p&gt;

&lt;h3&gt;
  
  
  Tools
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Video conferencing tool&lt;/strong&gt;: You require a tool enabling video and audio calls with screen sharing for Desk Check sessions. Options include Slack, Google Meet, or Microsoft Teams.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Code management tool&lt;/strong&gt;: You'll need a tool for creating, reviewing, and approving PRs. Options include GitHub, GitLab, Bitbucket, or Azure DevOps.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Task management tool&lt;/strong&gt;: A tool to track tasks related to the PR's progress is essential. Options include Jira, Trello, Asana, or Notion.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Tips
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Prepare in advance&lt;/strong&gt;: Before starting the Desk Check session, ensure your code is ready to be presented without errors or bugs. Confirm your environment is set up correctly with installed dependencies and updated data. Additionally, create a script outlining what you'll show and explain during the presentation, highlighting key points.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Choose a convenient time&lt;/strong&gt;: Select a time convenient for all participants, considering everyone's schedules.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Be clear and concise&lt;/strong&gt;: During the presentation, communicate directly, clearly, and concisely, avoiding wasting participants' time. Explain what you did, why you did it, and how you did it. Demonstrate implemented features, showcasing both success and failure scenarios. Answer reviewers' questions with honesty and respect.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Be receptive and open&lt;/strong&gt;: During feedback, be receptive and open to reviewers' suggestions and criticisms. Appreciate the time and attention given to your PR. Don't take observations personally but as opportunities for improvement. Take note of raised points and commit to addressing or improving them.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;In summary, Desk Check is a code review technique that can bring many benefits to your remote team, especially for large PRs. Through Desk Check, you can enhance code quality, reduce review time, promote collaboration and learning, and increase team confidence and satisfaction.&lt;/p&gt;

&lt;p&gt;However, Desk Check isn't a silver bullet and may not always be suitable for all teams and situations. It may not replace traditional code reviews entirely, so it's essential to assess on a case-by-case basis. I find it a good option for:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Very large PRs&lt;/strong&gt;: Reviewing line by line traditionally could impose a significant cognitive load on the reviewer, potentially compromising the quality of the review and, consequently, the code.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Complementing normal reviews&lt;/strong&gt;: Conducting a Desk Check in addition to a regular code review, to abstractly evaluate the logic and decisions or as an extra validation after other review steps have concluded.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;I hope this post has been helpful to you. If you liked it, share it with your team colleagues, and leave a comment below. If you have any questions or suggestions, feel free to reach out.&lt;/p&gt;

&lt;p&gt;Thanks for reading, and until next time! 😊&lt;/p&gt;

</description>
      <category>discuss</category>
      <category>productivity</category>
      <category>tutorial</category>
      <category>development</category>
    </item>
    <item>
      <title>Desk Check em times remotos</title>
      <dc:creator>Vinícius Cristofari Barbosa</dc:creator>
      <pubDate>Fri, 19 Jan 2024 12:45:20 +0000</pubDate>
      <link>https://forem.com/viniciusnyp/desk-check-em-times-remotos-54f1</link>
      <guid>https://forem.com/viniciusnyp/desk-check-em-times-remotos-54f1</guid>
      <description>&lt;p&gt;Como desenvolvedores, tentamos ao máximo evitar fazer PRs muito grandes, mas nem sempre isso é possível, seja pela magnitude da tarefa ou pela dificuldade de separá-la em partes menores. Dito isso, você já se deparou com uma situação em que você precisa revisar um Pull Request (PR) muito grande e complexo de um colega? Você sente que levaria muitas horas para entender o código, testar as funcionalidades, verificar os padrões de qualidade e dar um feedback construtivo ou que até poderia se perder em meio a tantos arquivos? Você gostaria de ter uma forma mais rápida e eficaz de fazer isso?&lt;/p&gt;

&lt;p&gt;Se você respondeu, sim, a essas perguntas, então você pode se beneficiar de uma técnica chamada Desk Check. Neste post, vou explicar o que é Desk Check, quais são os seus benefícios e como aplicá-lo.&lt;/p&gt;

&lt;h2&gt;
  
  
  O que é Desk Check?
&lt;/h2&gt;

&lt;p&gt;Desk Check é uma prática de revisão de código que consiste em uma sessão síncrona entre o autor do PR e um ou mais revisores, na qual o autor apresenta o seu trabalho, explica as decisões tomadas, demonstra as funcionalidades implementadas e responde às dúvidas dos revisores.&lt;/p&gt;

&lt;p&gt;O objetivo do Desk Check é facilitar o entendimento do código, validar as soluções propostas, identificar possíveis problemas ou melhorias e acelerar o processo de aprovação do PR.&lt;/p&gt;

&lt;h2&gt;
  
  
  Quais são os benefícios do Desk Check?
&lt;/h2&gt;

&lt;p&gt;Desk Check traz vários benefícios para o time, tanto para o autor quanto para os revisores do PR. Alguns deles são:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Aumenta a qualidade do código&lt;/strong&gt;: ao apresentar o seu trabalho para outras pessoas, o autor pode perceber erros ou inconsistências que passaram despercebidos durante o desenvolvimento, principalmente em relação à lógica de negócio. Além disso, os revisores podem dar sugestões de melhoria ou apontar falhas que o autor não havia considerado.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Reduz o tempo de revisão&lt;/strong&gt;: ao invés de gastar horas lendo e testando um código complexo, os revisores podem ter uma visão geral do PR em uma sessão de Desk Check, que pode durar entre 15 e 30 minutos. Isso permite que eles foquem nos pontos mais importantes e relevantes, sem se perder em detalhes irrelevantes.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Promove a colaboração e o aprendizado&lt;/strong&gt;: ao fazer Desk Check, o time pode trocar conhecimentos, experiências e boas práticas sobre o código e o domínio do problema. Isso ajuda a criar uma cultura de feedback contínuo e a disseminar as melhores soluções entre os membros do time.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Aumenta a confiança e a satisfação&lt;/strong&gt;: ao receber um feedback positivo e construtivo sobre o seu trabalho, o autor se sente mais confiante e motivado. Ao mesmo tempo, os revisores se sentem mais envolvidos e valorizados pelo time.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Como fazer Desk Check em times remotos?
&lt;/h2&gt;

&lt;p&gt;Para fazer Desk Check em times remotos, você vai precisar de algumas ferramentas e algumas dicas. Vejamos quais são elas:&lt;/p&gt;

&lt;h3&gt;
  
  
  Ferramentas
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Uma ferramenta de videoconferência&lt;/strong&gt;: você precisa de uma ferramenta que permita fazer chamadas de vídeo com áudio e compartilhamento de tela entre os participantes da sessão de Desk Check. Algumas opções são Slack, Google Meet ou Microsoft Teams.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Uma ferramenta de gestão de código&lt;/strong&gt;: você vai precisar de uma ferramenta que permita criar, revisar e aprovar PRs. Algumas opções são GitHub, GitLab, Bitbucket ou Azure DevOps.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Uma ferramenta de gestão de tarefas&lt;/strong&gt;: você precisa de uma ferramenta que permita acompanhar o progresso das tarefas relacionadas ao PR. Algumas opções são Jira, Trello, Asana ou Notion.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Dicas
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Prepare-se com antecedência&lt;/strong&gt;: antes de iniciar a sessão de Desk Check, certifique-se de que o seu código está pronto para ser apresentado, sem erros ou bugs. Também verifique se o seu ambiente está configurado corretamente, com as dependências instaladas e os dados atualizados. Além disso, faça um roteiro do que você vai mostrar e explicar durante a apresentação, destacando os pontos mais importantes e relevantes.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Escolha um horário conveniente&lt;/strong&gt;: procure escolher um horário que seja conveniente para todos os participantes, entendendo a agenda de cada um.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Seja claro e conciso&lt;/strong&gt;: durante a apresentação, seja direto, claro e conciso na sua comunicação, evitando o desperdício de tempo dos envolvidos. Explique o que você fez, por que você fez e como você fez. Demonstre as funcionalidades implementadas, mostrando os cenários de sucesso e de falha. Responda às perguntas dos revisores com honestidade e respeito.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Seja receptivo e aberto&lt;/strong&gt;: durante o feedback, seja receptivo e aberto às sugestões e críticas dos revisores. Agradeça pelo tempo e pela atenção dedicados ao seu PR. Não leve as observações para o lado pessoal, mas sim como uma oportunidade de melhoria. Anote os pontos levantados e se comprometa a corrigi-los ou melhorá-los.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Conclusão
&lt;/h2&gt;

&lt;p&gt;Resumindo Desk Check é uma técnica de revisão de código que pode trazer muitos benefícios para o seu time remoto, especialmente para PRs grandes. Ao fazer Desk Check, você pode aumentar a qualidade do código, reduzir o tempo de revisão, promover a colaboração e o aprendizado, e aumentar a confiança e a satisfação do time. &lt;/p&gt;

&lt;p&gt;Mas o Desk Check, não é bala de prata, nem sempre vai ser adequado para todos os times e situações e nem sempre vai substituir uma revisão de código tradicional, então é importante avaliar caso-a-caso. Eu pessoalmente acho uma boa opção para:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;PRs muito grandes:&lt;/strong&gt; que caso fossem ser revisadas linha-a-linha na revisão de código, como tradicionalmente, poderia gerar uma carga cognitiva muito grande ao revisor e assim prejudicar a qualidade da revisão e, portanto, do código.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Complementando revisões normais:&lt;/strong&gt; quando é feito um Desk Check além da revisão de código normal, para avaliar de forma mais abstrata a lógica e as decisões tomadas ou até como uma validação extra após outras etapas de revisão terem sido concluídas.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Espero que este post tenha sido útil para você. Se você gostou, compartilhe com seus colegas de time e deixe um comentário abaixo. Se você tem alguma dúvida ou sugestão, também fique à vontade para entrar em contato.&lt;/p&gt;

&lt;p&gt;Obrigado pela leitura e até a próxima! 😊&lt;/p&gt;

</description>
      <category>productivity</category>
      <category>tutorial</category>
      <category>development</category>
      <category>discuss</category>
    </item>
    <item>
      <title>TypeScript to Check JavaScript</title>
      <dc:creator>Vinícius Cristofari Barbosa</dc:creator>
      <pubDate>Thu, 18 Jan 2024 13:31:50 +0000</pubDate>
      <link>https://forem.com/viniciusnyp/typescript-to-check-javascript-4le6</link>
      <guid>https://forem.com/viniciusnyp/typescript-to-check-javascript-4le6</guid>
      <description>&lt;p&gt;TypeScript is a programming language that adds static types to JavaScript, allowing developers to detect and fix errors at compile time. But did you know that it's also possible to use TypeScript to check JavaScript files? In this post, I'll show you how to do that and what the advantages of this approach are.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why Use TypeScript to Check JavaScript?
&lt;/h2&gt;

&lt;p&gt;JavaScript is a dynamic and flexible language, but that can also bring some problems. For instance, if you try to access a property that doesn't exist on an object or pass an argument of the wrong type to a function, you may get unexpected results or hard-to-debug errors. Additionally, JavaScript lacks native support for documentation tools, refactoring, and autocompletion, which can hinder productivity and code quality.&lt;/p&gt;

&lt;p&gt;TypeScript addresses these issues by adding static types to JavaScript. This means you can specify the type of each variable, parameter, return, and property in your code. This allows the TypeScript compiler to check if your code is correct and consistent, generating type information that can be used by code editors and other tools to enhance the development experience.&lt;/p&gt;

&lt;p&gt;But if TypeScript is so good, why not use it directly instead of JavaScript? Well, there are some possible reasons:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;You have an existing project in JavaScript and don't want or can't migrate the entire code to TypeScript.&lt;/li&gt;
&lt;li&gt;You want to use some JavaScript libraries or features that don't have defined types or are not compatible with TypeScript.&lt;/li&gt;
&lt;li&gt;You prefer the syntax and semantics of JavaScript and don't want to learn or use a new language.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;In these cases, you can use TypeScript to check JavaScript files without changing your language or code. You just need to enable some settings in your &lt;strong&gt;&lt;code&gt;tsconfig.json&lt;/code&gt;&lt;/strong&gt; file and add some special comments in your JavaScript code to indicate variable types. This way, you can enjoy the benefits of TypeScript without losing the flexibility of JavaScript.&lt;/p&gt;

&lt;h2&gt;
  
  
  How to Use TypeScript to Check JavaScript?
&lt;/h2&gt;

&lt;p&gt;To use TypeScript to check JavaScript files, follow these steps:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Install TypeScript globally or locally in your project using the command &lt;strong&gt;&lt;code&gt;npm install -g typescript&lt;/code&gt;&lt;/strong&gt; or &lt;strong&gt;&lt;code&gt;npm install --save-dev typescript&lt;/code&gt;&lt;/strong&gt;.&lt;/li&gt;
&lt;li&gt;Create a &lt;strong&gt;&lt;code&gt;tsconfig.json&lt;/code&gt;&lt;/strong&gt; file at the root of your project with the following content:
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"compilerOptions"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"allowJs"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;//&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;Allows&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;JavaScript&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;files&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"checkJs"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;//&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;Enables&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;checking&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;in&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;JavaScript&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;files&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="nl"&gt;"noEmit"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="w"&gt;   &lt;/span&gt;&lt;span class="err"&gt;//&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;Prevents&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;compiler&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;from&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;emitting&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;files&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;span class="p"&gt;},&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"include"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="s2"&gt;"src"&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;These options tell the TypeScript compiler to allow JavaScript files (&lt;strong&gt;&lt;code&gt;allowJs&lt;/code&gt;&lt;/strong&gt;), check them (&lt;strong&gt;&lt;code&gt;checkJs&lt;/code&gt;&lt;/strong&gt;), and the option (&lt;strong&gt;&lt;code&gt;noEmit&lt;/code&gt;&lt;/strong&gt;) ensures that TypeScript only checks files without generating new compiled files. The &lt;strong&gt;&lt;code&gt;include&lt;/code&gt;&lt;/strong&gt; option specifies which files should be included in the check. You can adjust these options according to your needs.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Add special comments in your JavaScript code to indicate variable types using JSDoc syntax. For example:
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="cm"&gt;/**
 * Adds two numbers.
 * @param {number} a The first number.
 * @param {number} b The second number.
 * @returns {number} The sum of the two numbers.
 */&lt;/span&gt;
&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;add&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;a&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;b&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;a&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;b&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="c1"&gt;// The TypeScript compiler will warn if you pass arguments of the wrong types&lt;/span&gt;
&lt;span class="nf"&gt;add&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;1&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;2&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// Error: Argument of type 'string' is not assignable to parameter of type 'number'.&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;You can find more information on how to use JSDoc to document and type your JavaScript code in the &lt;a href="https://jsdoc.app/"&gt;JSDoc documentation&lt;/a&gt;.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Run the &lt;strong&gt;&lt;code&gt;tsc&lt;/code&gt;&lt;/strong&gt; command to compile your project and check for type errors. You can also use a code editor that supports TypeScript, such as Visual Studio Code, to see real-time errors.&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  What Are the Advantages of Using TypeScript to Check JavaScript?
&lt;/h2&gt;

&lt;p&gt;By using TypeScript to check JavaScript files, you can gain the following advantages:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Increase the quality and reliability of your code by avoiding common errors and inconsistencies caused by dynamic types.&lt;/li&gt;
&lt;li&gt;Enhance code readability and maintainability by documenting variable types and facilitating refactoring.&lt;/li&gt;
&lt;li&gt;Improve productivity and the development experience by leveraging autocomplete, navigation, renaming, and other tools that use type information generated by TypeScript.&lt;/li&gt;
&lt;li&gt;Maintain compatibility and flexibility in your code, allowing you to use any JavaScript feature or library without changing your language or code.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;In this post, you've learned how to use TypeScript to check JavaScript files, why this can be useful, and what the advantages of this approach are. I hope you enjoyed it and that it helps you improve your JavaScript projects. If you have any questions or suggestions, feel free to leave a comment below.&lt;/p&gt;

&lt;p&gt;Thanks for reading! 😊&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>typescript</category>
      <category>tutorial</category>
      <category>node</category>
    </item>
    <item>
      <title>TypeScript para checar JavaScript</title>
      <dc:creator>Vinícius Cristofari Barbosa</dc:creator>
      <pubDate>Thu, 18 Jan 2024 13:28:44 +0000</pubDate>
      <link>https://forem.com/viniciusnyp/typescript-para-checar-javascript-1lb3</link>
      <guid>https://forem.com/viniciusnyp/typescript-para-checar-javascript-1lb3</guid>
      <description>&lt;p&gt;TypeScript é uma linguagem de programação que adiciona tipos estáticos ao JavaScript, permitindo que os desenvolvedores detectem e corrijam erros em tempo de compilação. Mas você sabia que também é possível usar TypeScript para checar arquivos JavaScript? Neste post, vou mostrar como fazer isso e quais são as vantagens dessa abordagem.&lt;/p&gt;

&lt;h2&gt;
  
  
  Por que usar TypeScript para checar JavaScript?
&lt;/h2&gt;

&lt;p&gt;JavaScript é uma linguagem dinâmica e flexível, mas isso também pode trazer alguns problemas. Por exemplo, se você tentar acessar uma propriedade que não existe em um objeto, ou passar um argumento de um tipo errado para uma função, você pode obter resultados inesperados ou erros difíceis de depurar. Além disso, JavaScript não tem suporte nativo para ferramentas de documentação, refatoração e autocompletar, o que pode prejudicar a produtividade e a qualidade do código.&lt;/p&gt;

&lt;p&gt;TypeScript resolve esses problemas ao adicionar tipos estáticos ao JavaScript, o que significa que você pode especificar o tipo de cada variável, parâmetro, retorno e propriedade em seu código. Isso permite que o compilador TypeScript verifique se o seu código está correto e consistente, e também gera informações de tipo que podem ser usadas por editores de código e outras ferramentas para melhorar a experiência de desenvolvimento.&lt;/p&gt;

&lt;p&gt;Mas se TypeScript é tão bom, por que não usar TypeScript diretamente em vez de JavaScript? Bem, existem algumas razões possíveis para isso:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Tem um projeto existente em JavaScript e não quer ou não pode migrar todo o código para TypeScript.&lt;/li&gt;
&lt;li&gt;Quer usar algumas bibliotecas ou recursos do JavaScript que não têm tipos definidos ou compatíveis com TypeScript.&lt;/li&gt;
&lt;li&gt;Prefere a sintaxe e a semântica do JavaScript e não quer aprender ou usar uma nova linguagem.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Nesses casos, você pode usar TypeScript para checar arquivos JavaScript sem precisar mudar a sua linguagem ou o seu código. Você só precisa habilitar algumas configurações no seu arquivo &lt;strong&gt;&lt;code&gt;tsconfig.json&lt;/code&gt;&lt;/strong&gt; e adicionar alguns comentários especiais no seu código JavaScript para indicar os tipos das variáveis. Dessa forma, você pode aproveitar os benefícios do TypeScript sem perder a flexibilidade do JavaScript.&lt;/p&gt;

&lt;h2&gt;
  
  
  Como usar TypeScript para checar JavaScript?
&lt;/h2&gt;

&lt;p&gt;Para usar TypeScript para checar arquivos JavaScript, você precisa seguir os seguintes passos:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Instale o TypeScript globalmente ou localmente no seu projeto usando o comando &lt;strong&gt;&lt;code&gt;npm install -g typescript&lt;/code&gt;&lt;/strong&gt; ou &lt;strong&gt;&lt;code&gt;npm install --save-dev typescript&lt;/code&gt;&lt;/strong&gt;.&lt;/li&gt;
&lt;li&gt;Crie um arquivo &lt;strong&gt;&lt;code&gt;tsconfig.json&lt;/code&gt;&lt;/strong&gt; na raiz do seu projeto com o seguinte conteúdo:
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"compilerOptions"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"allowJs"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;//Permite&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;arquivos&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;JavaScript&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"checkJs"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;//Habilita&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;a&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;checagem&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;em&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;arquivos&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;JavaScript&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="nl"&gt;"noEmit"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="w"&gt;   &lt;/span&gt;&lt;span class="err"&gt;//Impede&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;que&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;arquivos&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;sejam&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;emitidos&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;pelo&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;compilador&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;span class="p"&gt;},&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"include"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="s2"&gt;"src"&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;

&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Essas opções indicam ao compilador TypeScript que ele deve permitir arquivos JavaScript (&lt;strong&gt;&lt;code&gt;allowJs&lt;/code&gt;&lt;/strong&gt;) e checá-los (&lt;strong&gt;&lt;code&gt;checkJs&lt;/code&gt;&lt;/strong&gt;), a opção (&lt;strong&gt;&lt;code&gt;noEmit&lt;/code&gt;&lt;/strong&gt;), garante que o TypeScript irá apenas checar os arquivos e não gerar novos arquivos compilados. A opção &lt;strong&gt;&lt;code&gt;include&lt;/code&gt;&lt;/strong&gt; especifica quais arquivos devem ser incluídos na verificação. Você pode ajustar essas opções conforme as suas necessidades.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Adicione comentários especiais no seu código JavaScript para indicar os tipos das variáveis usando a sintaxe JSDoc. Por exemplo:
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="cm"&gt;/**
 * Soma dois números.
 * @param {number} a O primeiro número.
 * @param {number} b O segundo número.
 * @returns {number} A soma dos dois números.
 */&lt;/span&gt;
&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;soma&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;a&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;b&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;a&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;b&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="c1"&gt;// O compilador TypeScript vai avisar se você passar argumentos de tipos errados&lt;/span&gt;
&lt;span class="nf"&gt;soma&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;1&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;2&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// Erro: Argumento do tipo 'string' não é atribuível ao parâmetro do tipo 'number'.&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Você pode encontrar mais informações sobre como usar JSDoc para documentar e tipar o seu código JavaScript na &lt;a href="https://jsdoc.app/"&gt;documentação do JSDoc&lt;/a&gt;.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Execute o comando &lt;strong&gt;&lt;code&gt;tsc&lt;/code&gt;&lt;/strong&gt; para compilar o seu projeto e verificar se há erros de tipo. Você também pode usar um editor de código que suporte TypeScript, como Visual Studio Code, para ver os erros em tempo real.&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  Quais são as vantagens de usar TypeScript para checar JavaScript?
&lt;/h2&gt;

&lt;p&gt;Ao usar TypeScript para checar arquivos JavaScript, você pode obter as seguintes vantagens:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Aumentar a qualidade e a confiabilidade do seu código, evitando erros comuns e inconsistências causados por tipos dinâmicos.&lt;/li&gt;
&lt;li&gt;Aprimorar a legibilidade e a manutenibilidade do seu código, documentando os tipos das variáveis e facilitando a refatoração.&lt;/li&gt;
&lt;li&gt;Melhorar a produtividade e a experiência de desenvolvimento, aproveitando as ferramentas de autocompletar, navegação, renomeação e outras que usam as informações de tipo geradas pelo TypeScript.&lt;/li&gt;
&lt;li&gt;Manter a compatibilidade e a flexibilidade do seu código, podendo usar qualquer recurso ou biblioteca do JavaScript sem precisar mudar a sua linguagem, ou o seu código.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Conclusão
&lt;/h2&gt;

&lt;p&gt;Neste post, você aprendeu como usar TypeScript para checar arquivos JavaScript, porque isso pode ser útil e quais são as vantagens dessa abordagem. Espero que você tenha gostado e que isso te ajude a melhorar os seus projetos em JavaScript. Se você tiver alguma dúvida ou sugestão, deixe um comentário abaixo. &lt;/p&gt;

&lt;p&gt;Obrigado pela leitura! 😊&lt;/p&gt;

</description>
      <category>tutorial</category>
      <category>javascript</category>
      <category>typescript</category>
      <category>node</category>
    </item>
    <item>
      <title>Como usar um tsconfig.json local para personalizar a checagem do TypeScript sem influenciar seus colegas</title>
      <dc:creator>Vinícius Cristofari Barbosa</dc:creator>
      <pubDate>Thu, 18 Jan 2024 12:17:29 +0000</pubDate>
      <link>https://forem.com/viniciusnyp/como-usar-um-tsconfigjson-local-para-personalizar-a-checagem-do-typescript-sem-atrapalhar-seus-colegas-97c</link>
      <guid>https://forem.com/viniciusnyp/como-usar-um-tsconfigjson-local-para-personalizar-a-checagem-do-typescript-sem-atrapalhar-seus-colegas-97c</guid>
      <description>&lt;h1&gt;
  
  
  Como usar um tsconfig.json local para personalizar a checagem do TypeScript sem influenciar seus colegas
&lt;/h1&gt;

&lt;p&gt;Sabemos que o TypeScript é uma linguagem de programação que adiciona tipos estáticos ao JavaScript, permitindo que os desenvolvedores detectem erros em tempo de compilação e escrevam código mais legível e seguro. No entanto, nem todos os desenvolvedores concordam com as mesmas regras de checagem do TypeScript ou até mesmo se ele deve ou não estar presente no projeto, portanto, pode ser útil ter um conjunto de regras personalizadas para as suas próprias preferências.&lt;/p&gt;

&lt;p&gt;Neste post, vou mostrar como você pode usar um arquivo tsconfig.json local para aplicar suas próprias regras à checagem do TypeScript, sem afetar as regras dos seus colegas de trabalho, utilizando um arquivo .gitignore global.&lt;/p&gt;

&lt;h2&gt;
  
  
  O que é um tsconfig.json?
&lt;/h2&gt;

&lt;p&gt;Um arquivo tsconfig.json é um arquivo JSON que especifica as opções de compilação do TypeScript para um projeto. Ele permite que você configure aspectos como o nível de rigor da checagem de tipos, os módulos que você quer usar, os caminhos dos arquivos de entrada e saída, e muito mais. Você pode ver a lista completa das opções disponíveis na &lt;a href="https://www.typescriptlang.org/pt/docs/handbook/tsconfig-json.html#vis%C3%A3o-geral"&gt;documentação oficial do TypeScript&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Um ou mais arquivos tsconfig.json podem ser colocado na raiz do seu projeto ou em qualquer subdiretório dele. O TypeScript procura um arquivo tsconfig.json mais próximo do arquivo que está sendo compilado, e usa as opções nele definidas. Se nenhum arquivo tsconfig.json for encontrado, o TypeScript vai usar as opções padrão.&lt;/p&gt;

&lt;h2&gt;
  
  
  Por que usar um tsconfig.json local?
&lt;/h2&gt;

&lt;p&gt;Às vezes, você pode querer ter um conjunto de opções diferente do arquivo tsconfig.json padrão do seu projeto. Por exemplo, você pode querer habilitar ou desabilitar algumas regras de checagem de tipos, alterar o alvo da compilação, ou experimentar novas funcionalidades do TypeScript.&lt;/p&gt;

&lt;p&gt;No entanto, se você simplesmente modificar o arquivo tsconfig.json existente no seu projeto, você pode acabar causando problemas para os seus colegas de trabalho. Eles podem não concordar com as suas mudanças, ou podem ter dificuldades para compilar ou executar o código com as novas opções.&lt;/p&gt;

&lt;p&gt;Uma solução para esse problema é usar um arquivo tsconfig.json local, que só afeta a sua própria máquina e não é compartilhado com os outros desenvolvedores. Dessa forma, você pode personalizar a checagem do TypeScript sem interferir no trabalho dos outros.&lt;/p&gt;

&lt;h2&gt;
  
  
  Como usar um tsconfig.json local?
&lt;/h2&gt;

&lt;p&gt;Para usar um arquivo tsconfig.json local, você precisa seguir alguns passos simples:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Crie um arquivo tsconfig.local.json na raiz do seu projeto. Você pode copiar o conteúdo do arquivo tsconfig.json padrão do seu projeto e modificá-lo conforme a sua preferência, simplesmente &lt;a href="https://www.typescriptlang.org/tsconfig#extends"&gt;estendê-lo&lt;/a&gt;, ou criar um novo arquivo com as opções que você quer usar.&lt;/li&gt;
&lt;li&gt;Adicione o nome do seu arquivo tsconfig.json local ao arquivo .gitignore global do seu sistema. Um arquivo .gitignore global é um arquivo que especifica quais arquivos ou diretórios devem ser ignorados pelo Git em todos os seus repositórios locais. Caso você não possua um, basta criar um arquivo chamado .gitignore em qualquer pasta do sistema e rodar o comando &lt;code&gt;git config --global core.excludesfile &amp;lt;path-do-arquivo-criado&amp;gt;&lt;/code&gt;, por exemplo, caso eu tenha criado o arquivo .gitignore na pasta home do sistema eu poderia rodar &lt;code&gt;git config --global core.excludesfile ~/.gitignore&lt;/code&gt;. Ao adicionar o nome do seu arquivo tsconfig.json local ao arquivo .gitignore global, você evita que ele seja rastreado ou enviado para o repositório remoto de todos os seus projetos.&lt;/li&gt;
&lt;li&gt;Use o seu editor de código favorito ou a &lt;a href="https://www.typescriptlang.org/docs/handbook/compiler-options.html#using-the-cli"&gt;linha de comando&lt;/a&gt; para checar os seus arquivos TypeScript com o seu arquivo tsconfig.json local. Você pode especificar qual arquivo tsconfig.json você quer usar com a opção &lt;code&gt;--project&lt;/code&gt; ou &lt;code&gt;-p&lt;/code&gt; do comando &lt;code&gt;tsc&lt;/code&gt;. Por exemplo, se o seu arquivo tsconfig.json pessoal se chama tsconfig.local.json, você pode compilar os seus arquivos TypeScript com o comando &lt;code&gt;tsc -p tsconfig.local.json&lt;/code&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Pronto! Agora você pode usar um arquivo tsconfig.json local para aplicar suas próprias regras à checagem do TypeScript, sem afetar as regras dos seus colegas de trabalho, utilizando um arquivo .gitignore global. Essa mesma lógica pode ser aplicada a situações similares, como regras do &lt;a href="https://eslint.org/"&gt;ESLint&lt;/a&gt; ou &lt;a href="https://prettier.io/"&gt;Prettier&lt;/a&gt;, etc.&lt;/p&gt;

&lt;p&gt;Espero que este post tenha sido útil para você. Se você tiver alguma dúvida ou sugestão, deixe um comentário abaixo. &lt;/p&gt;

&lt;p&gt;Obrigado pela leitura e até a próxima! 😊&lt;/p&gt;

</description>
      <category>tutorial</category>
      <category>typescript</category>
      <category>productivity</category>
      <category>javascript</category>
    </item>
    <item>
      <title>How to use a local tsconfig.json to customize TypeScript checking without bothering your colleagues</title>
      <dc:creator>Vinícius Cristofari Barbosa</dc:creator>
      <pubDate>Thu, 18 Jan 2024 12:17:20 +0000</pubDate>
      <link>https://forem.com/viniciusnyp/how-to-use-a-local-tsconfigjson-to-customize-typescript-checking-without-bothering-your-colleagues-2n53</link>
      <guid>https://forem.com/viniciusnyp/how-to-use-a-local-tsconfigjson-to-customize-typescript-checking-without-bothering-your-colleagues-2n53</guid>
      <description>&lt;p&gt;We know that TypeScript is a programming language that adds static types to JavaScript, enabling developers to catch errors at compile time and write more readable and secure code. However, not all developers agree on the same TypeScript checking rules or even whether it should be present in the project. Therefore, it can be useful to have a set of custom rules for your preferences.&lt;/p&gt;

&lt;p&gt;In this post, I'll show you how you can use a local tsconfig.json file to apply your own rules to TypeScript checking without affecting your colleagues' rules, using a global .gitignore file.&lt;/p&gt;

&lt;h2&gt;
  
  
  What is a tsconfig.json?
&lt;/h2&gt;

&lt;p&gt;A tsconfig.json file is a JSON file that specifies TypeScript compilation options for a project. It allows you to configure aspects such as the level of type-checking strictness, the modules you want to use, input and output file paths, and more. You can see the complete list of available options in the &lt;a href="https://www.typescriptlang.org/docs/handbook/tsconfig-json.html#overview"&gt;official TypeScript documentation&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;One or more tsconfig.json files can be placed in the root of your project or any of its subdirectories. TypeScript looks for the nearest tsconfig.json file to the file being compiled and uses the options defined in it. If no tsconfig.json file is found, TypeScript uses the default options.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why use a local tsconfig.json?
&lt;/h2&gt;

&lt;p&gt;Sometimes, you may want a different set of options than the default tsconfig.json file in your project. For example, you might want to enable or disable certain type-checking rules, change the compilation target, or experiment with new TypeScript features.&lt;/p&gt;

&lt;p&gt;However, if you simply modify the existing tsconfig.json file in your project, you may end up causing issues for your colleagues. They may not agree with your changes, or they may have difficulty compiling or running the code with the new options.&lt;/p&gt;

&lt;p&gt;A solution to this problem is to use a local tsconfig.json file, which only affects your machine and is not shared with other developers. This way, you can customize TypeScript checking without interfering with others' work.&lt;/p&gt;

&lt;h2&gt;
  
  
  How to use a local tsconfig.json?
&lt;/h2&gt;

&lt;p&gt;To use a local tsconfig.json file, you need to follow a few simple steps:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Create a tsconfig.local.json file in the root of your project. You can copy the content of the default tsconfig.json file in your project and modify it according to your preference, by simply &lt;a href="https://www.typescriptlang.org/tsconfig#extends"&gt;extending it&lt;/a&gt;, or create a new file with the options you want to use.&lt;/li&gt;
&lt;li&gt;Add the name of your local tsconfig.json file to the global .gitignore file on your system. A global .gitignore file specifies which files or directories should be ignored by Git in all your local repositories. If you don't have one, just create a file named .gitignore in any system folder and run the command &lt;code&gt;git config --global core.excludesfile &amp;lt;path-to-created-file&amp;gt;&lt;/code&gt;. For example, if I created the .gitignore file in the home folder of the system, I could run &lt;code&gt;git config --global core.excludesfile ~/.gitignore&lt;/code&gt;. By adding the name of your local tsconfig.json file to the global .gitignore file, you prevent it from being tracked or pushed to the remote repository for all your projects.&lt;/li&gt;
&lt;li&gt;Use your favorite code editor or the &lt;a href="https://www.typescriptlang.org/docs/handbook/compiler-options.html#using-the-cli"&gt;command line&lt;/a&gt; to check your TypeScript files with your local tsconfig.json file. You can specify which tsconfig.json file you want to use with the &lt;code&gt;--project&lt;/code&gt; or &lt;code&gt;-p&lt;/code&gt; option of the &lt;code&gt;tsc&lt;/code&gt; command. For example, if your tsconfig.json file is named tsconfig.local.json, you can compile your TypeScript files with the command &lt;code&gt;tsc -p tsconfig.local.json&lt;/code&gt;.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;There you go! Now you can use a local tsconfig.json file to apply your own rules to TypeScript checking without affecting your colleagues' rules, using a global .gitignore file. The same logic can be applied to similar situations, such as rules for &lt;a href="https://eslint.org/"&gt;ESLint&lt;/a&gt; or &lt;a href="https://prettier.io/"&gt;Prettier&lt;/a&gt;, etc.&lt;/p&gt;

&lt;p&gt;I hope this post has been helpful to you. If you have any questions or suggestions, feel free to leave a comment below.&lt;/p&gt;

&lt;p&gt;Thanks for reading, and until next time! 😊&lt;/p&gt;

</description>
      <category>typescript</category>
      <category>productivity</category>
      <category>javascript</category>
      <category>tutorial</category>
    </item>
  </channel>
</rss>
