TypeScript vs. JavaScript… Which Is Better and Why?

There's probably two main questions you have (especially if you're an existing developer using JavaScript):

1. Should I bother learning TypeScript? Probably
2. Is JavaScript or TypeScript better to use for my project? It depends

Clear as mud right?

Here’s the thing... both JavaScript and TypeScript have their places in software development, but each also have their pros and cons.

No one tool, programming language, or JS framework will ever be perfect for every situation.

The key is to pick the best tool for the job at hand. To do that, you need to understand the differences between the tools and what they're each best for.

• Is TS or JS better at scale?
• Which is best for beginners?
• Which is best for large teams?
• Is it possible to use both?

All important questions which I'm going to answer for you in this post as we go through some of the key differences between TypeScript and JavaScript.

We’ll also look into how you can leverage both languages to increase the reliability of your programs while still being productive.

I've even provided some actual code examples to help you see these differences in action.

Let’s dive in…

Pros and Cons of JavaScript

JavaScript is a dynamic, high-level, interpreted programming language commonly used in web development. It has its own unique set of features that help it stand apart, but as always, each feature has its own pros and cons.

Let's take a closer look at some of these, so we can see how they work, and when to use or not use them.

Dynamic Typing

JavaScript uses dynamic typing, which means type-checking is done at runtime.

Pros

Dynamic typing allows for more flexibility, as variables can be changed or modified in different types freely. There is also no compilation step with JavaScript, so it's really fast for when you need to iterate on your designs.

Cons

On the downside, dynamic typing can lead to runtime errors that are hard to debug, and type-related errors will not surface until the code is run.

Also, as a project grows in size and complexity, the lack of ‘types’ will slow down development speed since it's difficult to determine what types some code is using.

Flexibility

JavaScript is extremely flexible and forgiving, which can be both a blessing and a curse.

Pros

This flexibility allows developers to write code in a variety of styles and paradigms.

It's also more forgiving of errors, allowing scripts to run even if they contain errors.

Cons

However, this same flexibility can lead to inconsistent code, especially in a team setting where different developers may favor different coding styles.

It can also hide errors that might break your code in subtle ways, which is always fun to try and figure out 😬.

Community Support and Libraries

JavaScript has a large and active community and a vast library ecosystem.

Pros

With such a vibrant community, it's easy to find help and resources online. Also, because JavaScript has a rich ecosystem of libraries and frameworks, it can greatly speed up development, as you can find whatever you need (within reason).

Cons

The vast amount of libraries and frameworks can also be overwhelming for beginners trying to decide which ones to learn and use. Additionally, JavaScript features and best practices are constantly evolving, which can make it hard to keep up.

TL;DR

JavaScript's features make it a practical and flexible language that's suitable for a wide array of projects. However, this flexibility can also lead to issues, especially in large projects or teams with varying coding styles.

We’ll come back to JavaScript in a second, and share some code examples. For now, let’s take a quick look at some specific TypeScript features and their pros and cons.

Pros and Cons of TypeScript

TypeScript is a statically typed superset of JavaScript and brings in several new features not present in JavaScript.

However, while these features aim to improve scalability and maintainability, they also have their trade-offs…

Static Typing

One of TypeScript's primary features is static typing.

Pros

Static typing can catch errors at compile time, long before the code is run.

This improves tooling support by allowing editors to provide better autocompletion, refactor support, and more. The type information also serves as documentation, making large codebases more manageable.

Cons

On the downside, it introduces a compile step and makes the code more verbose.

This could potentially slow down development speed, especially for small projects that don't need such extensive type checks.

Interfaces

TypeScript also introduces interfaces that allow for a much more robust type system.

Pros

Interfaces help enforce particular contracts (shape of the objects) in your code. This catches potential issues early and makes the code more predictable and easier to reason about.

Cons

Like static types, interfaces also make code more verbose. They might be overkill for simple, small-scale applications.

Compilation

Fun fact: TypeScript code must also be compiled into JavaScript before it can run in the browser.

Pros

The compile step catches many errors ahead of runtime. It also allows TypeScript to use future JavaScript features that browsers may not yet support.

Cons

The need for compilation can slow down development and complicate build setups, especially for smaller projects.

TL;DR:

Overall, TypeScript offers powerful features that can be greatly beneficial for large, complex projects especially when collaborating with many other developers on the same codebase.

So what’s the verdict? Is TypeScript better than JavaScript?

Yes and no. The question to really ask is ‘Which is best for my situation?’.

When comparing TypeScript and JavaScript, it's essential to understand that one isn't inherently better or worse than the other. Both languages have their strengths and weaknesses, and their suitability depends largely on the context of use.

In fact, since TypeScript is a superset of JavaScript, you can add TypeScript into your projects incrementally and opt-in to features as you need them. (More on this later).

So which should I use when building larger projects?

Both can work with small or large projects. However, if I had to choose, then TypeScript tends to shine in larger projects.

Why?

Well, features like static typing and interfaces help catch errors at compile time, make the code easier to navigate, and support more advanced tooling. Also, TypeScript's class support provides a familiar structure for developers coming from class-based languages.

This makes TypeScript a popular choice for large-scale enterprise applications or for projects where maintainability and scalability are a priority.

For example

• Microsoft: TypeScript was developed by Microsoft, and many of its own projects, including Visual Studio Code, are written in TypeScript
• Google: Google's Angular framework is built with TypeScript. Google has also been using TypeScript in various internal projects
• Facebook: While Facebook primarily uses Flow (a static type checker for JavaScript), they have incorporated TypeScript into some projects. Additionally, some Facebook employees contribute to TypeScript development
• Slack: The popular team collaboration tool Slack has been gradually adopting TypeScript in its codebase for better scalability and maintainability
• Asana: Asana, a project management tool, uses TypeScript in its frontend codebase to improve code quality and developer productivity
• Netflix: While Netflix primarily uses JavaScript, TypeScript has been used in some internal tools and projects to take advantage of static typing
• Uber: Uber uses TypeScript in its web applications to enhance code maintainability and provide a better development experience

Which should I use when building smaller projects?

This also means that JavaScript could be a better option for smaller, less complex projects.

JavaScript's dynamic typing and flexibility can lead to faster development times, as there's no need to deal with types or a compilation step.

Its forgiving nature can also be more beginner-friendly so it's a great choice as your first programming language.

Plus, with JavaScript, you can leverage the vast ecosystem of libraries right away without worrying about type definitions.

Which has the best community support?

JavaScript has been around for much longer than TypeScript and has a larger community and a broader range of third-party libraries and frameworks.

This wealth of community support can be of great value during development.

Which has the best future compatibility?

TypeScript, being a superset of JavaScript, includes all JavaScript features and then some.

As newer JavaScript features become standardized, TypeScript is often quick to adopt them. So, developers using TypeScript should be future-proofed against changes in the JavaScript landscape.

Final thoughts on which is best: TS vs JS

In conclusion, the question of whether TypeScript is better than JavaScript isn't a matter of one being universally superior.

• TypeScript offers robust features for stricter typing and scalability, making it ideal for larger, complex applications
• While JavaScript, with its dynamic nature and flexibility, can be better suited for smaller projects or for developers prioritizing speed and simplicity

It really does come down to your end goals. Understanding the strengths and weaknesses of both languages allows you to make the right choice based on the specific needs of your project.

Just tell me Jayson... Should I Learn TypeScript?

The best developers are always learning, adapting, and picking up different tools to add to their toolbox.

If you're already a JavaScript Developer, you should definitely learn TypeScript and make it the next tool you add to your toolkit.

1. You'll be able to pick it up quickly thanks to its similarities
2. It's useful for all jobs or roles where you'd normally use JavaScript

Boom! You get to add an extra tool to your toolkit for minimal time to learn it... seems like no brainer ROI to me.

The best part as we've seen is that you don't have re-write entire projects in TypeScript because it was designed for gradual implementation.

This makes it's possible to implement TypeScript code into existing JavaScript projects over time in order to enhance maintainability and reliability.

Speaking of which...

TypeScript vs JavaScript code examples

To help you grasp some of these concepts a little easier, let's dive into some practical examples to illustrate the differences between TypeScript and JavaScript, and how you might even combine them.

Static typing examples

In JavaScript we have:

// JavaScript
let name = 'John Doe';

However, in TypeScript we can optionally specify the type when we declare a variable:

// TypeScript
let name: string = 'John Doe';

Why care?

Simply because this TypeScript feature ensures that once a variable is declared as a certain type, any attempt to assign a value of a different type will result in a compile-time error, which we can then resolve:

// TypeScript
let name: string = 'John Doe';
name = 42; // ERROR: Type 'number' is not assignable to type 'string'.

However, we don't have to specify the type in all cases because the TypeScript compiler automatically infers data types when possible.

This means that the original JavaScript code is technically also valid TypeScript code, but it will also produce an error when ran through the TypeScript compiler:

// JavaScript
let name = 'John Doe';
name = 42; // ERROR: Type 'number' is not assignable to type 'string'.

Top tip: This compatibility allows you to gain some of the benefits of TypeScript without having to make any alterations to your existing code.

Simply change the file extension to .ts and then use the TypeScript compiler, and you can then increase the reliability of your programs by preventing potential runtime type-related bugs in your code.

Smart eh!?

So let’s look at some more examples.

Interfaces

In JavaScript, objects can have any properties:

// JavaScript
let student = {
	name: 'John Doe',
	age: 20
};

And in TypeScript, you can additionally define an interface to enforce a certain structure for objects:

// TypeScript
interface Student {
	name: string;
	age: number;
}

let student: Student = {
	name: 'John Doe',
	age: 20
};

However, with this TypeScript interface, if you try to create a student object that doesn't have both the name and age, or try to use a type that doesn't match those in the interface, TypeScript will throw a compile-time error.

This ensures that anytime you are working with a Student object you have both a name and age field of the appropriate type.

Fun fact? This information is also used by Integrated Development Environments (IDE) to provide hints as you write code, which can make it easier and faster to write code!

Classes

Both JavaScript and TypeScript support classes, but TypeScript has some extra features. For instance, TypeScript supports access modifiers (such as public, private, and protected), which JavaScript does not:

// JavaScript
class Car {
	constructor(make, model) {
    	this.make = make;
    	this.model = model;
	}
}

let myCar = new Car('Toyota', 'Corolla');

// TypeScript
class Car {
	constructor(public make: string, public model: string) {}
}

let myCar = new Car('Toyota', 'Corolla');

In this TypeScript example, we don't have to declare make and model separately. They are declared and assigned in the constructor parameters itself, and the access modifiers make it explicit whether these properties can be accessed outside the class.

Incrementally adding TypeScript to your JavaScript code

As I alluded to earlier, there's also no need to go all-in with every TypeScript feature. Instead, you can use a small subset of features strategically where you feel it will provide the biggest benefit.

One way to do this is to take your existing JavaScript code and sprinkle in some interfaces and type annotations to help make parts of your code easier to work with.

For example

We can take some of the previous code and then combine it into this JavaScript program:

// JavaScript
function greet(student) {
  console.log(`Welcome to the class, ${student.name}!`);
}

let student = { name: 'John Doe', age: 20 };
let teacher = { title: 'Mr. Instructor', section: 'CS101' };

greet(student);
greet(teacher);

The above code has a bug, as teacher doesn't have a name property, and so we get the message Welcome to the class, undefined when running the program.

We can fix this by adding a little bit of TypeScript, like so:

// TypeScript

// Create an interface for student objects.
interface Student {
  name: string;
  age: number;
}

// Add a type annotation showing that this function accepts Student types.
function greet(student: Student) {
  console.log(`Welcome to the class, ${student.name}!`);
}

// Creating the student and teacher objects remains the same.
let student = { name: 'John Doe', age: 20 };
let teacher = { title: 'Mr. Instructor', section: 'CS101' };

// OK
greet(student);

// ERROR: Argument of type '{ title: string; section: string; }'
//    	is not assignable to parameter of type 'Student'.
greet(teacher);

Boom! With just a little bit of extra code, we are now able to prevent the bug from occurring, and the message will always print correctly.

Important: While TypeScript will prevent undefined from printing, it won't stop us from using the greet function with a teacher if that teacher also has the name and age properties.

TypeScript provides the tools to fix this (with more code) if a higher degree of reliability is required. However, I'm comfortable with the current level of reliability for this particular code and there's no need to introduce added complexity and maintenance if the code is already working fine.

Just be aware of it if you play around with adding TypeScript like this into your own code.

Another idea would be to start new projects using JavaScript (thanks to its dynamic typing and flexibility). This will provide a streamlined and fast-paced development experience.

Then if and when your project reaches a higher level of complexity, switch over to .ts file extensions, use the TypeScript compiler, and add some interfaces and type annotations as needed.

This will allow you to maintain development speed as your project grows while also having reliable code.

Closing thoughts

As you can see, TypeScript isn’t better than JavaScript, nor is JavaScript better than TypeScript.

They can each achieve the same end goal but excel in different areas.

So it's a great idea to have knowledge and experience with both so you can use whatever one is best for your current project.

And remember that if you’re a current JavaScript dev who’s thinking of trying TS, you don't have to go all-in with TypeScript right away.

You can incremetally incorporate it into your code and workflow.

So why not start learning Typescript now?!

Check out my complete course on TypeScript here, or watch the first videos here for free.

And if you're already using TS and want to improve your JS skills, then I recommend learning these advanced JavaScript concepts.

Both of these courses (and more) are included with a Zero To Mastery membership.

And better still? When you join, you'll have direct access to me, other students, as well as full-time TypeScript and JavaScript devs in our private Discord channel - so you'll never be stuck!

BONUS: More TypeScript tutorials, guides & resources

If you've made it this far, you're clearly interested in TypeScript so definitely check out all of my TypeScript posts and content:

• TypeScript Cheat Sheet
• TypeScript Generics Explained: Beginner’s Guide With Code Examples
• TypeScript Interview Questions + Answers (With Code Examples)
• TypeScript vs. JavaScript… Which Is Better and Why?
• TypeScript Arrays: Beginners Guide With Code Examples
• TypeScript Utility Types: A Beginners Guide (With Code Examples)
• TypeScript Union Types
• Type Checking In TypeScript