docs(blog): add ts post (refinedev#6314)

documentation/blog/2023-11-21-js-vs-ts.md → documentation/blog/2024-09-10-js-vs-ts.md

@@ -4,10 +4,12 @@ description: This post provides an insightful comparison and contrast between Ty
 slug: javascript-vs-typescript
 authors: abdullah_numan
 tags: [javascript, typescript]
-image: https://refine.ams3.cdn.digitaloceanspaces.com/blog/2023-11-21-js-vs-ts/social.jpg
+image: https://refine.ams3.cdn.digitaloceanspaces.com/blog/2023-11-21-js-vs-ts/social-2.png
 hide_table_of_contents: false
 ---
 
+**This article was last updated on September 10, 2024, to add sections on Performance Considerations, Benefits for Large-Scale Applications, Debugging TypeScript, and Migrating from JavaScript to TypeScript.**
+
 ## Introduction
 
 TypeScript is a statically typed superset of JavaScript, the inherently **dynamically typed**, high-level scripting language of the web. It bases itself on the core features of JavaScript and -- as the primary mission -- extends them with compile time **static typing**. It also comes with several feature extensions: perhaps most notably [enums](https://www.typescriptlang.org/docs/handbook/enums.html), [class instance types](https://www.typescriptlang.org/docs/handbook/2/classes.html#constructors), [class member privacy](https://www.typescriptlang.org/docs/handbook/2/classes.html#member-visibility) and [class decorators](https://www.typescriptlang.org/docs/handbook/decorators.html). TypeScript offers more advanced additions and considerations with respect to iterators, generators, mixins, modules, namespacing, JSX support, etc., which JavaScript developers would find different and more nuanced towards static typing -- as they get familiar with them over time.
@@ -21,24 +23,17 @@ Towards the end, we explore notable feature extensions that TypeScript brings to
 Steps we'll cover in this post:
 
 - [TypeScript Concepts](#typescript-concepts)
-  - [TypeScript Concepts - Static vs Dynamic Typing](#typescript-concepts---static-vs-dynamic-typing)
-  - [TypeScript Concepts - Type Definitions](#typescript-concepts---type-definitions)
-  - [TypeScript Concepts - Type Annotation and Inference](#typescript-concepts---type-annotation-and-inference)
-  - [TypeScript Concepts - Type Checking and the Structural Type System](#typescript-concepts---type-checking-and-the-structural-type-system)
 - [TypeScript Tools](#typescript-tools)
-  - [`tsc`, the TypeScript Compiler](#tsc-the-typescript-compiler)
-  - [TypeScript Type Checker](#typescript-type-checker)
-  - [TS Type Checker - Linguistic Tooling](#ts-type-checker---linguistic-tooling)
-  - [TypeScript Support in VS Code](#typescript-support-in-vs-code)
 - [TypeScript Type Definitions / Declaration Packages](#typescript-type-definitions--declaration-packages)
-  - [TypeScript Type Declaration - `.d.ts` Files](#typescript-type-declaration---dts-files)
-  - [TypeScript Type Packages - DefinitelyTyped `@types`](#typescript-type-packages---definitelytyped-types)
+- [Performance Considerations for TypeScript and JavaScript](#performance-considerations-for-typescript-and-javascript)
 - [TypeScript's Extended Features](#typescripts-extended-features)
-  - [TypeScript Extensions - Enums](#typescript-extensions---enums)
-  - [TypeScript Extended Features - Classes as Types](#typescript-extended-features---classes-as-types)
-  - [TypeScript Extended Features - Class Member Visibility](#typescript-extended-features---class-member-visibility)
-  - [TypeScript Extended Features - Class Decorators](#typescript-extended-features---class-decorators)
-  - [TypeScript Advanced Features](#typescript-advanced-features)
+- [How TypeScript Helps with Large-Scale Applications](#how-typescript-helps-with-large-scale-applications)
+- [Bonus: Migration from JavaScript to TypeScript](#bonus-migration-from-javascript-to-typescript)
+- [Take it Easy](#take-it-easy)
+- [Add TypeScript Configuration](#add-typescript-configuration)
+- [Use JSDoc Comments](#use-jsdoc-comments)
+- [Leverage Type Definitions](#leverage-type-definitions)
+- [Gradual Type Safety](#gradual-type-safety)
 
 ## TypeScript Concepts
 
@@ -360,6 +355,16 @@ npm install --save-dev @types/react
 
 Then, we can use the types inside our app. It is important to notice that unlike in the case of using `.d.ts` declaration files, we don't need to import the types from their `node_modules` files. That's because they are made available automatically by `npm`.
 
+## Performance Considerations for TypeScript and JavaScript
+
+I would like to share some of my thoughts about how TypeScript impacts performance compared to JavaScript.
+
+While TypeScript helps a great deal in catching errors early because of static typing, it does add a little bit of overhead during development. Type checking and the compilation process both may take some time, particularly for large projects; subsequently, it slows down development. However, the fact that IntelliSense and real-time error detection are in the editor makes coding much swifter and more straightforward, which reduces some of this slowness.
+
+However, at runtime, there is no difference, since TypeScript compiles to regular JavaScript. So, once our app is up and running, there is no extra load due to TypeScript. The good thing is, though, that TypeScript can help us avoid bugs and inefficient code, which makes the app more performant in the long run—especially important with larger applications.
+
+One piece of advice: TypeScript supports incremental builds, which can speed things up during development by compiling only files that changed.
+
 ## TypeScript's Extended Features
 
 Apart from implementing a static type system to produce error-proof, maintainable and scalable codebase, TypeScript extends the language with additional features with their respective syntax. TypeScript `enum`s are such an addition that injects type objects to JavaScript runtime. **TypeScript classes** are implemented in a way that produces types. Some aspects of TS classes, such as member privacy and decorators are implemented in different ways than in JavaScript.
@@ -400,6 +405,50 @@ Most of these advanced concepts require special considerations to facilitate rel
 
 Getting a good grasp of these advanced TypeScript features require gradual adoption of the language as a whole, as we aim to keep our codebase type-safe, stable and our web application maintainable and scalable.
 
+## How TypeScript Helps with Large-Scale Applications
+
+I wanted to point out to you why TypeScript really shines on large-scale projects.
+
+A very important feature is static typing, which allows one to catch errors during development rather than at runtime; this becomes very important for large projects where bugs are cumbersome to find at the end. We will get less buggy software with TypeScript because the type system will act as a guard, making sure we have reliable code.
+
+In addition, TypeScript makes the code base more maintainable. Besides, type annotations and very clear contracts between modules make the structure easily understandable by other developers in very little time, which is really important when it comes to different teams working on the same project. It reduces miscommunication and ensures consistency across the codebase.
+
+In other words, TypeScript makes large projects maintainable, robust, and less prone to errors.
+
+## Bonus: Migration from JavaScript to TypeScript
+
+I thought I would share this quick guide on how we can smoothly migrate our JavaScript project to TypeScript.
+
+## Take it Easy
+
+We don’t have to convert everything at once. A good starting point is to rename a few JavaScript files to `.ts` or `.tsx` and gradually introduce TypeScript. We can begin by adding types for just a few components or modules and let the TypeScript compiler guide us with type suggestions and errors.
+
+## Add TypeScript Configuration
+
+We will need to create a `tsconfig.json` file in the project root to configure TypeScript settings. This file tells TypeScript how to compile our code, where to find source files, and which JavaScript features to support.
+
+## Use JSDoc Comments
+
+Before converting entire files, we can use JSDoc comments to introduce type annotations in our JavaScript code, allowing us to practice type checking without changing file extensions right away.
+
+```js
+/**
+ * @param {string} name
+ * @returns {string}
+ */
+function greet(name) {
+  return `Hello, ${name}!`;
+}
+```
+
+## Leverage Type Definitions
+
+If we are using third-party libraries, we can install TypeScript type definitions for them from DefinitelyTyped (`npm install @types/react`). This will make the migration smoother, especially with popular libraries like React or Node.js.
+
+## Gradual Type Safety
+
+Initially, we can use the `any` type to avoid errors and gradually replace it with stricter types. This reduces friction during migration, especially in complex projects.
+
 ## Summary
 
 In this post, we compared TypeScript with JavaScript. While trying to make the comparisons, we gained useful insights into how the two types of systems and their implementations differ. We got a high-level view of the role of the TypeScript compiler, the mechanisms of the static type checker in catching and preventing type errors, and the linguistic tooling that helps developers write error-free and highly stable application code. We also contextualized some of TypeScript's notable extended features that differ from those in JavaScript in light of TypeScript's static type system.