What's New and Shiny In The TypeScript Community (June 2017)
The TypeScript team and community have done amazing work lately. In this blog post, I'll show some of the new language features, tools, and libraries that have been released or will soon be released. Enjoy!
Prettier TypeScript support
For those who are unfamiliar with the Prettier project, it is a code formatter that has a more novel approach than other popular code formatters (such as ESLint).
Previously, tools like ESLint used rule definitions to describe what to look for (the end of a function block, for example) and what to do (for example, add a space) when something has been found.
What is Prettier's approach? Instead of having numerous rules, Prettier parses the valid source code into an AST (Abstract Syntax Tree). ASTs are often created after the parsing process, and they can be thought of as tree-shaped structures with leaves representing keywords, statements, assignments, etc. Instead of spitting out an output that is completely different from the input (eg., binary), Prettier outputs source code. The returned source code is formatted.
The beauty of Prettier (no pun intended) is that it can fix many more issues than rule-based tools can fix.
The big news is that Prettier supports TypeScript by passing the flag --parser typescript.
Also, Prettier can be used for styles, which means that it has the potential to become a default code/style formatting tool.
TypeScript - Dynamic Import Expressions
In the TypeScript 2.4 RC announcement, the first entry was "Dynamic Import Expressions":
TypeScript 2.4 is bringing support for ECMAScript's new import() calls. These calls import a module and return a promise to that module.
It is important to understand that import() is an ECMAScript feature, and TypeScript is now adding support for it.
I'll summarize what the new feature is all about. Normally, the import keyword is used like this:
import reader from './pdfreader'
The pdfreader module's source code is imported at compile time, but PDFs could be opened on a click event, and code is therefore very likely being sent to a client that rarely uses it.
What's new is the way import is being used:
import('./pdfreader')
.then(content => console.log(content))
The first line will return a promise; then the script is dynamically loaded.
Dr. Axel Rauschmayer wrote a blog post that covers various use cases.
In the same announcement, String Enums support was also mentioned. Make sure to check that out too.
Create React App TypeScript
Setting up a build process for a modern web application can be a tedious but enlightening process. Knowing your tools is paramount if you're going to maintain the software. When you want to learn a programming language or experiment with an idea, you want to get started fast without learning all the nitty-gritty details of each step of the build process.
Create-React-App from Facebook is a way to get started with React without any configuration.
CRA is a perfect starting point for JavaScript-based React development, but it doesn't benefit TypeScript users. That's where Create React App TypeScript comes into play.
Create React App TypeScript is an actively updated fork of Create React App.
When I install the package and create an initial project, I have everything I need for TypeScript + React development, even example components and modifiable styles.
Overview
These were just a small sample of all the good things that are happening in the TypeScript community.
The TypeScript development team is pushing out new features at an astonishing pace, and it is sometimes hard to keep track of all the changes. Sometimes the improvements are subtle changes that will make existing codebases better by, for example, incorporating better checks for type validity.
I would like to hear what you are excited about and what features you think should be on the list!