JavaScript is the backbone of the web. TypeScript is its replacement created to address the flaws of dynamic typing. Or is it really? Let's explore the difference between the two languages and their respective pros and cons.
☕️ What is JavaScript?
Its a high-level, object-oriented, dynamically typed programming language with an almost 30-year-long history. JavaScript code can be written directly into an HTML document and executed natively in the web browser. It can also run both on the client and server side. Its extensive browser support and large community make JavaScript a popular choice for creating dynamic web pages (as well as extracting data from them). But besides its obvious use in web development, programmers can use JS for building server-side, desktop, and mobile applications.
⌨️ What is TypeScript?
TypeScript is a high-level, object-oriented, statically typed superset of JavaScript. It was created to provide type safety and better tooling for those aiming to build large-scale JavaScript applications. TypeScript is preferred for projects involving scalability and contributions from multiple developers.
🎱 Why is TypeScript often called a language?
Technically, TypeScript isnt so much a language, but rather an enhanced version of JavaScript with a few extra features; in other words, a superset. So why did JavaScript need to be enhanced in the first place? Well, JS is dynamically typed. This characteristic can be an advantage when it comes to flexibility, but also can create complex issues such as allowing it to run code full of typos and bugs. There was no way to gracefully change this about JavaScript, so in 2012, TypeScript was created.
As TypeScript was adopted more and more, it wasnt only building upon the syntax and features of JS but had its own unique features which fixed a lot of the drawbacks of dynamic typing. So it started to be referred to as a separate language. However, the TypeScript developers purposefully avoided creating new runtime syntax and behaviors so as not to create too big a divide between JavaScript and TypeScript.
🎹 Whats the difference between dynamically typed and statically typed languages?
We are talking about two different ways a programming language is built to handle data types (integer, string, boolean, or user-defined data types, etc.)
In a statically typed language such as C, C++, and TypeScript, the type of a value has to already be made known at compile time. The language is built in a way that forces you to declare the data type of a variable the moment you create it, and you can only store values of that specific data type in that variable (case of TypeScript).
In a dynamically typed language such as Python, Ruby, and JavaScript, the type of a value will be determined only at runtime. The language is built in a way that allows you to declare a variable without specifying its data type and then change the data type later on (case of JavaScript).
Now, the static language might seem restrictive than dynamic typing and for good reason. The main advantage of the constraints that static typing introduces is that it can catch type errors before you even run the code. In contrast, dynamic typing doesnt do that but allows more freedom instead. Since you are not stuck declaring data types up front, dynamic typing languages are more flexible and allow for quick code changes and creation.
🐞 TypeScript vs. JavaScript code examples
Heres a code example that will help you understand the core difference between JS and TS. Take a look at this JS code containing a few intrinsic flaws:
The fatal flaw of JavaScript
If you try to count the total of bug legs by running this JS code, youll see 8undefined. Not an error, a weird undefined Why?
ladybug.legswas never defined, so theres nonum1to refer tospider.legswas defined (8), but its a string, not a number (by JSs default). It must be converted into a number before we can add up all legs with theaddLegsfunction.
JavaScript doesnt tip us off on these mistakes in any way and somewhat neglectfully allows to run our code with bugs (literally). Its now up to you to spend time looking for your mistake(s) and/or typo(s). Now imagine such a mistake on a project containing thousands of lines. Would you trust your fellow programmers to work on your code?
TypeScript, on the other hand, makes you pay attention to these potential issues before you even run the code. You can see them underlined in red with a little hint from the IDE pointing to what might be wrong. You can compile and run your TS code only after you address those issues.
TypeScript makes you pay attention to these potential issues
So this is the main difference between the two languages. At least the one that matters most when writing code. Now, before you run and learn TypeScript and never look back, lets zoom out more on their differences.
🪓 What are the differences between TypeScript vs. JavaScript?
Rule of the thumb here would be: Javascript is Typescript, but TypeScript is not JavaScript. Not until the compilation step, at least. Think of it this way: JavaScript is an axe and TypeScript is a chainsaw. Both serve the same purpose, but are useful for different scales and in different conditions. An axe is really the same thing as a chainsaw in terms of purpose (cutting things), but a chainsaw isnt an axe in terms of the way this purpose is fulfilled (a chainsaw is faster and requires gas).
| Feature | TypeScript | JavaScript |
|---|---|---|
| Language type | Statically typed | Dynamically typed |
| Compiler | Must be compiled | Can be run directly in browser |
| Scale | Better for large projects | Better for small projects |
| Development time | Longer due to type annotations and extra compilation step | Shorter due to dynamic typing and no compilation step |
| Code readability | Easier to read and understand due to explicit type annotations | May be more difficult to read and understand due to lack of type annotations |
| Community and documentation | Growing and active, many libraries and frameworks | Larger and more mature, even more libraries and frameworks |
| Learning curve | Steeper due to the need to learn TypeScript's type system | Easier as it is a simpler language with no type system to learn |
| Likelihood of runtime errors | Low, thanks to catching type-related errors at compile-time | Higher, requires runtime debugging to catch errors |
🧙 Pros and cons of JavaScript
➖ What are the main cons of JavaScript?
🐛 Allows running code full of bugs (its just built this way). JavaScript is a dynamically typed language, which means it gives you a lot of freedom with how to write your code. While this freedom can be advantageous, it also introduces a fatal flaw. JavaScript code is interpreted by a browser, and type verification is performed at runtime. This means bugs won't show up until its runtime and the browser is throwing an error. This flaw adds to the frustration and increases runtime overhead youre now stuck trying to find the bugs.
This could have been avoided by conducting validation at compile-time. But JavaScript isnt able to do that, just by design. Hence, TypeScript was created.
➕ What are the main pros of JavaScript?
↗️ No compilation step. JavaScript code is interpreted so it can be executed directly in a browser. TypeScript, on the other hand, has to go through transpilation before it can be run in a browser or on a server. This extra step can slow down the development process. Although there are prompts for the TS compiler (such as -- watch) that will close the compilation gap by automating it.
🚄 Faster production. Another factor contributing to speed is that theres no need for defining types or making decisions about the architecture of your project when working on it. You can just go with the flow and debug later.
🦅 Freedom. TypeScripts main advantage (types) may be a drawback for smaller projects needing flexibility and space for experimentation. The annotation process steals time even before the project starts gaining scale. What if your project doesnt need scale and most likely never will? This makes JS a better choice for small projects with lots of variables.
🧘 Better control. Dynamic typing languages such as JavaScript are better suited for code that is more difficult to type. For instance, JS would be a better choice for projects that involve manipulating data structures with unknown or dynamic shapes.
When you should choose JS over TS:
Its a small project.
You need space for experimentation.
You want to have your code run directly in the browser.
You dont want to learn new features (static typing).
🦄 Pros and cons of TypeScript
➕ What are the main pros of TypeScript?
🐞 Fewer bugs. With TypeScript, you have an opportunity to define simple and complex types from the start. Thanks to type annotations (which are nevertheless optional btw), your variables will keep consistent with their types and will only accept certain, defined values. Over time, your code will offer more and more autocomplete options.
Combined with a helpful IDE, this will help you catch type-related errors at compile time rather than runtime and therefore prevent a lot of issues. In fact, TypeScript is able to catch 15% of JavaScript errors, making it a generally more reliable choice.
👷 🛠 Type safety and helpful tooling. Setting up type annotations can take some time in the beginning but seeing automatic code completions show up will prove that it was all worth it. The IDE such as IntelliSense or VSCode will further enhance the development experience and speed by providing real-time code analysis and suggestions, making development more efficient and less error-prone. Because of this factor lots of companies are now preferring TypeScript over vanilla JavaScript.
🍦 JavaScript of any flavor. TypeScript is a language that strikes a balance between old and new JavaScript features. While the compiling step does add a bit of extra hustle, it is actually hiding a lot of possibilities. The moment when the compiler transforms TS into Vanilla JS, you can choose any version of JS you want.
This means that you can take advantage of new JavaScript features that are not available in all browsers yet right away. And this also means you dont have to worry about portability and specific JS version: TS is able to compile finished code to ES5, ES2022, and all the versions in between.
🌏 Best for huge projects. Types are a must-have for big projects because having established types creates a more scalable development environment. This makes TypeScript a popular choice for large-scale applications.
👩💻 Best for projects with multiple developers. TypeScripts logic is based on modular development. This makes it a preferred choice when it comes to maintaining large codebases and creating readable, neat code that anyone on the team can understand. As a result, it is also easier to onboard new project members as well as refactor the codebase, for dessert.
✨ Unique features. TS has unique features and concepts that JS doesnt. Interfaces, enums, types they are all here to make the coding experience easier, and shooting yourself in the foot, harder.
What are the main cons of TypeScript?
📚 Learning curve + time. learning how to code in a statically typed language such as TypeScript can require extra time. Defining types right away will be beneficial for your project in the long run, but in the moment all the micro-decisions may slow you down.
🧱 Requires compilation. TypeScript requires an extra build step to generate the JavaScript code which can be executed in a browser. However, the build step has become kind of the standard for the development of JavaScript applications anyway. Besides, the TypeScript compiler offers a feature called watch mode, which can monitor a specific .ts file for changes and recompile automatically whenever a change gets detected.
☝️ No auto-completion for some unsupported frameworks. You wont be able to use the features of frameworks that TypeScript doesnt support. Luckily, there are just a few of those (such as Ember JS, Express JS).
✅ When you should choose TS over JS:
Youre already familiar with JavaScript.
Your project has multiple contributors working on it.
You have no time for finding bugs.
Bugs can be costly in your project.
You need a high degree of type safety and tooling support.
You want to explore the newest JavaScript features.
FAQ:
🎓 Should I learn JavaScript or TypeScript?
Its not an either/or question, but rather a first/then one. Since TS is a superset of JS, to understand TypeScript, you first need to learn JavaScript. Besides, you cant overshoot by learning JS first: its been the most commonly used programming language for 10 years in a row (as of 2023).
Also, you can take a look at how developers themselves decide on this. Both beginner and pro categories share an over 59% liking towards JavaScript in general. However, beginner developers seem to be cautious about TypeScript (15%), while professional developers lean in heavily (40%).
Should I learn JavaScript or TypeScript? Answers from devs, StackOverflow 2022 Survey
💀 Will TypeScript replace JavaScript?
Thats unlikely. However, Douglas Crockford, creator of JSON and contributor to JavaScript, said in a recent interview:
"The best thing we can do today to JavaScript is to retire it. Also, we need better languages. Most of our languages were designed for the paradigm where the entire program is running as a single process in a single machine. That is not the world we live in now.
Oof. Its undeniable that TypeScript was created to fix the legacy issues of JavaScript, so it does tick the language of the future box. However, since TypeScript cannot execute the code without being compiled into JavaScript first, it will never replace JavaScript. Instead, it will continue to be preferred for the (mostly commercial) projects that require scale and multiple contributors as it was created to do.
🥾 Should I migrate my projects to TypeScript?
In general, its a good idea. Migrating a legacy JavaScript project to TypeScript has many benefits, among them, easier maintenance and bug detection. The migration to TypeScript is especially easy and straightforward for small JS projects. Changing a single letter of the file extension is 80% of the job, the other 20% is fixing the errors flagged by the TS compiler and, of course, setting up a few libraries.
For larger JS projects, the process of migrating to TypeScript can be more challenging. However, there are options to ease the transition. Option 1 is incremental change: adopting TS gradually by migrating certain files while keeping others in legacy JS code. Option 2 is to use TypeScript for new features exclusively while keeping the legacy code intact. When new features start spilling over to the legacy code, you can migrate the code to TypeScript concurrently with the feature development.
⭐ Which is better for web scraping: JavaScript or TypeScript?
First of all, JavaScript and TypeScript are not the most popular language choice for building a scraper. According to data from GitHub, they are used for around 10% of all web scraping projects. But when choosing between these two, the most important factor to consider here is scale. If you want to build a scalable data extraction tool and count on multiple programmers to work on it, it would be less of a headache and safer to write your scrapers in a language that has type safety. If its a small web crawler project and you need space for experimentation, JavaScript will serve you better.
🕷 How to create a crawler in TypeScript
Of course, you could set up your scraping project in TypeScript from scratch, installing all base dependencies step by step, as one should (TypeScript configuration file, Docker, compiler, etc.). But for TypeScript enthusiasts using our web scraping library, weve decided to make the kick-off part easier.
All you need to get started is to pass this command in your terminal npx crawlee create my-crawler. It will create a boilerplate and install all packages and dependencies you need to begin working on your TypeScript scraper. Just like that:
Writing scraping tools in TypeScript does have a few advantages. Among them:
code will have auto-completion enabled
easy-to-access documentation for functions, parameters, and return values
compile-time type-checking will help to avoid coding mistakes and bugs from the get-go
resulting scalability goes without saying
simpler refactoring when the time comes
These were the main reasons why we chose TypeScript when building our open-source library for scraping. You can learn more about Crawlee and TypeScript here:
A tutorial on how to write a scraper in TypeScript
How to write a scraper in TypeScript [example]
You can read the full tutorial with a step-by-step explanation of how this scraper was built in Web Scraping Academy 🔗
While JavaScript is the language of the web, TypeScript is gaining momentum in the programming world. TypeScript's type safety and scalability features make it a preferred choice for projects involving multiple contributors.
Nevertheless, JavaScript's flexibility and large community keep it popular for building dynamic web pages and whenever you need to deal with browsers in general. Choosing between the two languages comes down to what's more important for your project, web scraping or otherwise.
crawlee.dev
Top comments (0)