What is TypeScript?

TypeScript is a superset of JavaScript that provides a type system and a more robust development experience for individual contributors and teams. It was created by Microsoft and was open-sourced and is now maintained by the company and many others in the open-source community.

At its core, TypeScript is a superset of JavaScript. This means that any valid JavaScript code is also valid TypeScript code, and you can gradually adopt TypeScript in existing projects or use existing JavaScript libraries in TypeScript projects.

So, what does TypeScript add to JavaScript? The main feature of TypeScript is its static type system. This means that developers can specify the types of variables, function parameters, and function return values in their code. For example, here's how you might define a function that takes two numbers and returns their sum in TypeScript:

function addNumbers(x: number, y: number): number {
  return x + y;
}

In this code, x and y are both of type number, and the function itself returns a value of type number. The static type system can catch type-related errors at compile time before the code is run. This can save time and reduce bugs in production code.

TypeScript also adds other features beyond static typing, such as interfaces, classes, and modules. These features can help make code more self-documenting and easier to understand, especially in larger projects.

TypeScript can be used in a variety of contexts, including front-end web development, back-end server development, and even desktop and mobile app development. It's often used in conjunction with modern front-end frameworks such as React and Angular, which have tooling support that can improve the development experience.

One potential downside of TypeScript is that it has a steeper learning curve than JavaScript, especially for developers who are not familiar with statically typed languages. Additionally, the use of static types in TypeScript requires developers to spend additional time defining types and interfaces, which can slow down development.

Overall, TypeScript can be a valuable tool for developers who want to write more maintainable, scalable, and high-quality code while also improving developer productivity and catching errors earlier in the development process. If you're interested in learning more about TypeScript, check out the official documentation.

If you are a developer with a background in strongly typed languages like Java, C++, or others, you will find it fairly easy to understand at first glance - it is just strongly typed JavaScript. If you develop JS applications, you might also find it fairly easy to hit the ground running however like myself, you will quickly fall into the depths of confusion without proper learning of the language. Because of this unique blend of familiarity, it is inviting and fairly quick to pick up by any developer - regardless of background.

We now know that TypeScript is a superset or a suped-up JavaScript but what sorts of benefits does it offer to us? If JavaScript can get the job done, then why bother? These are quite common questions many developers ask when first being introduced to the technology. I will answer them below.

Some Benefits of TypeScript

TypeScript offers a type system to help avoid bugs at run time

What this means is, if you are writing code and you accidentally pass in an argument of a different type it expects, you will see the error - but not til runtime. TypeScript eliminates many run-time bugs ahead of time by safeguarding and warning developers during development time.

Below is an example of a bugged piece of code that would not generate any issues til it is running. The example represents a function that should join an array of characters into a word.

function join(strArray) {
  return strArray.join(''");
}
console.log(join('hello!'));

Do you see the bug? I passed in a string as an argument to the join function but it expected an array. This is a very common bug that is lost til run time. This is the biggest benefit of TypeScript! TypeScript captures bugs in development

Code Quality and Developer Experience

Both from a type perspective and development bugs - code quality, documentation and reusability become significantly hindered when relying solely on JavaScript. We call this "lost in translation".

While we can document code, reuse it and ultimately have clean code in JavaScript, it requires things like many comments, and external docs, sacrificing readability at times for clean, 1 line code snippets and more. It becomes a pain to maintain in large teams and at scale.

TypeScript solves these problems by letting the code be self-documenting and much more structured. Need an object to be explained for each of its types? No problem - TypeScript offers a feature called interfaces which helps define the shape and properties an object should contain along with an understandable, self-documenting name. When you create such an object sometime later in your code, you can type annotate that object with its corresponding type and voila! You not only have self-documenting code but when you hover over that code, it will give you inline docs and hints on what type and properties it holds. This is the beauty of the TypeScript compiler and code analysis. It demonstrates the usefulness of the language.

Here is an example of a self-documented TypeScript function. This function takes in a username as an argument and prints hello to that user.

interface User {
    username: string;
}

const printName = (username: User) : void => {
    let outputMessage : string = `Hello, ${username}`;
    console.log(outputMessage);
}

If I had not told you what the above example code would do, I bet you could tell me exactly what this all does - of course, assuming you know TypeScript which is why you are here - to learn it! Heck, I bet you could tell me what this does without TypeScript knowledge!

We will learn all about this syntax later. Do not worry. I am just a salesman for TypeScript at this point 😀

It is popular and benefits your career growth

TypeScript is growing like crazy in the development community. Many job postings for Frontend Engineers, Full Stack Engineers and more ask for TypeScript knowledge. This means now is the best time to get started!

The return on investment is high if you learn this language. It might be tough - or it might be easy - but the fact that it is increasingly growing in popularity proves that it is very valuable in a professional setting. This doubles down as a benefit of the language because of the job outlook but it also helps improve your prospects of a future role!

Some other benefits are:

• IDE support

• Scalable (great in large codebases)

• Better tooling

• TypeScript is becoming the default out of the box with frontend frameworks

• You can still write JavaScript in TypeScript - this helps all levels of JS devs

Some Cons of Using TypeScript

Increased complexity and development time

While it is true that the language offers many quality-of-life improvements, these improvements come at a cost - much more code and logic to get the same things done that would otherwise be trivial in JavaScript (of course, a lot less safe and maintainable).

The use of static types in TypeScript requires developers to spend additional time defining types and interfaces, which can slow down development. Also, TypeScript adds additional complexity to projects, which can make code harder to understand and maintain, especially for smaller projects.

False Realities

While TypeScript does offer a lot of safeguarding for us, code maintainability and cleanliness (even when it can backfire like mentioned above) the biggest issue to me is that we can quickly become consumed by a false sense of security. What this means is, because we opted to use TypeScript, we might think our code is error-free, bulletproof of bugs and more. In reality, nothing can be perfect. So, it is a balance for developers to tangle with. You must understand that TypeScript can only do so much for you - it will not save you from everything.

Compatibility Issues

While TypeScript is compatible with most JavaScript code, there may be compatibility issues with some libraries or frameworks that are not designed to work with TypeScript. This is changing now in 2023 and beyond. While this is still an issue in many projects and libraries, the community is continuously working to add TypeScript support to libraries and projects. Don't let this con drive you away.

Conclusion

Do not worry if things seem vague or too generic. This whole series will continuously explain new topics, benefits, syntax features and much more. If I could leave you with anything after this brief introduction to TypeScript, I would say learn it now! I truly believe TypeScript is the future of developing projects for the web.

My next post will be all about setting up a TypeScript project and getting acquainted with the differences between a TS environment versus JS. Like any language, learning types and the core fundamentals might be dull, but it is necessary for the journey! I will do my best to keep the articles light and engaging. The goal of this TypeScript series is to teach all of its fundamentals and provide valuable examples to developers consuming my content - so please stay tuned.

Thanks for reading

Learn More About Me