<?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>DEV Community: Vasia</title>
    <description>The latest articles on DEV Community by Vasia (@sika_vasia_c04f8b19da4964).</description>
    <link>https://dev.to/sika_vasia_c04f8b19da4964</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.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4003233%2F1124d4d9-23c2-4837-995a-ace578312089.png</url>
      <title>DEV Community: Vasia</title>
      <link>https://dev.to/sika_vasia_c04f8b19da4964</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/sika_vasia_c04f8b19da4964"/>
    <language>en</language>
    <item>
      <title>Things I Wish I Knew When Starting TypeScript</title>
      <dc:creator>Vasia</dc:creator>
      <pubDate>Tue, 29 Sep 2026 04:09:23 +0000</pubDate>
      <link>https://dev.to/sika_vasia_c04f8b19da4964/things-i-wish-i-knew-when-starting-typescript-40e9</link>
      <guid>https://dev.to/sika_vasia_c04f8b19da4964/things-i-wish-i-knew-when-starting-typescript-40e9</guid>
      <description>&lt;p&gt;When I first started using TypeScript, I thought it was basically JavaScript with types.&lt;/p&gt;

&lt;p&gt;Add a few &lt;code&gt;string&lt;/code&gt; and &lt;code&gt;number&lt;/code&gt; annotations, fix some red errors, and you are done.&lt;/p&gt;

&lt;p&gt;Well... not exactly.&lt;/p&gt;

&lt;p&gt;The more I used TypeScript in real frontend projects, the more I realized that the difficult part was not learning the syntax. The difficult part was learning how to think about types.&lt;/p&gt;

&lt;p&gt;After working with TypeScript for a while, there are quite a few things I wish someone had told me when I was starting.&lt;/p&gt;

&lt;p&gt;So here they are.&lt;/p&gt;

&lt;h2&gt;
  
  
  1. You do not need to type everything
&lt;/h2&gt;

&lt;p&gt;One of my first mistakes was trying to add types everywhere.&lt;/p&gt;

&lt;p&gt;I would write things like:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;John&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;age&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;25&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;isLoggedIn&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;boolean&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;There is nothing wrong with this, but TypeScript already knows these types.&lt;/p&gt;

&lt;p&gt;You can simply write:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;name&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;John&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;age&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;25&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;isLoggedIn&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;TypeScript can infer the types automatically.&lt;/p&gt;

&lt;p&gt;This is one of the first things I learned: good TypeScript code is not code with the maximum number of type annotations.&lt;/p&gt;

&lt;p&gt;It is code where the types provide useful information.&lt;/p&gt;

&lt;p&gt;For example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;user&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;John&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;age&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;25&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;TypeScript already understands that &lt;code&gt;user.name&lt;/code&gt; is a string and &lt;code&gt;user.age&lt;/code&gt; is a number.&lt;/p&gt;

&lt;p&gt;No need to repeat information the compiler already knows.&lt;/p&gt;

&lt;h2&gt;
  
  
  2. &lt;code&gt;any&lt;/code&gt; is usually an escape hatch, not a solution
&lt;/h2&gt;

&lt;p&gt;When TypeScript complains, it is tempting to write:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;user&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;any&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;And suddenly the error disappears.&lt;/p&gt;

&lt;p&gt;Problem solved, right?&lt;/p&gt;

&lt;p&gt;Not really.&lt;/p&gt;

&lt;p&gt;&lt;code&gt;any&lt;/code&gt; basically tells TypeScript:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Trust me. I know what I'm doing.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Sometimes you genuinely need it, especially when dealing with old JavaScript code or poorly typed third-party libraries.&lt;/p&gt;

&lt;p&gt;But if you use &lt;code&gt;any&lt;/code&gt; everywhere, you lose many of the benefits of TypeScript.&lt;/p&gt;

&lt;p&gt;Instead of:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;getUser&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;any&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;data&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;try to describe what you actually expect:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;type&lt;/span&gt; &lt;span class="nx"&gt;User&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;age&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;

&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;getUser&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;user&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;User&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;user&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now TypeScript can help you.&lt;/p&gt;

&lt;p&gt;And that is really the point.&lt;/p&gt;

&lt;h2&gt;
  
  
  3. Types are documentation
&lt;/h2&gt;

&lt;p&gt;This was a big mindset change for me.&lt;/p&gt;

&lt;p&gt;A good type can explain code without requiring a comment.&lt;/p&gt;

&lt;p&gt;Compare this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;updateUser&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;user&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;any&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;options&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;any&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="c1"&gt;// ...&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;with:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;type&lt;/span&gt; &lt;span class="nx"&gt;User&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="na"&gt;id&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;email&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;

&lt;span class="kd"&gt;type&lt;/span&gt; &lt;span class="nx"&gt;UpdateUserOptions&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;?:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;email&lt;/span&gt;&lt;span class="p"&gt;?:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;

&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;updateUser&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;user&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;User&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;options&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;UpdateUserOptions&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="c1"&gt;// ...&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;I can understand much more about the function before reading its implementation.&lt;/p&gt;

&lt;p&gt;Types become part of the API of your code.&lt;/p&gt;

&lt;p&gt;This is especially useful when working on a team.&lt;/p&gt;

&lt;h2&gt;
  
  
  4. Learn &lt;code&gt;type&lt;/code&gt; and &lt;code&gt;interface&lt;/code&gt;, but do not overthink them
&lt;/h2&gt;

&lt;p&gt;When I started TypeScript, I spent way too much time wondering:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Should I use &lt;code&gt;type&lt;/code&gt; or &lt;code&gt;interface&lt;/code&gt;?&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;The short answer is: learn both, understand their differences, and then follow the conventions of your project.&lt;/p&gt;

&lt;p&gt;For many frontend use cases, either works perfectly well.&lt;/p&gt;

&lt;p&gt;For example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;type&lt;/span&gt; &lt;span class="nx"&gt;User&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="na"&gt;id&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;And:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kr"&gt;interface&lt;/span&gt; &lt;span class="nx"&gt;User&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;id&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Both describe an object with the same shape.&lt;/p&gt;

&lt;p&gt;There are differences between &lt;code&gt;type&lt;/code&gt; and &lt;code&gt;interface&lt;/code&gt;, especially around declaration merging and extending types, but you do not need to memorize every detail before building your first application.&lt;/p&gt;

&lt;p&gt;Start writing code.&lt;/p&gt;

&lt;p&gt;You will learn where the differences matter.&lt;/p&gt;

&lt;h2&gt;
  
  
  5. Unions are incredibly useful
&lt;/h2&gt;

&lt;p&gt;One of my favorite TypeScript features is the union type.&lt;/p&gt;

&lt;p&gt;For example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;type&lt;/span&gt; &lt;span class="nx"&gt;Status&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;loading&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="o"&gt;|&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;success&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="o"&gt;|&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;error&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now this is allowed:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;status&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;Status&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;loading&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;But this is not:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;status&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;Status&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;finished&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This becomes particularly useful in frontend applications.&lt;/p&gt;

&lt;p&gt;For example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;type&lt;/span&gt; &lt;span class="nx"&gt;RequestState&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt;
  &lt;span class="o"&gt;|&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;status&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;loading&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt;
  &lt;span class="o"&gt;|&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;status&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;success&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nl"&gt;data&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;User&lt;/span&gt;&lt;span class="p"&gt;[]&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt;
  &lt;span class="o"&gt;|&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;status&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;error&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nl"&gt;message&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt; &lt;span class="p"&gt;};&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now your application has an explicit model for its different states.&lt;/p&gt;

&lt;p&gt;You cannot accidentally access &lt;code&gt;data&lt;/code&gt; while the request is still loading.&lt;/p&gt;

&lt;p&gt;This makes your code easier to reason about.&lt;/p&gt;

&lt;h2&gt;
  
  
  6. TypeScript will not save you from bad logic
&lt;/h2&gt;

&lt;p&gt;This is another important lesson.&lt;/p&gt;

&lt;p&gt;TypeScript checks your types.&lt;/p&gt;

&lt;p&gt;It does not check whether your business logic makes sense.&lt;/p&gt;

&lt;p&gt;This code can be perfectly valid TypeScript:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;calculateDiscount&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;price&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;discount&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;number&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;price&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;discount&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The types are correct.&lt;/p&gt;

&lt;p&gt;The logic might still be completely wrong.&lt;/p&gt;

&lt;p&gt;TypeScript is a tool that helps you catch certain categories of mistakes. It is not a replacement for testing, code review, debugging, or thinking.&lt;/p&gt;

&lt;p&gt;You still need to understand what your application is supposed to do.&lt;/p&gt;

&lt;h2&gt;
  
  
  7. Learn to read error messages
&lt;/h2&gt;

&lt;p&gt;At first, TypeScript errors can look terrifying.&lt;/p&gt;

&lt;p&gt;You might see a huge wall of red text and immediately start searching Google.&lt;/p&gt;

&lt;p&gt;I definitely did.&lt;/p&gt;

&lt;p&gt;But over time, I learned that the important part is usually much smaller than the entire error message.&lt;/p&gt;

&lt;p&gt;For example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Type 'string | undefined' is not assignable to type 'string'.
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The important part is:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;string | undefined
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;You have a value that might be &lt;code&gt;undefined&lt;/code&gt;, but the function expects a guaranteed string.&lt;/p&gt;

&lt;p&gt;Instead of fighting the compiler, ask:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Why can this value be undefined?&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Maybe the correct solution is:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="o"&gt;!&lt;/span&gt;&lt;span class="nx"&gt;name&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="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nf"&gt;sendName&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Or perhaps the function should accept &lt;code&gt;undefined&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;The compiler is often pointing at a real design question.&lt;/p&gt;

&lt;h2&gt;
  
  
  8. &lt;code&gt;strict&lt;/code&gt; mode is your friend
&lt;/h2&gt;

&lt;p&gt;If you are starting a new TypeScript project, you will probably encounter this:&lt;br&gt;
&lt;/p&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;"strict"&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="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;At first, strict mode can feel annoying.&lt;/p&gt;

&lt;p&gt;You will get more errors.&lt;/p&gt;

&lt;p&gt;But those errors are often useful.&lt;/p&gt;

&lt;p&gt;For example, strict null checking forces you to think about values that might not exist.&lt;/p&gt;

&lt;p&gt;Instead of assuming:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="nx"&gt;user&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;toUpperCase&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;you might need to consider:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;user&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;user&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;toUpperCase&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This might feel like extra work.&lt;/p&gt;

&lt;p&gt;In a real application, though, handling these cases can prevent actual runtime bugs.&lt;/p&gt;

&lt;h2&gt;
  
  
  9. Do not fight TypeScript just to make an error disappear
&lt;/h2&gt;

&lt;p&gt;This is probably one of the biggest lessons I learned.&lt;/p&gt;

&lt;p&gt;When TypeScript gives you an error, there are several ways to make it disappear.&lt;/p&gt;

&lt;p&gt;Some are good.&lt;/p&gt;

&lt;p&gt;Some are just hiding the problem.&lt;/p&gt;

&lt;p&gt;For example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;value&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;something&lt;/span&gt; &lt;span class="k"&gt;as&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Type assertions can be useful, but they do not magically change the value at runtime.&lt;/p&gt;

&lt;p&gt;You are telling TypeScript:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;I know more about this value than you do.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;That might be true.&lt;/p&gt;

&lt;p&gt;But if you are using &lt;code&gt;as&lt;/code&gt; everywhere, it is worth asking whether your types are modeling the application correctly.&lt;/p&gt;

&lt;h2&gt;
  
  
  10. TypeScript makes refactoring much nicer
&lt;/h2&gt;

&lt;p&gt;This is one of the reasons I ended up really liking TypeScript.&lt;/p&gt;

&lt;p&gt;Imagine you have a property:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;type&lt;/span&gt; &lt;span class="nx"&gt;User&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="na"&gt;username&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Then your application grows and you decide that &lt;code&gt;username&lt;/code&gt; should become &lt;code&gt;displayName&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;In a large JavaScript project, finding every place that uses &lt;code&gt;username&lt;/code&gt; can be painful.&lt;/p&gt;

&lt;p&gt;With TypeScript and a good editor, you can rename the property and let the compiler show you where things need to change.&lt;/p&gt;

&lt;p&gt;That is incredibly useful.&lt;/p&gt;

&lt;p&gt;For me, TypeScript became more valuable as projects became larger.&lt;/p&gt;

&lt;h2&gt;
  
  
  11. You do not need to understand everything before using it
&lt;/h2&gt;

&lt;p&gt;This is probably the most important thing I wish I knew.&lt;/p&gt;

&lt;p&gt;You do not need to understand:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;advanced generics&lt;/li&gt;
&lt;li&gt;conditional types&lt;/li&gt;
&lt;li&gt;mapped types&lt;/li&gt;
&lt;li&gt;template literal types&lt;/li&gt;
&lt;li&gt;complicated utility types&lt;/li&gt;
&lt;li&gt;every compiler option&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;before building a TypeScript application.&lt;/p&gt;

&lt;p&gt;Start with the basics:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;string
number
boolean
array
object
type
interface
union
optional properties
function types
generics
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Then learn advanced features when you actually encounter a problem that requires them.&lt;/p&gt;

&lt;p&gt;You will remember them much better that way.&lt;/p&gt;

&lt;h2&gt;
  
  
  12. TypeScript is a tool, not the goal
&lt;/h2&gt;

&lt;p&gt;It is easy to fall into the TypeScript rabbit hole.&lt;/p&gt;

&lt;p&gt;You start with:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;How do I type this React component?&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Two hours later, you are reading about conditional types and wondering what happened to your afternoon.&lt;/p&gt;

&lt;p&gt;I have been there.&lt;/p&gt;

&lt;p&gt;Remember why you are using TypeScript in the first place.&lt;/p&gt;

&lt;p&gt;The goal is not to create the most impressive type definitions.&lt;/p&gt;

&lt;p&gt;The goal is to build software that is easier to understand, maintain, refactor, and change.&lt;/p&gt;

&lt;p&gt;Sometimes a simple type is the best type.&lt;/p&gt;

&lt;h2&gt;
  
  
  A simple TypeScript learning path
&lt;/h2&gt;

&lt;p&gt;If I were starting TypeScript again today, I would learn it roughly like this:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Basic types&lt;/li&gt;
&lt;li&gt;Type inference&lt;/li&gt;
&lt;li&gt;Objects and arrays&lt;/li&gt;
&lt;li&gt;Functions&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;type&lt;/code&gt; and &lt;code&gt;interface&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;Union and intersection types&lt;/li&gt;
&lt;li&gt;Optional properties&lt;/li&gt;
&lt;li&gt;Generics&lt;/li&gt;
&lt;li&gt;Utility types&lt;/li&gt;
&lt;li&gt;Narrowing and type guards&lt;/li&gt;
&lt;li&gt;Advanced types when needed&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;And most importantly, I would build something while learning.&lt;/p&gt;

&lt;p&gt;A small React application with a few API calls will teach you more than reading TypeScript documentation for days without writing code.&lt;/p&gt;

&lt;h2&gt;
  
  
  A few TypeScript habits I wish I had earlier
&lt;/h2&gt;

&lt;p&gt;Here are the rules I try to follow now:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Let TypeScript infer obvious types.&lt;/li&gt;
&lt;li&gt;Avoid &lt;code&gt;any&lt;/code&gt; unless there is a good reason.&lt;/li&gt;
&lt;li&gt;Use types to describe real application concepts.&lt;/li&gt;
&lt;li&gt;Keep types close to the code that uses them when that makes sense.&lt;/li&gt;
&lt;li&gt;Do not use complicated types just to show off.&lt;/li&gt;
&lt;li&gt;Read compiler errors instead of immediately disabling them.&lt;/li&gt;
&lt;li&gt;Use strict mode for serious projects.&lt;/li&gt;
&lt;li&gt;Model different application states explicitly.&lt;/li&gt;
&lt;li&gt;Use your editor's TypeScript features. They are extremely useful.&lt;/li&gt;
&lt;li&gt;Learn advanced TypeScript when you actually need them.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  If you are learning TypeScript for your next frontend job
&lt;/h2&gt;

&lt;p&gt;There is another reason TypeScript is worth learning: it is a common part of modern frontend development.&lt;/p&gt;

&lt;p&gt;But when you are applying for jobs, simply writing "I know TypeScript" on your resume is not very interesting.&lt;/p&gt;

&lt;p&gt;It is better to talk about how you used it.&lt;/p&gt;

&lt;p&gt;For example:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Built a React application with TypeScript, using typed API responses, reusable component props, union types, and strict type checking to reduce runtime errors.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;That tells a much better story.&lt;/p&gt;

&lt;h3&gt;
  
  
  Cover letter prompt for a frontend developer
&lt;/h3&gt;

&lt;p&gt;If you are using AI to help write a cover letter, you can start with this prompt:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Write a friendly and natural cover letter for a frontend developer applying for a TypeScript/React position.

My experience includes:
- [X years of frontend development]
- React
- TypeScript
- JavaScript
- [Other technologies]
- [Relevant project or achievement]

Make the letter sound like a real developer wrote it. Keep it concise, confident, and conversational. Avoid generic phrases, exaggerated claims, and corporate buzzwords. Focus on how I build maintainable user interfaces, work with other developers, and solve practical problems.

Do not invent experience or skills that I have not mentioned.
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  A prompt for improving your existing cover letter
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Rewrite my cover letter for a frontend developer position.

Keep my original experience and facts exactly the same. Make the English sound natural and confident, like a real frontend developer wrote it.

Remove generic corporate language and unnecessary buzzwords. Make the letter concise and specific. Highlight my experience with React, TypeScript, frontend architecture, debugging, and building user-facing features where relevant.

Do not invent experience, projects, or skills.

Here is my cover letter:

[PASTE YOUR COVER LETTER]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Final thoughts
&lt;/h2&gt;

&lt;p&gt;I used to think becoming good at TypeScript meant knowing more TypeScript features.&lt;/p&gt;

&lt;p&gt;Now I think it is more about knowing when to use them.&lt;/p&gt;

&lt;p&gt;The best TypeScript code I have worked with is usually not the most complicated code. It is code where the types make the application easier to understand.&lt;/p&gt;

&lt;p&gt;If you are just starting, do not worry about mastering everything.&lt;/p&gt;

&lt;p&gt;Write some code.&lt;/p&gt;

&lt;p&gt;Break things.&lt;/p&gt;

&lt;p&gt;Read the errors.&lt;/p&gt;

&lt;p&gt;Fix them.&lt;/p&gt;

&lt;p&gt;Repeat.&lt;/p&gt;

&lt;p&gt;Eventually, TypeScript stops feeling like something that is getting in your way and starts feeling like another tool sitting next to your editor, browser, and Git.&lt;/p&gt;

&lt;p&gt;And that is probably the point where you start enjoying it. &lt;/p&gt;

</description>
      <category>webdev</category>
      <category>discuss</category>
      <category>typescript</category>
      <category>programming</category>
    </item>
  </channel>
</rss>
