TypeScript vs JavaScript: What's the difference?

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.

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!

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 https://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.