{"id":461,"date":"2015-09-02T13:00:00","date_gmt":"2015-09-02T13:00:00","guid":{"rendered":"https:\/\/blogs.msdn.microsoft.com\/typescript\/2015\/09\/02\/announcing-typescript-1-6-beta-reactjsx-better-error-checking-and-more\/"},"modified":"2024-07-02T10:14:56","modified_gmt":"2024-07-02T18:14:56","slug":"announcing-typescript-1-6-beta-reactjsx-better-error-checking-and-more","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/typescript\/announcing-typescript-1-6-beta-reactjsx-better-error-checking-and-more\/","title":{"rendered":"Announcing TypeScript 1.6 Beta: React\/JSX, better error checking, and more"},"content":{"rendered":"

Today, we\u2019re making a beta of the upcoming TypeScript 1.6 available. \u00a0There are a bunch of new features<\/a> coming in the 1.6 release, and we wanted to give you a preview of these features and time to give us feedback<\/a>.<\/p>\n

You can get this for Visual Studio 2015<\/a>, Visual Studio 2013<\/a>, NPM<\/a>, and source<\/a>.<\/p>\n

React\/JSX support<\/h2>\n

\"Image<\/a><\/p>\n

One of the key philosophies of TypeScript is to let you write TypeScript anywhere you can develop using JavaScript.\u00a0 While we\u2019ve worked with teams such as Dojo, Aurelia, and Angular to ensure using TypeScript is as easy as using JavaScript, there was still an important library that that presented a\u00a0difficulty<\/a>\u00a0for TypeScript developers: React.\u00a0 This was due to the lack of support for JSX, a popular way of writing DOM and native components in JS.\u00a0 React heavily leverages JSX in everyday code.\u00a0 Unfortunately, the syntax for JSX conflicted with the cast syntax that TypeScript already used.<\/p>\n

\"Image<\/a><\/p>\n

Refactoring JSX members in TypeScript (click to watch animation)\n<\/em><\/p>\n

In 1.6, we\u2019ve introduced a new .tsx file extension<\/a>.\u00a0 This extension does two things: it enables JSX inside of TypeScript files, and it makes the new \u2018as\u2019 operator the default way to cast.\u00a0 With this, we\u2019ve added full support for working with React\/JSX in TypeScript in a type-safe way.<\/p>\n

Catching more errors<\/h2>\n

Starting with 1.6, we\u2019re tightening up some of our object checking rules.\u00a0 In the beta, you\u2019ll see that objects need to match more closely when they are assigned<\/a>.\u00a0 For example:<\/p>\n

var<\/span> x: { foo: number<\/span> };<\/span>\nx = { foo: 1, baz: 2 };\u00a0 \/\/ Error, excess property ‘baz’, but not caught before 1.6<\/span><\/span><\/p>\n

var<\/span> y: { foo: number<\/span>, bar?: number<\/span> };<\/span>\ny = { foo: 1, baz: 2 };\u00a0 \/\/ Error, excess or misspelled property ‘baz’, also not caught before 1.6<\/span><\/span><\/p>\n

When fields are optional, it\u2019s easy to accidentally pass mistyped fields or miss when a refactoring has left excess fields.\u00a0 This change has already helped to find dozens (if not hundreds) of real-world bugs in early adopter code.\u00a0 As part of this change, we found bugs in DefinitelyTyped<\/a> (including the tests that are used to validate the hand-written .d.ts files):<\/p>\n

\"Image<\/a><\/p>\n

Examples of the errors caught with the new rules<\/em><\/p>\n

While this change may show where bugs have been hiding previously, you may not be ready to tackle a new set of compiler errors in your existing code right away, or you may not want to change the way your code behaves. \u00a0There\u2019s a good list<\/a> of ways to work around this assignment check, depending on the capability you want your code to have.<\/p>\n

EDIT: <\/strong>You can also suppress this warning by passing the –suppressExcessPropertyErrors<\/a>\u00a0compiler option.<\/p>\n

Improved module resolution<\/h2>\n

Previously, TypeScript used a hybrid approach for resolving both CommonJS and RequireJS.\u00a0 Unfortunately, this meant that module resolution didn\u2019t feel at home in either style, and instead made you structure projects in a way that didn\u2019t feel natural for that particular module loader.<\/p>\n

We\u2019re working on a set of improvements<\/a> to make module resolution more natural.\u00a0 In the 1.6 beta, you\u2019ll see the start of that work.\u00a0 We invite you to read more<\/a> on what we\u2019re working on and send us your feedback<\/a>.<\/p>\n

And more<\/h2>\n

We\u2019ve continued to improve ES6 support with added support for class expressions<\/a> and the start of support for generators<\/a>.\u00a0 You can see the full list of new features on our roadmap<\/a>.\u00a0 We\u2019d love to hear your feedback<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

Today, we\u2019re making a beta of the upcoming TypeScript 1.6 available. \u00a0There are a bunch of new features coming in the 1.6 release, and we wanted to give you a preview of these features and time to give us feedback. You can get this for Visual Studio 2015, Visual Studio 2013, NPM, and source. React\/JSX […]<\/p>\n","protected":false},"author":377,"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-461","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-typescript"],"acf":[],"blog_post_summary":"

Today, we\u2019re making a beta of the upcoming TypeScript 1.6 available. \u00a0There are a bunch of new features coming in the 1.6 release, and we wanted to give you a preview of these features and time to give us feedback. You can get this for Visual Studio 2015, Visual Studio 2013, NPM, and source. React\/JSX […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/typescript\/wp-json\/wp\/v2\/posts\/461","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\/377"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/typescript\/wp-json\/wp\/v2\/comments?post=461"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/typescript\/wp-json\/wp\/v2\/posts\/461\/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=461"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/typescript\/wp-json\/wp\/v2\/categories?post=461"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/typescript\/wp-json\/wp\/v2\/tags?post=461"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}