Announcing TypeScript 1.5

by Jonathan Turner [MS] // 37 Comments

Today we’re happy to announce the release of TypeScript 1.5.  This release took an alpha, a beta, and your help to get here.  It’s a big one, so let’s get started!

TypeScript 1.5 is part of the newly released Visual Studio 2015.  You can also get a separate download for Visual Studio 2013, npm, and straight from GitHub.

ES6 support


TypeScript 1.5 – closing the gap on Kangax ES6 support

 

TypeScript 1.5 adds a number of new ES6 features including modules, destructuring, spread, for..of, symbols, computed properties, let/const, and tagged string templates.  There is quite a bit of information available in the links above, including samples of how to use these features.  With these features, TypeScript takes a big step in completing its goal of becoming a superset of ES6 and offering type-checking for all of ES6’s major features

In the above table, you can see our progress on the Kangax ES6 support table.  This table, originally for JS engines, also shows coverage of the features transpilers and polyfills support for ES5 output.  With TypeScript 1.5, we doubled the number of passing tests and will continue to improve over the next few releases.

Modules

There has been quite a bit of work on how modules work in the 1.5 release.  With this release, we’ve begun supporting the official ES6 modules, we’re simplifying how modules work, and we’re adding support for more kinds of modules as output.

ES6 modules

TypeScript 1.5 supports the new module syntax from ES6.  The ES6 module syntax offers a rich way of working with modules.  Similar to external modules in TypeScript, ES6 modules can import modules and exports each piece of your public API.  Additionally, ES6 modules allow you to selectively import the parts of that public API you want to use.

import * as Math from “my/math”;
import { add, subtract } from “my/math”;

You can also work with the module itself using a ‘default’ export.  The default allows you a handle on what the module main content is.  This gives you even more precise control over the API you make available.

// math.ts

export function add(x, y) { return x + y }
export function subtract(x, y) { return x – y }
export default function multiply(x, y) { return x * y }

// myFile.ts

import {add, subtract} from “math”;
import times from “math”;
var result = times(add(2, 3), subtract(5, 3));

If you look closely, you can see the ‘export default’ used as the last line of math.ts.  This line allows us to control a ‘default’ export, which is what is exported when you don’t import specific exports with curly braces ({ }) but instead use a name, like the second line of myFiles.ts.

Simplifying modules

One of the common points of feedback we’ve heard as new users pick up TypeScript for the first time is that the modules are a bit confusing.  Before ES6, there were internal and external modules.  Now with support for ES6 modules, there is now another module to learn about.  We’re simplifying this with the 1.5 release.

Going forward, internal modules will be called ‘namespace’.  We chose to use this term because of the closeness between how this form works and namespaces in other languages, and how the pattern in JS, sometimes called IIFE, is used in practice. We’ve already updated the handbook to reflect this change.  We’re encouraging teams to use the new terminology and corresponding syntax.

Likewise, external modules just become ‘modules’, with a strong emphasis on the standard ES6 module syntax.  With these changes, there is now just one ‘module’, and it works like the corresponding concept in JavaScript.  

New module output

TypeScript has supported multiple module loaders since the early days.  Because JavaScript is used in both the browser and on the server, TypeScript has supported compiling modules for either AMD or CommonJS.  

We’re adding two new module output formats to help continue support more JavaScript practices: SystemJS and UMD.  SystemJS will allow you to use ES6 modules closer to their native semantics without requiring an ES6-compatible browser engine.  UMD gives you a way to output a single module that works in both AMD and CommonJS.

Lightweight, portable projects

One of the tricky things with TypeScript projects is that it’s not often easy to move from a single file to working with a growing project of files.  You generally have two options: adding ///<reference> statements to tie your project together, or manually handling everything on the commandline.  Neither approach is particularly clean, and easily become a mess as the project grows.  Additionally, only the ///<reference> approach works well with editors, so you inevitably have a number of them in addition to your build.

TypeScript 1.5 introduces a new feature to make getting started withTypeScript easier.  The compiler now supports ‘tsconfig.json’, a new file which allows you to specify the files in your project and the compiler settings to use.  This lets you create a lightweight project that can be used both on the command-line and within the editor.  In fact, VS Code, Sublime, Atom, and others already support using tsconfig.json files.

Decorators

The 1.5 release also adds support for the proposed Decorator feature of ES7, which is currently being developed in collaboration with the Angular, Ember, and Aurelia teams.  Since Decorators are being defined in ES7, which hasn’t stabilized yet, the feature is considered ‘experimental’, but it is already showing how powerful it is when working with rich libraries and applications. 

import {Component, View, NgFor, bootstrap} from “angular2/angular2”;
import {loadFile} from “audioFile”;
import {displayAudioFile} from “displayAudio”;

@Component({selector: ‘file-list’})
@View({template: `
  <select id=”fileSelect” size=”5″>
    <option *ng-for=”#item of items; #i = index”
      [selected]=”selected === item”(click)=”updateSelection()”>{{ item }}</option>
  </select>`,
  directives: [NgFor]
})

class MyDisplay {
  items: string[];
  constructor() {
    this.items = [“item1”, “item2”];
  }

  updateSelection() { … }
}
Using decorators in Angular 2

Decorators allow you to attach metadata to classes and members, as well as update the functionality of what is being decorated.  As you can see above, Angular 2 uses Decorators to define the HTML selector and template on a class directly. We’re excited to see what else developers do with this feature.

Note: to use decorators in your projects, you’ll need to pass the –experimentalDecorators flag to the compiler.

What’s next

The 1.5 release has significant new language features to use in your projects.  It’s been a fairly long release, and we’re excited to hear your feedback on TypeScript 1.5 as well as jump in and finish TypeScript 1.6.

We’ve also heard your feedback that you’d like smaller releases, more often.  We’re currently working on ways to make that happen, so you get great features, high quality, and don’t have to wait long to get it.  Stay tuned…

Thanks!

This release was possible because of the all the contributors that helped make it happen.  Special thanks to everyone in this list, who all contributed code to the 1.5 release:
  • Ahmad Farid 
  • Anders Hejlsberg
  • Arnav Singh
  • Basarat Ali Syed 
  • Bill Ticehurst 
  • Bryan Forbes 
  • Caitlin Potter 
  • Chris Bubernak
  • Colin Snover
  • Cyrus Najmabadi
  • Dan Quirk 
  • Daniel Rosenwasser
  • Dick van den Brink 
  • Dirk Bäumer 
  • Frank Wallis 
  • Guillaume Salles 
  • Ivo Gabe de Wolff 
  • James Whitney 
  • Jason Freeman
  • Jason Ramsay 
  • Johannes Rieken 
  • Jonathan Bond-Caron
  • Kagami Sascha Rosylight
  • Keith Mashinter
  • Lorant Pinter 
  • Masahiro Wakame
  • Mohamed Hegazy 
  • Oleg Mihailik
  • Paul van Brenk 
  • Pedro Maltez 
  • Ron Buckton 
  • Ryan Cavanaugh 
  • Sheetal Nandi
  • Shengping Zhong
  • Stan Thomas
  • Steve Lucco
  • Tingan Ho
  • Tomas Grubliauskas
  • TruongSinh Tran-Nguyen 
  • Vladimir Matveev
  • Yui Tanglertsampan
  • Zev Spitz 
  • Zhengbo Li
Back to
top