TypeScript for JavaScript Developers

TypeScript for JavaScript Developers

TypeScript is an object-oriented programming language developed and maintained by the Microsoft Corporation. It is a superset of JavaScript and contains all of its elements. TypeScript is a compiled language. You write TypeScript and it compiles to JavaScript. Essentially, you’re writing JavaScript, but with a type system. JavaScript developers should have a seamless transition because the languages are the same

TypeScript is an object-oriented programming language developed and maintained by the Microsoft Corporation. It is a superset of JavaScript and contains all of its elements.

TypeScript is a compiled language. You write TypeScript and it compiles to JavaScript. Essentially, you’re writing JavaScript, but with a type system. JavaScript developers should have a seamless transition because the languages are the same

We know TypeScript will make you a better JavaScript developer for several reasons. You’ll feel confident when writing code. Fewer errors will appear in your production code. It will be easier to refactor code. You’ll write fewer tests . And overall, you’ll have a better coding experience in your editor.

Here’s a basic example of a function in both JavaScript and TypeScript:


function helloFromSitePoint(name) {
    return `Hello, ${name} from SitePoint!`
}


function helloFromSitePoint(name: string) {
    return `Hello, ${name} from SitePoint!`
}

How TypeScript Makes You a Better JavaScript Developer

1. More confidence

TypeScript will boost your confidence while working in unfamiliar codebases and on larger teams. If you know TypeScript, and you join a new team or new project that uses TypeScript, you will feel less worried. You know TypeScript will lend you a hand. The language provides more readability and predictability of code because you can look at something and immediately infer how it works. This is a direct result of the type system.

Function parameters are annotated so TypeScript knows the valid types for the values you pass.

type Color = "red" | "blue" | "green"

// Here, you know color must be of type "Color", meaning one of the three options
function printColor(color: Color) {
  console.log(`The color you chose was: ${color})
}

Function return types will either be inferred or annotated.

function sum(a: number, b: number) { // TS infers the return type as number
  return a + b
}

function minus(a: number, b: number): number { // We annotate the return type as number
  return a - b
}

Often with TypeScript, your teammate’s code is self-explanatory. They don’t need to explain it to you because the types add context to the code. These features allow you to trust the team more. You operate at a higher level because you spend less time worrying about silly mistakes. It works the same way for your code as well. TypeScript forces you to write explicit code. The side effect is an instant increase in the quality of the code. In the end, you’ll find yourself feeling more confident working in TypeScript as a JavaScript developer.

2. Fewer production errors

TypeScript will catch your would-be production errors at compile time rather than runtime. When you’re writing code, TypeScript will yell at you if do something wrong. For instance, take a look at this example:

Notice how colors has a red squiggly? That’s because we’re calling .forEach on it, but it may be undefined. This could cause an error in production. Luckily, TypeScript tells us while we’re writing the code and won’t compile until we fix it. As a developer, you should be the one catching this rather than your user. TypeScript will almost always eliminate these types of errors because you see them when your code compiles.

3. Easier to refactor

Refactoring code becomes easier with TypeScript because it will catch errors for you. If you rename a function, it will let you know if you forget to use the new name somewhere. When you change the shape of an interface or type and remove a property that you thought wasn’t being used, TypeScript will correct you. Any changes you make to your code, TypeScript will be the person behind you saying, “Hey. You forgot to change the name on line 142.” I heard someone once call it “continuous refactoring” because you can refactor large portions of a codebase quickly. It’s a beautiful thing and proves to be more maintainable for the future.

4. Fewer unit tests

TypeScript abolishes the need for some unit tests such as function signature tests. Take this function for example:

interface User {
  name: string;
  age: number;
}

function getAge(user: User) {
  return user.age
}

We no longer need a unit test to make sure getAge is called with the appropriate type of value. If a developer tries to call getAge with a number, TypeScript will throw an error telling us the types don’t match. As a result, this allows us to spend less time writing simple unit tests and more time writing things we enjoy more.

5. Better Coding Experience in Editor

One of the areas where TypeScript will benefit you the most is in productivity via autocomplete and “future” JavaScript. Most major IDEs and editors including Atom, Emacs, Vim, VSCode, Sublime Text, and Webstorm have plugins for TypeScript tooling. We will be referring to some of the features available in VScode for this section.

The first feature which will increase your productivity is the autocomplete. This is when you’re looking for a method or property on a class or object. If TypeScript knows the shape, it can autocomplete the name for you. Here’s an example:

Notice how I haven’t finished typing the properties for myFriend. Here, you see TypeScript begins suggesting the property name because it knows the shape matches User.

I’m writing a function called printUser. I want to log the user’s entire name to the console. I go to define lastName and see a red squiggly line. Hovering over it in my editor, TypeScript tells me, “Property ‘lastName’ does not exist on type ‘User’. This is super helpful! It caught my silly mistake for me. Pretty neat, right?

The second feature that improves our experience is TypeScript’s ability to let you write “future” JavaScript. Usually, we need multiple Babel plugins to do this. TypeScript, on the other hand, provides this same feature, but for the cost of a single dependency. The TypeScript team does an excellent job following the ECMAScript spec, adding Stage 3 and above language features. This means you can leverage newer additions to JavaScript without messing with a plethora of dependencies or configuration. Doing this will put you ahead of your fellow JavaScript peers. Both of these features combined will elevate your efficiency as a JavaScript developer.

Conclusion

It’s important to hear the opinions of others, but nothing beats forming your own opinion based on experience. We know TypeScript will improve your confidence, help you catch errors and refactor code faster, and improve your overall productivity. Now go out, try TypeScript yourself, and let us know what you think!

javascript TypeScript

What's new in Bootstrap 5 and when Bootstrap 5 release date?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Random Password Generator Online

HTML Color Picker online | HEX Color Picker | RGB Color Picker

The essential JavaScript concepts that you should understand

The essential JavaScript concepts that you should understand - For successful developing and to pass a work interview

What TypeScript taught me about JavaScript

What TypeScript taught me about JavaScript. TypeScript was designed to make the most sense out of any JavaScript code. How void behaves in both TypeScript and JavaScript. What Symbols are and why they can be unique. Why substitutability is such an important concept for TypeScript

Introduction Boolean in JavaScript and TypeScript

Boolean values are supported by both JavaScript and TypeScript and stored as true/false values .This is because, while JavaScript coerces an object to its primitive type, the TypeScript type system does not. TypeScript treats it like an object type.

Typescript vs Javascript

Learn what the pros and cons of Typescript are to help you decide whether you should use it or stick to javascript.

Using TypeScript to Write Better JavaScript 

The way we write JavaScript can always be improved. As the language evolves and more convenient features are added, we can also improve by using new features that are useful. In this article, we’ll look at some ways to write better JavaScript by using TypeScript. Write JavaScript by using some basic TypeScript features.