It's time to ditch Medium for good! 🌈⚡️

Introducing Devblog by Hashnode. Blog on your domain for FREE. Highly customizable and optimized for developers.

Learn more

What are a few comparative differences between Typescript, and Javascript ECMA5 or 6?

I need to make a presentation at the office. I know JS pretty well, but know nothing about Typescript.

Any suggestions for where to start, how to start, what resources to use?

Write your answer…

First, you should explain what Typescript is and what problems does it solves.

TypeScript is a superset of Javascript that compiles to plain JavaScript. By superset I mean this:

Typescript superset

It supports all ECMAScript 6 features - arrow functions, classes, enhanced object literals, modules, generators, iterators, etc. and adds new features, not currently in the spec of ECMAScript at all like:

  • Type Annotations
  • Interfaces
  • Enums
  • Encapsulation with public, private and protected modifiers
  • Tuple
  • Namespaces
  • Generics
  • Mixins

Static Types

The static typing is one of the most power tools TypeScript provide. Its benefit is to enable IDEs to provide a richer environment for spotting common errors as you type the code. In a large JavaScript project, this leads to more robust and easier to maintain code. Bugs that are caused by false assumptions of some variable being of a certain type can be completely eradicated.

TypeScript is optionally typed by default. For example:

function sum(x) {
    return x + y
};

This is a valid function in TypeScript which can be called with any kind of parameter. TypeScript is smart enough to implicitly assign the type any before compilation. There is a --noImplicitAny flag, which will disallow this behavior. Enabling this flag gives you a greater degree of safety, but also means you will have to do more typing.

Types have a cost associated with them. There is a certain learning curve and it will cost you a bit of time to setup a codebase with the proper strict types.

Strict null checks

This feature was introduced in a recently released 2.0 RC and it's probably the most awesome thing ever! JavaScript error like cannot read property 'x' of undefined and undefined is not a function is very common. With TypeScript you can eliminate this kind of problems with the usage of non-nullable types.

When the flag --strictNullChecks is enabled, the TypeScript compiler will not allow undefined to be assigned to a variable unless you explicitly declare it to be of a nullable type. For example:

let x: number = undefined;

This will result in an error because undefined is not a number. You can easily use the Tagged union types, where you will explicitly tell that x can be a number or an undefined:

let x: number | undefined = undefined;

Why to use TypeScript

There are several advantages of using TypeScript :

  • more readable code
  • easier to analyse code
  • more reliable refactoring
  • catch errors early
  • using latest ECMAScript specs in all modern browsers.

When it makes sense to use TypeScript

When choosing TypeScript, you should ask this questions first:

Is your codebase large enough to the point of being difficult to maintain and refactor?

As mentioned above, TypeScript has a learning curve, that your development team needs to go through, not to mention the integration part. So, you and your team should make sure that TypeScript will be the right tool for your project before investing in it.

Are you OK with some potential performance penalties?

TypeScript compiler has features that require generating extra code (inheritance, enum, generics, async/await, etc). No matter how good the compiler is, it can’t surpass the optimizations of a good programmer. That said, the performance penalty is probably negligible compared to benefits of a type system and more modern syntax for most projects, but if there are cases where milliseconds matter, TypeScript won't be the best tool for you.

Are you OK with the introduced cost?

Starting fresh with TypeScript or migrating a codebase to TypeScript comes with a cost. You will have a period, where the development process with slow down and most of the members of the team, new to TypeScript can feel anxious. This is absolutely normal at first, but it's better to cope with this problems as fast as possible.

Migrating JavaScript to TypeScript

Migrating JavaScript to Typescript can be optimally done incrementally. It is best to make sure you TypeScript depends on your JavaScript and not the other way around where possible. This is because it is very easy to refactor TypeScript, but it won't refactor JavaScript that calls your TypeScript.

TypeScript 1.8 introduces a flag called --allowJs - TypeScript will run a quick sanity check on all .js files for syntax errors but otherwise passes them straight through to the output directory. After that, you can easily migrate all other .js files to .ts. You will most certainly have to fix the compilation typing errors, but this will be pretty straightforward in most cases.

Conclusion

Using TypeScript has more advantages than disadvantages in my opinion. Its popularity skyrocketed the last year and its adoption is increasing drastically. The project is improving with every release and more exciting features are on the way, as seen from the Roadmap.

Reply to this…

Share your programming knowledge and learn from the best developers on Hashnode

Get started

The real question is: In what direction should your presentation go? I cannot believe that you should just show in what ways the two differ and then throw some pros and cons at your colleagues. What do you want to decide with this presentation?

Well, for general comparison, there are obvious differences in syntax and philosophy (e.g. Typescript is typed which makes it a lot more stable when working in a team, since you can leave out all the type checks).

Then there is the thing with tool adoption. In general, there are more libraries and tools for JavaScript (afaik you will have to create special map-files in order to use JS libraries in TypeScript). Also you cannot really debug Typescript in a browser, as all browsers only understand JS, so you need even more specialized tools for it.

Maybe this article will help you understand some of the differences, similarities and what to make of the three.

the goal of the presentation is to explain the differences between JS and Typescript, as you mentioned syntax and philosophies.

Reply to this…