News

Community Developer Provides New TypeScript 3.6 Playground

• By David Ramel
• 08/30/2019

Microsoft has shipped TypeScript 3.6, with a new "playground" stemming from an independent open source developer serving as an example of community collaboration improving world-class software.

"The TypeScript playground has received a much-needed refresh with handy new functionality!" said program manager Daniel Rosenwasser in an announcement post. "The new playground is largely a fork of Artem Tyurin's TypeScript playground which community members have been using more and more. We owe Artem a big thanks for helping out here!"

Indeed, Tyurin's "better TypeScript playground" boasts 197 stars on GitHub.

New options for the TypeScript playground listed by Rosenwasser include:

• The target option (allowing users to switch out of es5 to es3, es2015, esnext, etc.)
• All the strictness flags (including just strict)
• Support for plain JavaScript files (using allowJS and optionally checkJs)

Further improvements are planned including support for JSX (used in React programming) and more. For now, though, developers will enjoy the ability to persist the options they set when sending playground sample links to be checked out by other developers who now don't have to worry about manually setting such options.

Along with the new playground, Rosenwasser detailed improvements to the language and compiler and new editor features. Here's a brief roundup:

• Language and Compiler
  • Stricter Generators: "TypeScript 3.6 introduces stricter checking for iterators and generator functions. In earlier versions, users of generators had no way to differentiate whether a value was yielded or returned from a generator."
  • More Accurate Array Spread: "In pre-ES2015 targets, the most faithful emit for constructs like for/of loops and array spreads can be a bit heavy. For this reason, TypeScript uses a simpler emit by default that only supports array types, and supports iterating on other types using the --downlevelIteration flag. Under this flag, the emitted code is more accurate, but is much larger."
  • Improved UX Around Promises: "Promises are one of the most common ways to work with asynchronous data nowadays. Unfortunately, using a Promise-oriented API can often be confusing for users. TypeScript 3.6 introduces some improvements for when Promises are mis-handled."
  • Better Unicode Support for Identifiers: "TypeScript 3.6 contains better support for Unicode characters in identifiers when emitting to ES2015 and later targets."
  • import.meta Support in SystemJS: "TypeScript 3.6 supports transforming import.meta to context.meta when your module target is set to system."
  • get and set Accessors Are Allowed in Ambient Contexts: "In previous versions of TypeScript, the language didn't allow get and set accessors in ambient contexts (like in declare-d classes, or in .d.ts files in general). The rationale was that accessors weren't distinct from properties as far as writing and reading to these properties; however, because ECMAScript's class fields proposal may have differing behavior from in existing versions of TypeScript, we realized we needed a way to communicate this different behavior to provide appropriate errors in subclasses."
  • Ambient Classes and Functions Can Merge: "In previous versions of TypeScript, it was an error to merge classes and functions under any circumstances. Now, ambient classes and functions (classes/functions with the declare modifier, or in .d.ts files) can merge."
  • APIs to Support --build and --incremental: "TypeScript 3.0 introduced support for referencing other projects and building them incrementally using the --build flag. Additionally, TypeScript 3.4 introduced the --incremental flag for saving information about previous compilations to only rebuild certain files. These flags were incredibly useful for structuring projects more flexibly and speeding builds up. Unfortunately, using these flags didn't work with 3rd party build tools like Gulp and Webpack. TypeScript 3.6 now exposes two sets of APIs to operate on project references and incremental program building."
• Editor Features
  • Semicolon-Aware Code Edits: "Editors like Visual Studio and Visual Studio Code can automatically apply quick fixes, refactorings, and other transformations like automatically importing values from other modules. These transformations are powered by TypeScript, and older versions of TypeScript unconditionally added semicolons to the end of every statement; unfortunately, this disagreed with many users' style guidelines, and many users were displeased with the editor inserting semicolons. TypeScript is now smart enough to detect whether your file uses semicolons when applying these sorts of edits. If your file generally lacks semicolons, TypeScript won't add one."
  • Smarter Auto-Imports: "JavaScript has a lot of different module syntaxes or conventions: the one in the ECMAScript standard, the one Node already supports (CommonJS), AMD, System.js, and more! For the most part, TypeScript would default to auto-importing using ECMAScript module syntax, which was often inappropriate in certain TypeScript projects with different compiler settings, or in Node projects with plain JavaScript and require calls. TypeScript 3.6 is now a bit smarter about looking at your existing imports before deciding on how to auto-import other modules. You can see more details in the original pull request here."

For more information, interested developers can check out breaking changes and what’s next.

The six-month roadmap (July-December 2019) shows what's on tap, affecting language design and innovation, developer productivity tools and integration, education and UX, community investment and internal engineering.

However, despite a crescendoing din of demand from developers, a request to "Investigate error messages in haiku or iambic pentameter" is not on the six-month roadmap. It is, however, still in the long-range plans under the "Future" category.