TypeScript vs JavaScript: What’s the difference?

Thanks to the original writer and article :

https://learningdaily.dev/typescript-vs-javascript-whats-the-difference-66abcaf5a065

If you’re a new developer, then you may have heard about TypeScript, a relatively new programming language that has gained popularity since its release in 2012 by Microsoft[1].

Interestingly, TypeScript isn’t actually a standalone programming language. Instead, TypeScript is considered to be a?superset?of JavaScript.

You can think of a superset of a programming language as an extension that introduces new features and expands the capabilities of that language. In other words, any program written in?JavaScript?will also work in TypeScript.

So, if you already know JavaScript, learning TypeScript will come fairly naturally to you.

In this article, we’ll be going over a quick rundown of what TypeScript is, why you should use it, and some of the key differences that make it stand out from JavaScript.

We’ll cover:

• What is JavaScript?
• What is TypeScript?
• Advantages of TypeScript
• Disadvantages of TypeScript
• Comparison chart: TypeScript vs JavaScript
• Should I learn TypeScript?
• Wrapping up and next steps

What is JavaScript?

JavaScript ES6?(also known as ECMAScript 6) is a client-side, cross-platform, prototype-based scripting language created by Brendan Eich.

JavaScript is used extensively?in front-end web development to help build dynamic, interactive web applications.

JavaScript is?dynamically typed, meaning all type checking happens during compilation. Dynamically typed languages prioritize developer efficiency, enabling them to?write less code?to complete their projects.

Dynamically typed languages also tend to be more flexible, but offer code that is typically less optimized because it?must?be run first to find out if any bugs are present.

JavaScript also runs directly in the web browser, so no additional resources are needed to execute JavaScript code. However, it can still be overwhelming to debug a cascade of errors all at once instead of along the way.

Note: Other examples of dynamically typed languages include Python, PHP, Perl, and Ruby.

Since its inception in 1995,?JavaScript has gone through multiple iterations?to improve its functionality, and make software development easier. Now, it can even be used to create?interactive games!

Plain JavaScript started off as a very simple language meant to be embedded as short snippets of code on a web page. This is because, at the time, a few dozen lines of code were all a web browser could really handle without becoming unusably slow.

Now, modern browsers are capable of running JavaScript applications with?hundreds of thousands?of lines of code.

JavaScript also benefits from having a large, passionate community, extensive documentation, and plenty of libraries and frameworks. In addition,?JavaScript supports many client-side?APIs?that can reduce the amount of code that a software developer needs to write. For these reasons, JavaScript is a popular choice for most development teams.

That being said, JavaScript wasn’t originally meant for use in large projects. So, even though small projects could be reliably debugged, attempting to debug a large project in JavaScript could be a tedious, time-consuming process.

Note: You may not think of JavaScript as being an object-oriented programming language, but it actually has?great support for OOP!

What is TypeScript?

TypeScript is an open-source programming language but started off as an internal product at Microsoft in 2010. TypeScript was made publicly available on GitHub[2]?in late 2012.

Since TypeScript is considered to be a strict superset of ECMAScript 2015,?any JavaScript program?can be considered a TypeScript program as well.

Unlike JavaScript, TypeScript is a?statically typed?programming language. As a?static type checker?TypeScript will audit the behavior of certain variables before you run your program. This is the case even when you declare variables without specifying their type. In these situations, TypeScript can automatically assign types to declared variables. This is known as?type inference?and is a built-in capability of other languages like Kotlin, and Scala.

Once a variable type is assigned, TypeScript will enforce it throughout the code, which can improve consistency, and help debug potential errors?before?compilation time. The trade-off for gaining this extra support is losing some of the flexibility that JavaScript developers are accustomed to.

Note: Statically-typed languages include?Java, C, and C++. With static typing, the programmer must specify the?data type?of every variable being declared.

TypeScript was built on 11 design goals:

Microsoft identified 11 key goals that would drive the evolution of TypeScript.

1. Statically identify potential errors
2. Provide a way to structure larger bodies of code
3. Avoid increasing program runtimes
4. Compile to clean, recognizable JavaScript
5. Produce a language that is composable and easy to reason about
6. Stay fully compatible with current and future versions of JavaScript
7. Preserve the runtime behavior of all JavaScript code
8. Avoid adding?expression-level syntax
9. Make TypeScript consistent, and fully erasable
10. Be a cross-platform development tool
11. Language changes should not break past versions of TypeScript

Advantages of TypeScript

TypeScript provides two strong advantages over JavaScript:

• TypeScript is transpiled into JavaScript: TypeScript modifies and replaces its own code with functioning JavaScript at compilation time, allowing advanced ECMAScript features to be used by older browsers that normally do not support them
• TypeScript can enforce static typing: Static typing catches potential issues earlier in the development lifecycle by assigning data types to all declared variables

Note: A?polyfill?is a code snippet (usually written in JavaScript) that attempts to mimic the methods of a newer feature. Polyfilling allows older browsers to support new features that are normally not supported.

A?transpiler?converts the source code of one language to the source code of another. In this case, methods written in TypeScript are transpiled into JavaScript so that it can run in JavaScript environments.

The TypeScript compiler is also highly configurable. There are many?options?for regulating different aspects of type checking and compilation. The stricter the checks, the more errors can be caught by the TypeScript compiler.

The most common TypeScript error is related to type assignability. The main goal of the type checker is to ensure that values are provided with the correct types.

Additional features

• Compatibility: TypeScript supports virtually all JavaScript frameworks and libraries, including:
• React: A single-page application (SPA) that uses a virtual DOM to improve memory and performance
• Vue: Written in TypeScript, easy to integrate into applications progressively
• Angular: Great for quick prototyping, easy testing, and optimizes server performance
• Syntactic sugar: Enforcing strict types makes code easier to read because you don’t have to think about what type a variable is
• Extensive IDE support:
• Visual Studio Code
• Eclipse
• Atom
• WebStorm
• …and more!

Disadvantages of TypeScript

There are a few drawbacks to using TypeScript, but it’s up to you to weigh them against the advantages and see if it’s right for you.

Here are a few drawbacks to consider:

• Compilation time: TypeScript programs have longer execution speeds compared to ones written in JavaScript
• Learning curve: TypeScript is a bit more complex than JavaScript and will require time to get used to
• Type mismatches: Because TypeScript code is transpiled into JavaScript at runtime, you may end up with unusual errors and mismatched types
• Less flexibility: Variables and parameters are less flexible in TypeScript

Comparison Chart: TypeScript vs JavaScript

Should I learn TypeScript?

If?you’re new to web development, and plan on working on?smaller projects, then JavaScript is the ideal place to start.

If?you already know JavaScript, then your decision will ultimately depend on whether or not certain TypeScript features appeal to you as a software developer. Depending on the context (and your priorities), it can definitely be more advantageous to use JavaScript over TypeScript sometimes.

For example, one of the most notable drawbacks of a compiled language like TypeScript is the?extra amount of time it takes to execute. If keeping the compilation time brief is a high priority, then JavaScript would be the best choice.

If you care more about?being able to read the code?you write than how long it takes to compile, then TypeScript would have a clear advantage.

Note: One thing to keep in mind is that?TypeScript developers?typically receive higher compensation on average because there are fewer of them than JavaScript developers. Regardless, it never hurts to have another feather in your cap!

Installation

Via npm package

First, make sure you have an IDE, the Node.js Package Manager (npm), and the TypeScript compiler. Node.js provides an environment where your TypeScript package can run.

Next, open your command prompt or a terminal and enter the following:

npm install -g typescript        

If it was installed correctly, you should be able to check which version you have with?tsc -v.

Now, you can use the following command to install TypeScript into your local project as a dependency.

npm install typescript --save-dev        

Via Microsoft Visual Studio Code

First, make sure you have Visual Studio installed, along with the ASP.NET web development workload.

Next:

1. Open a new project in Visual Studio
2. Right-click your project node in the Solution Explorer
3. Click?Manage NuGet Packages
4. In the?Browse?tab, search for?Microsoft.TypeScript.MSBuild
5. Click?Install

In the event that your project does?not?support NuGet, you can also install the TypeScript extension in Visual Studio by going to?Extensions?>?Manage Extensions.

Wrapping up and next steps

Great! We went over some of the major features of TypeScript, as well as some of the tradeoffs. Hopefully, this brief introduction to TypeScript was informative and has you thinking about your next project. Who knows? You might want to write it in TypeScript.

If you’re considering becoming a TypeScript developer, we have plenty of great resources for you to keep expanding your knowledge, so go check them out!

To help you master TypeScript, Educative has created the?TypeScript for Programmers?learning path.

Happy learning!