{"id":411,"date":"2015-07-20T07:55:00","date_gmt":"2015-07-20T07:55:00","guid":{"rendered":"https:\/\/blogs.msdn.microsoft.com\/typescript\/2015\/07\/20\/announcing-typescript-1-5\/"},"modified":"2024-07-02T08:32:06","modified_gmt":"2024-07-02T16:32:06","slug":"announcing-typescript-1-5","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/typescript\/announcing-typescript-1-5\/","title":{"rendered":"Announcing TypeScript 1.5"},"content":{"rendered":"<p>Today we\u2019re happy to announce the release of TypeScript 1.5. \u00a0This release took an <a href=\"http:\/\/blogs.msdn.com\/b\/typescript\/archive\/2015\/03\/27\/announcing-typescript-1-5-alpha.aspx\">alpha<\/a>, a <a href=\"http:\/\/blogs.msdn.com\/b\/typescript\/archive\/2015\/04\/30\/announcing-typescript-1-5-beta.aspx\">beta<\/a>, and your help to get here. \u00a0It\u2019s a big one, so let\u2019s get started!<\/p>\n<p>TypeScript 1.5 is part of the newly released <a href=\"http:\/\/go.microsoft.com\/fwlink\/?LinkId=517106\">Visual Studio 2015<\/a>. \u00a0You can also get a separate <a href=\"https:\/\/visualstudiogallery.msdn.microsoft.com\/b1fff87e-d68b-4266-8bba-46fad76bbf22\">download for Visual Studio 2013<\/a>, <a href=\"https:\/\/www.npmjs.com\/package\/typescript\">npm<\/a>, and straight from <a href=\"https:\/\/github.com\/Microsoft\/TypeScript\">GitHub<\/a>.<\/p>\n<h2>ES6 support<\/h2>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/typescript\/wp-content\/uploads\/sites\/11\/2015\/07\/1307.Kangax.png\"><img decoding=\"async\" class=\"alignnone size-full wp-image-4338\" src=\"https:\/\/devblogs.microsoft.com\/typescript\/wp-content\/uploads\/sites\/11\/2015\/07\/1307.Kangax.png\" alt=\"Image 1307 Kangax\" width=\"343\" height=\"146\" srcset=\"https:\/\/devblogs.microsoft.com\/typescript\/wp-content\/uploads\/sites\/11\/2015\/07\/1307.Kangax.png 343w, https:\/\/devblogs.microsoft.com\/typescript\/wp-content\/uploads\/sites\/11\/2015\/07\/1307.Kangax-300x128.png 300w\" sizes=\"(max-width: 343px) 100vw, 343px\" \/><\/a><\/p>\n<p><em>TypeScript 1.5 &#8211; closing the gap on <a href=\"https:\/\/kangax.github.io\/compat-table\/es6\/\">Kangax ES6 support<\/a><\/em><\/p>\n<p>&nbsp;<\/p>\n<p>TypeScript 1.5 adds a number of new ES6 features including <a href=\"https:\/\/github.com\/Microsoft\/TypeScript\/issues\/2242\">modules<\/a>, <a href=\"https:\/\/github.com\/Microsoft\/TypeScript\/pull\/1346\">destructuring<\/a>, <a href=\"https:\/\/github.com\/Microsoft\/TypeScript\/pull\/1931\">spread<\/a>, <a href=\"https:\/\/github.com\/Microsoft\/TypeScript\/pull\/2207\">for..of<\/a>, <a href=\"https:\/\/github.com\/Microsoft\/TypeScript\/pull\/1978\">symbols<\/a>, <a href=\"https:\/\/github.com\/Microsoft\/TypeScript\/issues\/1082\">computed properties<\/a>, <a href=\"https:\/\/github.com\/Microsoft\/TypeScript\/pull\/2161\">let\/const<\/a>, and <a href=\"https:\/\/github.com\/Microsoft\/TypeScript\/pull\/1589\">tagged string templates<\/a>. \u00a0There is quite a bit of information available in the links above, including samples of how to use these features. \u00a0With 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\u2019s major features<\/p>\n<div>\n<p>In the above table, you can see our progress on the Kangax ES6 support table. \u00a0This table, originally for JS engines, also shows coverage of the features transpilers and polyfills support for ES5 output. \u00a0With TypeScript 1.5, we doubled the number of passing tests and will continue to improve over the next few releases.<\/p>\n<\/div>\n<h2>Modules<\/h2>\n<p>There has been quite a bit of work on how modules work in the 1.5 release. \u00a0With this release, we\u2019ve begun supporting the official ES6 modules, we\u2019re simplifying how modules work, and we\u2019re adding support for more kinds of modules as output.<\/p>\n<h2>ES6 modules<\/h2>\n<p>TypeScript 1.5 supports the new module syntax from ES6. \u00a0The ES6 module syntax offers a rich way of working with modules. \u00a0Similar to external modules in TypeScript, ES6 modules can\u00a0import modules and exports each piece of your public API. \u00a0Additionally, ES6 modules allow you to selectively import the parts of that public API you want to use.<\/p>\n<div>\n<p><span style=\"font-family: 'courier new', courier;\"><span style=\"color: #0000ff;\">import<\/span> * as Math <span style=\"color: #0000ff;\">from<\/span> <span style=\"color: #ff0000;\">&#8220;my\/math&#8221;<\/span>;<\/span>\n<span style=\"font-family: 'courier new', courier;\"><span style=\"color: #0000ff;\"> import<\/span> { add, subtract } <span style=\"color: #0000ff;\">from<\/span> <span style=\"color: #ff0000;\">&#8220;my\/math&#8221;<\/span>;<\/span><\/p>\n<p>You can also work with the module itself using a \u2018default\u2019 export. \u00a0The default allows you a handle on what the module main content is. \u00a0This gives you even more precise control over the API you make available.<\/p>\n<\/div>\n<div>\n<p><span style=\"font-family: 'courier new', courier; color: #008080;\">\/\/ math.ts<\/span><\/p>\n<p><span style=\"font-family: 'courier new', courier;\"><span style=\"color: #0000ff;\">export<\/span> <span style=\"color: #0000ff;\">function<\/span> add(x, y) { <span style=\"color: #0000ff;\">return<\/span> x + y }<\/span>\n<span style=\"font-family: 'courier new', courier;\"><span style=\"color: #0000ff;\"> export<\/span> <span style=\"color: #0000ff;\">function<\/span> subtract(x, y) { <span style=\"color: #0000ff;\">return<\/span> x \u2013 y }<\/span>\n<span style=\"font-family: 'courier new', courier;\"><span style=\"color: #0000ff;\"> export<\/span> <span style=\"color: #0000ff;\">default<\/span> <span style=\"color: #0000ff;\">function<\/span> multiply(x, y) { <span style=\"color: #0000ff;\">return<\/span> x * y }<\/span><\/p>\n<p><span style=\"font-family: 'courier new', courier; color: #008080;\">\/\/ myFile.ts<\/span><\/p>\n<p><span style=\"font-family: 'courier new', courier;\"><span style=\"color: #0000ff;\">import<\/span> {add, subtract} <span style=\"color: #0000ff;\">from<\/span> <span style=\"color: #ff0000;\">&#8220;math&#8221;<\/span>;<\/span>\n<span style=\"font-family: 'courier new', courier;\"><span style=\"color: #0000ff;\"> import<\/span> times <span style=\"color: #0000ff;\">from<\/span> <span style=\"color: #ff0000;\">&#8220;math&#8221;<\/span>;<\/span>\n<span style=\"font-family: 'courier new', courier;\"><span style=\"color: #0000ff;\"> var<\/span> result = times(add(2, 3), subtract(5, 3));<\/span><\/p>\n<div>\n<div>\n<div>\n<p>If you look closely, you can see the &#8216;export default&#8217; used as the last line of <span style=\"font-family: 'courier new', courier;\">math.ts<\/span>. \u00a0This line allows us to control a &#8216;default&#8217; export, which is what is exported when you don&#8217;t import specific exports with curly braces ({ }) but instead use a name, like the second line of <span style=\"font-family: 'courier new', courier;\">myFiles.ts<\/span>.<\/p>\n<h2>Simplifying modules<\/h2>\n<\/div>\n<\/div>\n<\/div>\n<p>One of the common points of feedback we\u2019ve heard as new users pick up TypeScript for the first time is that the modules are a bit confusing. \u00a0Before ES6, there were internal and external modules. \u00a0Now with support for\u00a0ES6 modules, there is now another module to learn about. \u00a0We\u2019re simplifying this with the 1.5 release.<\/p>\n<p>Going forward, internal modules will be called \u2018namespace\u2019. \u00a0We 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\u2019ve already updated the handbook to reflect this change. \u00a0We\u2019re encouraging teams to use the new terminology and corresponding syntax.<\/p>\n<p>Likewise, external modules just become \u2018modules\u2019, with a strong emphasis on the standard ES6 module syntax. \u00a0With these changes, there is now just one \u2018module\u2019, and it works like the corresponding concept in JavaScript.<\/p>\n<h2>New module output<\/h2>\n<p>TypeScript has supported multiple module loaders since the early days. \u00a0Because JavaScript is used in both the browser and on the server, TypeScript has supported compiling modules for either AMD or CommonJS.<\/p>\n<p>We\u2019re adding two new module output formats to help continue support more JavaScript practices: SystemJS and UMD. \u00a0SystemJS will allow you to use ES6 modules closer to their native semantics without requiring an ES6-compatible browser engine. \u00a0UMD gives you a way to output a single module that works in both AMD and CommonJS.<\/p>\n<div>\n<h2>Lightweight, portable projects<\/h2>\n<p>One of the tricky things with TypeScript projects is that it\u2019s not often easy to move from a single file to working with a growing project of files. \u00a0You generally have two options: adding<span style=\"font-family: 'courier new', courier;\"> \/\/\/&lt;reference&gt;<\/span> statements to tie your project together, or manually handling everything on the commandline. \u00a0Neither approach is particularly clean, and easily become a mess as the project grows. \u00a0Additionally, only the <span style=\"font-family: 'courier new', courier;\">\/\/\/&lt;reference&gt;<\/span> approach works well with editors, so you inevitably have a number of them in addition to your build.<\/p>\n<p>TypeScript 1.5 introduces a new feature to make getting started withTypeScript easier. \u00a0The compiler now supports \u2018<a href=\"https:\/\/github.com\/Microsoft\/TypeScript\/pull\/1692\">tsconfig.json<\/a>\u2019, a new file which allows you to specify the files in your project and the compiler settings to use. \u00a0This lets you create a lightweight project that can be used both on the command-line and within the editor. \u00a0In fact, VS Code, Sublime, Atom, and others already support using tsconfig.json files.<\/p>\n<\/div>\n<h2>Decorators<\/h2>\n<div>\n<p>The 1.5 release also adds support for the proposed Decorator feature of ES7, which is currently being developed in collaboration with the <a href=\"https:\/\/angular.io\/\">Angular<\/a>, <a href=\"http:\/\/emberjs.com\/\">Ember<\/a>, and <a href=\"http:\/\/aurelia.io\/\">Aurelia<\/a> teams. \u00a0Since Decorators are being defined in ES7, which hasn\u2019t stabilized yet, the feature is considered \u2018experimental\u2019, but it is already showing how powerful it is when working with rich libraries and applications.<\/p>\n<p><span style=\"font-family: 'courier new', courier;\"><span style=\"color: #0000ff;\">import<\/span> {Component, View, NgFor, bootstrap} <span style=\"color: #0000ff;\">from<\/span> <span style=\"color: #ff0000;\">&#8220;angular2\/angular2&#8221;<\/span>;<\/span>\n<span style=\"font-family: 'courier new', courier;\"><span style=\"color: #0000ff;\">import<\/span> {loadFile} <span style=\"color: #0000ff;\">from<\/span> <span style=\"color: #ff0000;\">&#8220;audioFile&#8221;<\/span>;<\/span>\n<span style=\"font-family: 'courier new', courier;\"><span style=\"color: #0000ff;\">import<\/span> {displayAudioFile} from <span style=\"color: #ff0000;\">&#8220;displayAudio&#8221;<\/span>;<\/span><\/p>\n<p><span style=\"font-family: 'courier new', courier;\">@Component({selector: <span style=\"color: #ff0000;\">&#8216;file-list&#8217;<\/span>})<\/span>\n<span style=\"font-family: 'courier new', courier;\">@View({template: <span style=\"color: #ff0000;\">`<\/span><\/span>\n<span style=\"font-family: 'courier new', courier; color: #ff0000;\">\u00a0 &lt;select id=&#8221;fileSelect&#8221; size=&#8221;5&#8243;&gt;<\/span>\n<span style=\"font-family: 'courier new', courier; color: #ff0000;\">\u00a0 \u00a0 &lt;option *ng-for=&#8221;#item of items; #i = index&#8221;<\/span>\n<span style=\"font-family: 'courier new', courier; color: #ff0000;\">\u00a0 \u00a0 \u00a0 [selected]=&#8221;selected === item&#8221;(click)=&#8221;updateSelection()&#8221;&gt;{{ item }}&lt;\/option&gt;<\/span>\n<span style=\"font-family: 'courier new', courier;\"><span style=\"color: #ff0000;\">\u00a0 &lt;\/select&gt;`<\/span>,<\/span>\n<span style=\"font-family: 'courier new', courier;\">\u00a0 directives: [NgFor]<\/span>\n<span style=\"font-family: 'courier new', courier;\">})<\/span><\/p>\n<p><span style=\"font-family: 'courier new', courier;\"><span style=\"color: #0000ff;\">class<\/span> MyDisplay {<\/span>\n<span style=\"font-family: 'courier new', courier;\">\u00a0 items: <span style=\"color: #0000ff;\">string<\/span>[];<\/span>\n<span style=\"font-family: 'courier new', courier;\">\u00a0 constructor() {<\/span>\n<span style=\"font-family: 'courier new', courier;\">\u00a0 \u00a0 this.items = [<span style=\"color: #ff0000;\">&#8220;item1&#8221;<\/span>, <span style=\"color: #ff0000;\">&#8220;item2&#8221;<\/span>];<\/span>\n<span style=\"font-family: 'courier new', courier;\">\u00a0 }<\/span><\/p>\n<p><span style=\"font-family: 'courier new', courier;\">\u00a0 updateSelection() { \u2026 }<\/span>\n<span style=\"font-family: 'courier new', courier;\">}<\/span>\n<em>Using decorators in Angular 2<\/em><\/p>\n<p>Decorators allow you to attach metadata to classes and members, as well as update the functionality of what is being decorated. \u00a0As you can see above, Angular 2 uses Decorators to define the HTML selector and template on a class directly. We\u2019re excited to see what else developers do with this feature.<\/p>\n<p>Note: to use decorators in your projects, you&#8217;ll need to pass the <strong>&#8211;experimentalDecorators<\/strong> flag to the compiler.<\/p>\n<h2>What\u2019s next<\/h2>\n<p>The 1.5 release has significant new language features to use in your projects. \u00a0It\u2019s been a fairly long release, and we\u2019re excited to hear your feedback on TypeScript 1.5 as well as jump in and <a href=\"https:\/\/github.com\/Microsoft\/TypeScript\/wiki\/Roadmap\">finish TypeScript 1.6<\/a>.<\/p>\n<p>We\u2019ve also heard your feedback that you\u2019d like smaller releases, more often. \u00a0We\u2019re currently working on ways to make that happen, so you get great features, high quality, and don\u2019t have to wait long to get it. \u00a0Stay tuned\u2026<\/p>\n<\/div>\n<h2>Thanks!<\/h2>\n<div>This release was possible because of the all the contributors that helped make it happen. \u00a0Special thanks to everyone in this list, who all contributed code to the 1.5 release:<\/div>\n<\/div>\n<div>\n<ul>\n<li>Ahmad Farid<\/li>\n<li>Anders Hejlsberg<\/li>\n<li>Arnav Singh<\/li>\n<li>Basarat Ali Syed<\/li>\n<li>Bill Ticehurst<\/li>\n<li>Bryan Forbes<\/li>\n<li>Caitlin Potter<\/li>\n<li>Chris Bubernak<\/li>\n<li>Colin Snover<\/li>\n<li>Cyrus Najmabadi<\/li>\n<li>Dan Quirk<\/li>\n<li>Daniel Rosenwasser<\/li>\n<li>Dick van den Brink<\/li>\n<li>Dirk B\u00e4umer<\/li>\n<li>Frank Wallis<\/li>\n<li>Guillaume Salles<\/li>\n<li>Ivo Gabe de Wolff<\/li>\n<li>James Whitney<\/li>\n<li>Jason Freeman<\/li>\n<li>Jason Ramsay<\/li>\n<li>Johannes Rieken<\/li>\n<li>Jonathan Bond-Caron<\/li>\n<li>Kagami Sascha Rosylight<\/li>\n<li>Keith Mashinter<\/li>\n<li>Lorant Pinter<\/li>\n<li>Masahiro Wakame<\/li>\n<li>Mohamed Hegazy<\/li>\n<li>Oleg Mihailik<\/li>\n<li>Paul van Brenk<\/li>\n<li>Pedro Maltez<\/li>\n<li>Ron Buckton<\/li>\n<li>Ryan Cavanaugh<\/li>\n<li>Sheetal Nandi<\/li>\n<li>Shengping Zhong<\/li>\n<li>Stan Thomas<\/li>\n<li>Steve Lucco<\/li>\n<li>Tingan Ho<\/li>\n<li>Tomas Grubliauskas<\/li>\n<li>TruongSinh Tran-Nguyen<\/li>\n<li>Vladimir Matveev<\/li>\n<li>Yui Tanglertsampan<\/li>\n<li>Zev Spitz<\/li>\n<li>Zhengbo Li<\/li>\n<\/ul>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Today we\u2019re happy to announce the release of TypeScript 1.5. \u00a0This release took an alpha, a beta, and your help to get here. \u00a0It\u2019s a big one, so let\u2019s get started! TypeScript 1.5 is part of the newly released Visual Studio 2015. \u00a0You can also get a separate download for Visual Studio 2013, npm, and [&hellip;]<\/p>\n","protected":false},"author":375,"featured_media":1797,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-411","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-typescript"],"acf":[],"blog_post_summary":"<p>Today we\u2019re happy to announce the release of TypeScript 1.5. \u00a0This release took an alpha, a beta, and your help to get here. \u00a0It\u2019s a big one, so let\u2019s get started! TypeScript 1.5 is part of the newly released Visual Studio 2015. \u00a0You can also get a separate download for Visual Studio 2013, npm, and [&hellip;]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/typescript\/wp-json\/wp\/v2\/posts\/411","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/typescript\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/typescript\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/typescript\/wp-json\/wp\/v2\/users\/375"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/typescript\/wp-json\/wp\/v2\/comments?post=411"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/typescript\/wp-json\/wp\/v2\/posts\/411\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/typescript\/wp-json\/wp\/v2\/media\/1797"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/typescript\/wp-json\/wp\/v2\/media?parent=411"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/typescript\/wp-json\/wp\/v2\/categories?post=411"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/typescript\/wp-json\/wp\/v2\/tags?post=411"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}