<?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: idleman</title>
    <description>The latest articles on DEV Community by idleman (@idleman).</description>
    <link>https://dev.to/idleman</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%2F1001817%2Fff5dbeed-8564-42bc-ab7e-e1453d1bcb08.png</url>
      <title>DEV Community: idleman</title>
      <link>https://dev.to/idleman</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/idleman"/>
    <language>en</language>
    <item>
      <title>The problem with TypeScript and its practices</title>
      <dc:creator>idleman</dc:creator>
      <pubDate>Thu, 16 Mar 2023 21:45:04 +0000</pubDate>
      <link>https://dev.to/idleman/the-problem-with-typescript-and-its-practices-5fc</link>
      <guid>https://dev.to/idleman/the-problem-with-typescript-and-its-practices-5fc</guid>
      <description>&lt;p&gt;Most of you probably believe TypeScript is best practices these days. It has some advantages, but also disadvantages. Here are some myths and problems with it.&lt;/p&gt;

&lt;h2&gt;
  
  
  Myth 1: It is typed and safe.
&lt;/h2&gt;

&lt;p&gt;TypeScript is either typed nor safe. Being a typed language means the compiler 100% know the type every single value, the binary representation of the value in memory and how to access it. The typescript transpiler/compiler cannot and does not know this information. The dynamic nature of JavaScript/ECMAScript prevent it. What TypeScript actually do is try to figure that information out or let you specify it, but it has no way to actually knowing.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const value: number = randomInt();
//  value can be anything, really!
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Myth 2: It create less bugs
&lt;/h2&gt;

&lt;p&gt;Contradictory what many people say, TypeScript do not create less bugs compared to applications written in JavaScript. It's not my opinion, its &lt;a href="https://www.researchgate.net/publication/359389871_To_Type_or_Not_to_Type_A_Systematic_Comparison_of_the_Software_Quality_of_JavaScript_and_TypeScript_Applications_on_GitHub"&gt;research&lt;/a&gt;. The research study checked the 15% most popular applications on github. The study in a nutshell says the following:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The use of "any" has a positive impact on bug resolution time.&lt;/li&gt;
&lt;li&gt;TypeScript code contains equal or more bugs than JavaScript code.&lt;/li&gt;
&lt;li&gt;Its take longer time to fix bugs in projects that is written in TypeScript.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;So you should definitely not feel bad if you use "any" or a loose mode in TypeScript.&lt;/p&gt;

&lt;p&gt;It is also important to understand that, even if you may find TypeScript code more readable, does it not mean it actually is more readable. Readable code is by definition simple to change and understand, so if it takes longer to fix various bugs in a programming language than in another, is it a sign something is wrong in your understanding what readable code actually is.&lt;/p&gt;

&lt;p&gt;PS. I know it exists other studies that say the opposite, but as noted in the research paper as well, those studies are either focus only on a few projects or library code. This is different than what most of us do in our daily life. &lt;strong&gt;Most of us code applications, not libraries.&lt;/strong&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Myth 3: Scalability
&lt;/h2&gt;

&lt;p&gt;How well your application scale regarding code-complexity have nothing to do whatever you code in JavaScript or TypeScript. It is just adversating from Microsoft or a TypeScript lover if someone tell you that. To be honest, types is the least important language feature and even calling it a feature is controversial. Even research papers in 1970s noted it.&lt;/p&gt;

&lt;p&gt;Have you heard of loose coupling? It is most of the time the factor that will decide regarding your application will scale or not. It comes in many favors and some people use different words, but the meaning is more or less the same: The less the programmer need to know, the better.&lt;/p&gt;

&lt;h2&gt;
  
  
  Myth 4: Future proof
&lt;/h2&gt;

&lt;p&gt;TypeScript is not in any way future proof.  In every places you can run TypeScript today, do you actually run JavaScript. There is a &lt;a href="https://github.com/tc39/proposal-type-annotations"&gt;proposal&lt;/a&gt; to add some type-annotations to the language, but if you read all issues and even meeting notes is it clear:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Annotations will just be treated as comments. You cannot trust it the type in any way.&lt;/li&gt;
&lt;li&gt;Most TypeScript code will never work because it uses TypeScript-specific features.&lt;/li&gt;
&lt;li&gt;It does not offer any technical benefits.&lt;/li&gt;
&lt;li&gt;Many people are against the proposal, some of those people are inside the committee itself.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Do you remember HTTP 2 push? Chrome &lt;a href="https://developer.chrome.com/blog/removing-push/"&gt;deprecated&lt;/a&gt; the support because too few websites used it. So even if it got standardized (that is a huge "if"), would browsers probably not add support for it anyway:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;It does not offer any technical benefits, more the opposite (more bytes =&amp;gt; slow website).&lt;/li&gt;
&lt;li&gt;Almost every website use bundlers and and those who does not will almost certain use TypeScript specific features that is not supported anyway.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Problem 1: Encourage named exports
&lt;/h2&gt;

&lt;p&gt;Almost every module should export only one thing. There is very few exceptions to this, for example configuration files or a file containing multiple constants. And if you export only one thing, the default export is the obvious candidate. The argument TypeScript lovers usually say is it ease refactoring but it is technically impossible. &lt;/p&gt;

&lt;p&gt;If you use default exports do you hide the identifier/name of the thing you export. It is by definition better because it remove a dependency, you do not need to know what name of some thing has within a file, only the interface of the thing the file exports. It's great. It means less coupling and less "need to know". Its honor SOLID principles and is great software design. It also encourage the developer to give great names for imported modules and each file has different contexts, so it make clear sense different names/identifiers may be used depending on context. &lt;/p&gt;

&lt;p&gt;The issue is of course and it is the main reason why some developers prefer named exports, it force the developer to give each package a name when you import it, so different files may use different names:&lt;/p&gt;

&lt;p&gt;File 1&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;import Foo from 'somewhere';
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;File 2&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;import Bar from 'somewhere';
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The consequence is that if you use some "refactoring" tools, will it be harder to rename the "default export", especially on a project-wide basis. Both file 1 &amp;amp; 2 will probably still use the names Foo and Bar even after a automatic refactoring for example. And it is great because there is hopefully a good reason why those names were used in the first place. Some people forget that.&lt;/p&gt;

&lt;h2&gt;
  
  
  Problem 2: Do not support import by .ts extension
&lt;/h2&gt;

&lt;p&gt;ECMAScript/JavaScript import modules by import/dependency specifiers and every plattform I know will convert the dependency specifier to some path or an url it can fetch. If the direct location cannot easily be defined, must the platform perform some kind of traversal (visit many files before it "knowns"). This process is slow, but remarkable slow if it is done over a network. This can be fixed if the developer provide more specific dependency specifiers, for example adding the file-extension. But there is a problem:&lt;br&gt;
TypeScript do not support if you add the .ts extension. It does not &lt;a href="https://github.com/microsoft/TypeScript/issues/27481"&gt;rename dependency specifiers&lt;/a&gt;. Its extremely weird actually:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The TypeScript team do 100% know TypeScript is not supported natively anywhere in the world. So you cannot evaluate a file containing TypeScript code. It must first be converted to JavaScript.&lt;/li&gt;
&lt;li&gt;The TypeScript team 100% know the ".ts" extension is their own file-extension and it is extremely likely if someone want to import a ".ts" file from a TypeScript file, is the file very likely a TypeScript file.&lt;/li&gt;
&lt;li&gt;The TypeScript transpiler itself will re-write all code, have almost in every case access to all dependencies and will create ".js" files by default.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;There is no excuse for not supporting it.&lt;/p&gt;
&lt;h2&gt;
  
  
  Problem 3: Encourage bloat
&lt;/h2&gt;

&lt;p&gt;The TypeScript community encourage developers to some really bad habits that make code bases bloated. Examples:&lt;/p&gt;
&lt;h3&gt;
  
  
  Over-use strict mode.
&lt;/h3&gt;

&lt;p&gt;Strict mode do not produce less bugs nor it is more readable. Sure, you may believe so, but science says it's not. You should absolutely use "any" if it makes the code shorter and easy to read, yet there is an insane belief its bad. Its not! &lt;/p&gt;
&lt;h3&gt;
  
  
  Overuse of unions types
&lt;/h3&gt;

&lt;p&gt;If your function has multiple declarations, use multiple functions. There is a reason why parseFloat and parseInt is different functions instead of just "parseNumber".&lt;/p&gt;
&lt;h3&gt;
  
  
  Overuse of types
&lt;/h3&gt;

&lt;p&gt;You should not care about the type a specific value has, but the interface the value has. Instead of doing:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;function getName(user: User): string {
    return user.name;
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;should you prefer:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const getName = ({ name = '' } = {}) =&amp;gt; name;

getName()  // OK
getName(123)  // OK
getName(true)  // OK
getName(undefined)  // OK
getName(Symbol('test')) // OK
getName(null) // TypeError, but this is the only case
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The same applies if you work with generic and variadic arguments:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const add = (...args) =&amp;gt; args.reduce(((s, v) =&amp;gt; s + v), args.shift());
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The code style is called defensive coding and it is scientifically proven to be the best method among programming languages in general together with tests to actually decrease the number of bugs and create more robust software. It a very important skill to learn. And yes TypeScript will detect if you call "getName" with something else than an object. If it does not, check your tsconfig.&lt;/p&gt;

&lt;h2&gt;
  
  
  Disclaimer
&lt;/h2&gt;

&lt;p&gt;I know there is a lot of people in the TypeScript community that is so insecure in their programming skill so they take any critic against the programming language personal. Please do not. I don´t want to force you stop using TypeScript. Use what every programming you want. I just want to spread some facts that I know are unpopular, but yet undeniable true.&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>typescript</category>
      <category>webdev</category>
      <category>frontend</category>
    </item>
  </channel>
</rss>
