However, when using TypeScript and VS Code, you can see the documentation right in your IDE:
Let’s see an example using node and express.
The cool thing about this is that if you don’t know what the send function does, you can just place the cursor on it and get some information:
Also, if you want to know more about what the variable res can do, you can just hit Ctrl + . or Cmd + . :
Moreover, when working on a project with teammates, you don’t need a lot of documentation if you are using TypeScript. Using good function/variable names and setting the types to each variable/function, should be enough to express the responsibility of that variable/function. Of course, there are exceptions in which a function is too complicated and a comment would make it easier to understand, but this should be an exception. It’s always best to avoid commented code.
The result of executing the code is:
However, let’s modify our function to add the first elements of two arrays, like this:
The result of executing this code is:
As you can see, it seems to work well with strings, but we get a NaN with integers because we cannot access a specific index of an integer.
The example includes very simple code, but if we were dealing with real software, where you have to modify a function that impacts or is used by a lot of other functions or other external services, this could become a problem. You may need to know exactly what the parameters are, and what they represent, and what the function you’re modifying is returning.
On TypeScript, the same function would look like this:
As you can see, we are specifying the type for each parameter, which allows us to know that we are receiving a number as a parameter and returning a number as well.
This means that if you call the add function with a string, as in the example below, you will get an error:
If you are using VS Code, you can see this before you even run the code:
The same happens if you return something other than a number:
Another example would be to add or remove parameters from a shared function.
Let’s assume we have the following structure:
In utils.js we have a function that only concatenates two strings with a space between them:
And in index.js we call this function like this:
If we do not modify our code on index.js to pass another parameter to our function, we will not notice any errors until we run the code:
Here we are only using our function in one part of the code, but if you were using this code in multiple locations of a large project, you would not get an error anywhere because it would not crash. Instead, you would get an unexpected behavior because, somewhere, you would be getting an undefined where a different result was expected.
Let’s see what happens when we use TypeScript. The structure would be the same, but with ts extensions:
The utils.ts file would look like this:
And the index.ts file would look like this:
Here, if you failed to provide all parameters, the interpreter would tell you that something is wrong:
And if you ran the code, you would get the following error:
This is one of the advantages of TypeScript because we know exactly what went wrong and where. Therefore, other functions won’t get an expected result and work as if nothing had happened.
Let’s follow the same structure as the example above, but adding the add function to the utils.ts file, and using it on the index.ts file:
If you are using VS Code, you would get some warnings on the index.ts file:
As you can see, we need to import these functions.
Using TypeScript and VS Code, we can import all the functions that are being used by tapping Ctrl + . or CMD + . and selecting “Add all missing imports”:
We can get the best out of interfaces using TypeScript.
You can create an interface like this:
If you have a function that receives a User as an argument, you could access its properties without looking at its file:
Now that we’ve looked at the main features, here is a summary of the pros and cons for each language:
- TypeScript gives a better understanding of your code by introducing typing, so others (teammates or clients) can use it with the confidence of knowing what it does and what it needs.
- On TypeScript, you can use interfaces to specify your own “types” and make the code cleaner and understandable.
- TypeScript allows you to go through documentation more easily and faster, as well as make your own documentation a lot simpler.
Both languages have their pros and cons and their extra features. Choosing between the two will come down to your team’s needs or even the needs of each specific project. We hope this article has given you enough information to make the right choice.