Choosing TypeScript

Since its inception, TypeScript has been touted as a supercharged version of JavaScript that has the ability to spot common errors through a typed system, making the application more robust throughout its development.

Prior to developing Alexandria, we looked into TypeScript as a feasible substitute to JavaScript.

Static typing

JavaScript is dynamically typed. Therefore, it is not aware of variable type before instantiation at run time. TypeScript, on the other hand, is statically typed. Once an object’s type is declared, will only take certain values and can no longer be changed. Adding type support to JavaScript allows Typescript to catch type errors during compilation. Bugs caused by false assumptions of variable type are potentially eradicated.

Suppose we want to create an object called UserWord that represents how a user is saved to the database by adding a translation and status.

type UserWord = {
  id?: number,
  word: string,
  status?: Status,
  translations: Array<Translation>,
  languageId?: string
};

UserWord has 5 properties with predefined types. If languageId was added as a number type, TypeScript would immediately warn us.

An even better example is the translations property, which takes an array of Translation type objects. If an attempt was made to add an object not of type Translation, we would again be warned by the compiler.

If an attempt was made to add a property not yet declared on the type, for example, language, the compiler would warn us that the property language does not exist on type UserWord.

Compiler warnings could alert us to the existence of bugs ranging from type-related bugs to misspelled variables, before the code was even run. Over the course of development, this could save significant time and frustration, as far fewer errors would make it into the codebase.

Code readability

TypeScript has the potential to increase code readability.

Let’s look at a function that takes an object as a parameter. In JavaScript, a developer would have to be familiar with the object and its properties, or possibly log the object to the console, in order to see what properties exist on the object. With TypeScript in VSCode, a developer can simply mouse over the type declaration to see a list of the properties that object will have, as well as the each property type.

Easy refactoring

Validating connections between different parts of a project is time consuming and error-prone, especially when one needs to refactor. By providing instant feedback during development, TypeScript makes refactoring a breeze. For example, if a function name is changed in one file but not in another, the TypeScript compiler will immediately alert developer to the issue, showing the exact file and line of code where the problem resides. This allows developers feel more confident in the code, and saves considerable time in ensuring no part of the project became broken during refactoring.

Future advantages

As the codebase grows, having knowledge over the properties of an object increases code stability, and makes it easier to onboard future contributors to Alexandria.

Disadvantages of TypeScript

Although TypeScript is a productivity booster when used correctly, there are disadvantages.

  • The typing system can be difficult to use properly, resulting in more code written as well as room for bugs and complications.

  • TypeScripts static typing is not true static typing. Once TypeScript is compiled, it is transpiled into untyped JavaScript, meaning we may still encounter bugs not found by the compiler. This may result in a false sense of security.

  • When importing npm packages into the code, the TypeScript compiler has to rely on the availability of a corresponding type package. If it doesn’t exist, or there is a mismatch in version or any other inconsistency, using that package will become problematic.

  • Dynamic typing, the “weakness” that TypeScript intends to remedy, can actually be one of JavaScripts strengths in certain situations, for example when dealing with collections of varying or unknown types, especially when these are nested.

Conclusion

Overall, we felt the type-checking benefits offered by TypeScript outweighed the disadvantages during the development of Alexandria. Improved error-checking capabilities, readability, and the subsequent gains in team productivity made TypeScript the clear winner.