Dan Kennedy

TypeScript and typed JavaScript at Frontend Engineering Sydney

Ryan Cavanaugh at Frontend Engineering Sydney, May 31

Multiply a string by an array, add a boolean, get back a number - thank you, JavaScript!

Back in 2011 Ryan Cavanaugh was starting to learn JavaScript, but realised implicit type conversions like this were a problem for the kind of large JS applications his company, Microsoft, were working on. “This is bad code”, says Cavanaugh. It’s just too likely to mask errors and cause bugs.

JavaScript wat code

Microsoft’s solution was TypeScript. Ryan joined the team early on, and has been spreading the good word ever since. Canva flew Ryan out from Seattle to talk about TypeScript at our second Frontend Engineering Sydney event, held at the Canva office on May 31. He was joined by Sharon Kuo and Marc Fallows of Canva, as well as Chloe Chen of Data 61 (CSIRO), who all shared their experiences with typed JavaScript technologies.

Ryan opened the talks with some discussion about the goals and non-goals of TypeScript. Statically identifying constructs that are likely to be errors, like those above, was high on the list.

“Statically” means “before your code runs”. We could have decided this differently, we could have said “What we’ll do is take Javascript and add code at runtime that checks to see if your types are correct”. But instead we said “Let’s do this statically, because we think that’s going to enable better tooling, and that’s going to drive those errors upstream rather than waiting until your code’s actually running.”

We then did a deep dive with a fun JavaScript code review, featuring code by Ryan and his (possibly evil) twin Brian Kavanaugh. This was followed by a discussion of the concept of soundness (never having wrong types in your program), and how TypeScript can help you when your computer doesn’t believe that your web app works.

Ryan continued with a detailed discussion of the tradeoffs TypeScript makes between soundness and working code. “Soundness and correctness are highly correlated” says Cavanaugh, but “we want to strike a balance between soundness and actual correctness and productivity.” Another of TypeScript’s goals is not to cause substantial breaking changes from TypeScript 1.0, and Ryan decribes how new TypeScript versions balance the value of finding new bugs in users’ code against the horrors of “opening up your program and seeing like 300 warnings that weren’t there before”. Ryan describes examples of generic type inference as a simple breaking change that had to be made.

Finally Ryan talks about the next steps for TypeScript, and how TypeScript picks the features they prioritise. “Improving the spectrum” of typedness options is a big priority. For users moving more towards types, TypeScript’s evolving flags like –strict aim to fill the gap, while the new checkJS flag released with 2.3 in April will help those with existing large JavaScript applications transition to types more smoothly.

So watch the video at the top of this post to hear Ryan explain how typed technologies can make JavaScript development better! Marc’s talk about how his passion for dynamic frontend typing slowly shifted into a love for static typing is also available below. Previous talk videos are available on the Canva Talks YouTube channel.

We look forward to seeing you at the next Frontend Engineering Sydney event!

Canva’s Marc Fallows at Frontend Engineering Sydney, May 31