This cheat sheet is an adjunct to our Definitive TypeScript Guide. Originally published November 2018.

Originally published October 2018. Updated March 2023. This article describes the features and functionality of TypeScript 5.0. One of the most interesting languages for large-scale application development is Microsoft’s TypeScript. TypeScript is unique in that it is a superset of JavaScript, but with optional types, interfaces, generics, and more.

Originally published November 2018. Updated November 2022.

Modern JavaScript is amazing. There are so many features you might not have had a chance to use, and some that are probably being utilized by some of your favorite frameworks and tooling.

In the beginning was HTML, and our pages were fast. But they were boring, so we added JavaScript.  JavaScript ended up being so capable that we ended up creating entire applications with it, dynamically creating and destroying DOM interactively to users’ delight.

How often have you wanted to yell at your computer or phone? What if your device could save that tirade as a text in an email or note you could review in the future, a memento of your favorite outbursts? Or, maybe you want to provide your users a more hands-free experience, with alerts that also speak to you. Or you simply want to add a clean voice-to-text component to your application.

Web bundles are an exciting part of the web packaging specification. They provide you the ability to package up your entire website into a single bundle and share it with others.

Ask almost any developer what their greatest fear is and one deep-seated topic will rise above the rest… dates.

In March 2022, a Stage 0 proposal was announced that would add TypeScript-like type annotations to the JavaScript language. The utility and ergonomics of static types for JavaScript have been debated since before TypeScript’s inception; some developers feel that types add needless complexity to the language, while others feel that types add a much-needed safety net.

Deno, introduced by Node.js creator Ryan Dahl during JSConf 2018, has grown into a credible alternative to Node.js, and the JavaScript and TypeScript communities have continued to track Deno’s progress. Like Node.js, Deno is a system for executing JavaScript code in various environments ( desktop, command-line, server, etc.).

Among the vast number of improvements that ES2015 brought to the JavaScript language was a powerful feature called “template literals.” Naturally, TypeScript, as a superset of JavaScript, has supported this useful construct since its beginning. However, TypeScript 4.1 introduced a novel application of the template literal concept to increase the power and usefulness of its type-system: it introduced something called a template literal type.

TypeScript has become a hugely popular alternative to JavaScript in the frontend web development community. Many engineering teams are convinced it is a critical tool that allows them to write better code faster.

Rome is a new set of tools for working with web-facing technologies like JavaScript, TypeScript, JSON, HTML, Markdown, and CSS. The toolchain currently supports linting and formatting, with active plans to also support bundling, compiling, minification, type checking, testing, and documentation generation.

When developing web applications, choosing a UI component library is one of the earliest decisions your team has to make. Beyond reducing the amount of functionality your team has to maintain, UI component libraries shield developers from the complexities involved in designing user interactions that are accessible and behave correctly across browsers and devices.

Machine learning is a subset of AI that is concerned with algorithms that can improve through experience. Experience in this case generally translates to being fed lots of data.

The recent TypeScript 3.9 release primarily focuses on performance and stability, but it does include some language updates that are worth a closer look. Continuing its quest to save you from yourself, TypeScript 3.9 expands on the uncalled function checks that were introduced in version 3.7.

React Native is a JavaScript framework for writing hybrid native mobile applications for both iOS and Android platforms. React Native uses the same JSX and React development approach you would take for developing for the browser, but applications get built as native applications in Objective-C (for iOS) or Java (for Android) by the React Native tooling.

In many ways, TypeScript is more like a powerful linting and documentation tool to author better JavaScript, rather than a separate programming language. One significant benefit of TypeScript is its deliberate support for some of the latest ECMAScript language features.

Intern has always taken a different path in the pursuit of flexible automated web app testing. In the early days, Intern leveraged AMD modules when most other testing frameworks were not modular or only supported CommonJS modules, allowing Intern to support modular code in any environment.

The ubiquity of JavaScript is undeniable; it’s the universal language of the web — a position that no other languages hold. JavaScript is flexible, able to adapt and grow as the web grows.

HalfStack is a series of tech conferences focused on half of the web development stack – specifically, the part you interface with. It lives up to its claims of being “an authentic, high value experience for attendees and sponsors focused on UI-centric JavaScript and web development.” Friday, January 17, 2020 Alamo Drafthouse, Chandler, Arizona The morning got off to a great start with comfortable seating and fine dining at the Alamo Drafthouse in Chandler.

In 2007, we were invited to speak at the Apple WWDC event. At the time we didn’t know why we were invited.

With the boom of location-based technologies like mobile location services and the Geolocation API in the browser, we have seen the growth of mapping and location inside of applications. Alongside this we have seen numerous mapping libraries appear for the web, allowing developers to build map-based experiences into their apps.

As a first-time JSConf attendee, I happily embraced the welcoming culture and fun atmosphere – surfing, anyone? But I was even more impacted by the presentations centered around JavaScript expanding beyond the browser, using JavaScript to help others, and the focus on community. Of course I’m an avid JavaScript engineer and believer (why else would I be at JSConf), but I left feeling awed and inspired after seeing how progressive and impactful the JavaScript ecosystem can be.

Rendering large data sets in the browser while optimizing for performance and accessibility is a complex problem. The current approach to handling long lists of data is using an infinite scroll pattern to incrementally load and render data just before the data enters the view.

If you need to build a desktop application today, Electron is an increasingly common choice. It is cross-platform and is built using the same web technologies that you probably already know.

When building web apps, writing processing intensive code can be a challenge. One issue is getting predictable running times across browsers and JavaScript engines that optimise different code paths differently, as well as producing code that doesn’t interfere with user experience.

So you’ve built an amazing app using Dojo and now you are ready to go live. After a bit of research, you learn that traditional deployments are challenging! Luckily, the days of FTPing files are long gone, and we can rely on Docker for fast, reliable deployments.

Augmented Reality (AR) brings digital information or media and interweaves it with our experience of the real world. In recent years Augmented Reality has become apparent in the consumer space in two major formats: head-mounted displays such as the Microsoft HoloLens and the Magic Leap along with more widely available experiences on mobile devices.

Esri provides the excellent ArcGIS for JavaScript API for building geospatial applications. Their approach has grown substantially over the years, from basic two-dimensional maps comparable to early Google Maps implementations to now cover nearly everything I can imagine wanting to do in a 2-D or 3-D map.

One common complaint around web applications is that they can feel slow or clunky compared with native applications. Sometimes we find sites that can take a long time to load (let’s say longer than 3 seconds) and sometimes those sites feel non-interactive or ‘janky’ when we try to interact with them.

Maintaining software is challenging. Stagnant software quickly becomes obsolete and this couldn’t be truer than in the JavaScript ecosystem.

For many years there has been the only way to write client-side logic for the web; JavaScript. WebAssembly provides another way, as a low-level language similar to assembly, with a compact binary format.

Photo by Annie Spratt on Unsplash The Ecma TC39 committee, which standardizes the JavaScript language (officially known as ECMAScript), has been discussing a decorators proposal for several years. Transpilers like TypeScript and Babel implemented the initial version of the decorators proposal, allowing developers and frameworks to start using the proposal before the feature became an official part of the language standard.

SitePen participates in a number of conferences around the world presenting new technology and ideas to engineers and designers. Recently Dylan Schiemann and Tom Dye spoke at the HalfStack Conference in London and Paul Shannon spoke at Phoenix TypeScript meetup.

WebAssembly has grown in popularity due to its ability to improve application performance and support transpilation of source code in other languages into something that may get leveraged in a web browser. Every time the JavaScript language gets challenged, the community strives to create mechanisms to improve performance bottlenecks, which we have seen over the years with efforts from Mozilla, Google, Apple, and Microsoft.

Last Thursday I was lucky enough to get over to the highly regarded web development conference ffconf in Brighton. This was my first time at the event and I can say that it lived up to and even exceeded my expectations.

Every year, Esri, the world’s largest geospatial software vendor, runs its developer summit in Europe. This conference, the Esri EU DevSummit, attracts around 350 developers working with Esri technology from across Europe, all coalescing in Berlin.

All Things Open is a large, community-created open source conference in Raleigh, North Carolina, with nearly 4,000 attendees and 20 concurrent sessions. At this year’s event, I was invited to deliver a talk similar to one I had presented at JSConf titled “React Already Did That.” The session itself is not actually about React, but about several key concepts in how the JavaScript ecosystem evolves.

The 2018 edition of the Node+JS Interactive conference featured nearly 1,000 JavaScript and Node.js enthusiasts at the first combined event organized by the Node.js Foundation and JS Foundation. The event included nearly 100 sessions, panels, and community events designed to help grow and foster the JavaScript ecosystem.

A common complaint of modern web apps is the concept of jank; web pages being unresponsive to user input and frame rates being low. Left unmitigated, this problem leads to a poor quality experience for end users of our web applications.

The CSS Paint API is a modern web platform feature to programmatically create images in JavaScript which are rendered to the page when referenced by CSS. You create images using the Canvas API, an API with which you may already be familiar.

The Web Locks API is a new addition to the Web Platform which allows you to execute JavaScript in a lock, a resource which can potentially get shared with other browser tabs. This API is currently available in Chrome and other Chromium-based browsers with no major signals from other browser vendors.

At this months’s FullStack London 2018, SitePen Engineer James Milner presented the talk “Improving User Experience With Web Workers”. Web browsers use single-threaded JavaScript to perform tasks; business logic, layout, reflows, and garbage collection.

At this month’s FullStack London 2018, our CEO, Dylan Schiemann, presented the talk “Choosing a Framework”, based on our Choosing a Framework blog series. Given our long history in web development, we’ve seen JavaScript evolve from an obscure simplistic scripting language to the language of the internet.

Resize Observer allows developers to receive notifications when the size of an element’s content rectangle changes. This helps manage a variety of application layout scenarios including responsive application layout, flexible layouts such as split panes, or dynamic changes in content within an element in a page.

Nest is a scalable framework for building server-side applications. It is authored in TypeScript and relies on the Express framework.

At the recent TSConf, SitePen engineer Sarah Higley delivered a talk titled Escape the Office: Designing Interfaces for Other Developers. The moment you step into any large project or open source venture you must accept that code you write gets used in ways you did not originally intend.

At the recent NEJSConf, SitePen engineer Sarah Higley delivered a talk titled Don’t forget your keys. People tend to assume everyone navigates the world in the same way they do: on two legs, responding to visual cues, hearing speech, reading emotion.

WebAssembly is an emerging standard for a low-level assembly-like language in a compact binary format that runs with near-native performance, and is available as a compilation target for a variety of languages. We’ve heard significant misunderstanding around WebAssembly and what it means for the web and JavaScript.

Intern Recorder is a Chrome extension that can kickstart the process of creating functional tests for Intern. It was initially released in 2015 users of Intern authored test suites as AMD modules.

We have somehow reached a point in time where the integration of life in digital and physical spaces has spawned scores of scholarly articles with titles like “The emerging online life of the digital native.” In a practical sense, it has become increasingly difficult to participate in society without using the internet in some form. Communication, commerce, access to education, and transportation all take place online in full or in part.

Intern is a popular JavaScript testing framework with an extensive feature set. While Intern has traditionally been focused on testing applications written in standard JavaScript, it has also had great support for TypeScript.

It is like the old proverb, “It takes a village to raise a web framework.” As we explored in the previous post, choosing a framework goes beyond the technical features of a framework and this is certainly true when it comes to the wider community, which includes considerations like licensing, how open the framework is, and where to turn for education and support. While each web framework we have been discussing is an open source framework, there is a wide spectrum of what that actually means and how it affects the use and future development of a framework.

Many modern web applications depend on JavaScript. When the complexity of your JavaScript increases, so does the maintenance cost.

Introduction Accessing paint metrics from JavaScript Reporting paint timing metrics to a server Viewing paint metrics in the Chrome DevTools Browser Implementations Traditionally, front-end performance focused primarily on page load times as an important performance metric. Commercial web performance dashboards would show granular level performance metrics for back-end aspects, like database lookup times, template compilation, server response times, etc.

Automating browsers provide many benefits including faster execution of repetitive tasks, ability to parallelise workloads and improved test coverage for your website. Google recently announced Puppeteer, a new tool to assist with Chrome browser automation.

For a web framework to be effective, it should offer you more than just functionality. It doesn’t matter how much hard work you put into your application if it breaks when people use it.

On the modern web platform, many interesting features appear which enable new functionality which were not previously possible, for example, Web Bluetooth, Background Sync & Web VR. For new features in JavaScript specifically, many are just syntactic sugar for things you could already do in an alternative way, like template literals, arrow functions & the spread operator.

Angular is an application framework favored by many in the JavaScript community. Angular provides a library for building encapsulated components, dependency injection, a templating language with data binding, an application router built on observables, and a command line interface that lowers the barrier to entry.

As developing for the web has matured and JavaScript engines have become faster, one area remains a significant bottleneck – rendering. It’s because of this that so many of the recent development efforts have been focused around rendering, with virtual DOM being one of the more popular examples.

As we create and improve open source software, and build many applications for our customers, we’re constantly looking for things that will improve the software we create. Part of this is looking at an often dizzying array of proposed and emerging standards, and finding those that feel efficient and ready for use.

Unless you have a time machine or a TARDIS, it’s pretty rare to have solid documentation in place before an open source project is released! While we’re getting close to a beta release with the Intern 4 and while we still have a fair amount of documentation and refinements to complete, a number of people have started using Intern 4 to leverage its support for easier testing with modern ES6+ and/or TypeScript features. Intern 4 has many benefits and improvements over Intern 3 and previous approaches to testing.

Let’s figure out how to play our album. Is it a 45 vinyl or some sort of fancy SACD? Gaining insight into how we might develop and deploy an application built on a web framework helps us figure out if it is the right fit for our team.

As new user interface component frameworks are created and old frameworks are replaced with emerging technologies, methods for styling those components must change with them. Long gone are the days of creating a simple HTML component and importing a simple CSS file with corresponding class names.

Traditionally, engineers use mixins, decorators, inheritance, and plain code duplication to add common functionality to a handful of components. Mixins and decorators can modify the target object in such a way that you are never really sure what methods are safe to override without unwanted side effects.

Previously on Web Frameworks, we looked at how various frameworks deal with the concept of applications. Akin to listening to the whole album, we got a sense of how the frameworks pull it all together.

There are many reasons to like React. It provides a nice library for writing reusable components and leverages its own virtual DOM, abstracting away the obtuse native DOM APIs in favor of a simple method calls, which are further abstracted away with a JavaScript language extension, JSX.

Applications built with web technologies, something that was a curiosity a few short years ago, have emerged onto the scene as a must have for most organizations. Transcending websites and providing users with a more open and unbounded experience, web applications are everywhere.

As businesses expand into new markets and existing markets become more diverse, it is increasingly rare that enterprise applications can expect to serve speakers of only one language, with identical expectations for how they should be addressed or be presented data. In spite of this, globalization — the process of catering an experience to users in specific regions — receives less attention than is warranted, and many times is an afterthought in application development.

A significant amount of work on JavaScript toolkits and frameworks has centered around trying to fix, normalize, and optimize browser implementations. Doing so requires making many assumptions about what the problems are, how our tools will be used by developers, and what we expect of the future.

We have previously discussed the look and feel of web frameworks. While we often become interested in a framework based on the stylishness of the widgets and applications it can create, this may lead to a similar approach to how we have historically selected music.

While instruments such as guitar and drums are part of a band, how they are used by the musicians define the style of the band’s music. Similarly, the elements of an application user interface connected together define the user experience.

Since we released Intern in 2013, the state of JavaScript testing has changed substantially. The JavaScript world was a very different place.

Whether it is Top 40 or classical or R&B, artists and music have a recognizable look and feel. When looking at frameworks, some simply provide us with a bag of instruments, while others provide us with chord progressions and album covers we can customize.

…we would all be using justin-bieber.js. We as an organization have been working with JavaScript since 2000.

For a concise read on why the enterprise should care about using TypeScript in its applications, look no further than Remo Jansen of the Aon Centre for Innovation and Analytics’ presentation on the 6 reasons you should be using TypeScript. The SitePen engineering team has been using TypeScript since it came onto the open source scene 5 years ago.

As we noted in our post about the open and incremental approach to TC39, one of the challenges facing TC39 is that it has grown in size substantially along with the community interest in JavaScript. ECMA has started to address this by creating a few additional standards bodies for sections of JavaScript that can be decoupled from the core language.

TypeScript 2.3 is the latest version in the quarterly release cycle from the TypeScript team. This release contains several useful additions to TypeScript which we have already started to leverage within some of our current projects.

dojox/gfx is Dojo 1.x’s vector graphics library, with support for SVG, Canvas, and other legacy rendering environments through a drawing API based on the semantics of SVG. This API also provides the foundation for dojox/charting.

In our recent post about the key features in ES2017, I was reminded just how much the standards process has changed in the past 15 years. As someone who tried to get involved early to improve standards, the process was broken and I was quickly discouraged.

As many of you know, Dojo 2 is being built on TypeScript. Many of us involved in Dojo 2 believe that TypeScript brings several advantages to developing with web technologies these days.

As we near the finalization of the proposal, it’s looking like ES8 is going to deliver much more than the simple updates of its ES7 predecessor! We wanted to take a few moments to highlight our 5 favorite things about the upcoming 2017 release. This change is one we’re very excited about, and something we’ve already shimmed in Dojo 2.

Functional programming and reactive programming principles are not new to JavaScript, but their adoption has recently become widespread across most modern frameworks and toolkits. The ease of using these approaches has improved as we’ve finally seen the decline of legacy browsers, and as we’ve seen the introduction of functional and reactive paradigms within ES6 and ES8.

The TypeScript team recently announced the TypeScript 2.2 release candidate which will contain key improvements to the TypeScript language. Most notably, are the introduction of the object type and improved support for mixins and composable classes.

Web applications can be deployed to many environments, including desktops, tablets, and mobile devices. We can even deploy web applications natively using a wrapper such as Apache Cordova to gain access to device features such as GPS, battery, and accelerometer data.

The motivation for Intern 4 is to make it easier to author tests with ES6+ features within tests, with or without transpilation. Want to skim? Here’s the Intern Roadmap which lists our high level status for each Intern release going forward.

With years of building large scale web apps, we’ve experienced almost everything that goes right and wrong during software development projects. So we created Milestone Mayhem, a card game that reflects the challenges and successes with app development.

It’s been two very active years since the release of ES6, and we’ve seen pretty substantial changes in how we build JavaScript applications. While some complain of fatigue, there’s never been a more exciting time to be a JavaScript engineer.

As the new year starts to unfold, it’s time to take a quick look at the things our team at SitePen resolves to do this year. Too often, we see large enterprise customers who have multiple teams creating the same features, without having a simple way to share and maintain code over time.

Thanks to a generous Mozilla Open Source Support program award, Intern has expanded its testing ecosystem to include new and robust sets of tools. Engineers can now easily write tests to benchmark sections of code, test for accessibility (a11y) support, and test for visual differences.

Intern already has a wide array of capabilities and today we’re pleased to announce one more: accessibility testing. Thanks to a generous award from Mozilla Open Source Support we’ve created the intern-a11y plugin, which allows users to run accessibility tests on pages or components using Intern.

Today we’re pleased to announce the release of Intern 3.4. This release brings usability enhancements and bugfixes, including a new benchmarking mode! We’ve outlined some of the features below, but as always, visit the release notes for more details.

This October, we delivered meetup talks on WebVR in London and Phoenix on the same day to share our early efforts in exploring WebVR with TypeScript, Dojo 2, Intern, and A-Frame. WebVR is an experimental JavaScript API that provides access to Virtual Reality (VR) devices, such as the Oculus Rift, HTC Vive, Samsung Gear VR, and Google Cardboard.

The official name of the rebranded and relaunched merging of the jQuery Foundation and the Dojo Foundation is the JS Foundation. SitePen is excited to be a member of this new organization! Back in 2004, Alex Russell, David Schontzler, and I wrote the first lines of code for the Dojo Toolkit. Our early goal was to create the “next-generation DHTML toolkit” that would encourage usage and adoption by ensuring users and contributors they would receive a safe to use open source software.

With Intern you can easily run tests using your local machine’s web browser or on any other machine running a Selenium server. Sometimes a project will need to be tested across a wide range of platforms and browsers, more than an individual user or even an enterprise may have available.

SitePen Support is a service used by companies to improve the productivity and efficiency of their enterprise development teams. Our customers often ask questions about best practices when using various development tools for modern JavaScript and TypeScript development.

Recently on GitHub, someone accused Dojo 2 of being vapourware. This opinion came from a position of misinformation.

We were recently asked about options for mixing Dojo widgets and Angular 2 components into the same application: Is it possible to render an Angular 2 component and Dojo widgets on the same page? Are there any special configuration settings needed? What’s the best way for Angular 2 and Dojo to communicate and/or send messages? What kind of complex challenges and communication issues should we be aware of? For an application that assembles many different components, if some of these are are Dojo widgets and some are Angular 2 components, how can we get them to play nicely together? It certainly is possible to render Angular 2 components and Dojo widgets on the same page. However, this could lead to more complex challenges regarding the architecture and data communication that would require deeper investigation to determine, based on the specific approach to building apps with Angular 2 and Dojo.

Today, we’re very happy to announce the release of Intern 3.3! This is the result of several months of work to improve Intern and its Dig Dug and Leadfoot dependencies, as well as the introduction of a new intern-cli package to make command-line testing configuration even easier. sitecues by Ai Squared generously sponsored some of these efforts! Intern 3.3.1 Dig Dug 1.5.0 Leadfoot 1.6.12 intern-cli 0.1.0 The two banner features in this release were version ranges and aliasing, and the SeleniumTunnel, as well as general improvement of Intern’s support for MS Edge (including a few fixes by Microsoft as the result of bugs filed during this process!).