React\/JSX<\/h2>\n
Designed with feedback from React experts and the React team, we’ve built full-featured support for React typing and the JSX support in React. \u00a0Below, you can see TypeScript code happily coexisting with JSX syntax within a single file with the new .tsx extension. This allows React developers to intermingle HTML-like syntax with TypeScript code.<\/p>\n Our goal was to make it feel natural to work with React\/JSX and to have all the type-checking and autocomplete\u00a0capabilities of TypeScript. \u00a0This allows you a rich editing experience for working with React and JSX when using VS, VS Code, and Sublime.<\/p>\n This release also makes it possible to write class expressions, as we continue to round out the ES6 support in TypeScript. \u00a0Similar to class declarations, class expressions allow you to create new classes.\u00a0 Unlike class declarations, you can use class expressions wherever you use an expression.\u00a0 For example, you can now create a class and use it in your extends<\/span> clause.<\/p>\n class<\/span> StateHandler extends<\/span> class { reset() { return<\/span> true<\/span>; } } {\nconstructor() {<\/span>\n\u00a0 \u00a0 \u00a0super<\/span>();<\/span>\n\u00a0 \u00a0}<\/span>\n}<\/span><\/p>\n var<\/span> g = new<\/span> StateHandler();<\/span>\ng.reset();<\/span><\/p>\n This class can be anonymous and still has all the same capabilities of class declarations.<\/p>\n In earlier versions of TypeScript, you could use if\u00a0<\/span>statements to narrow the type. For example, you could use:<\/p>\n if<\/span> (typeof<\/span> x === “number”<\/span>) { \u2026 }<\/span><\/p>\n This helped type information flow into common ways of working with types at runtime (inspired by some of the other projects doing typechecking of JS). While this approach is powerful, we wanted to push it a bit further.\u00a0 In 1.6, you can now create your own type guard functions:<\/p>\n interface<\/span> Animal {name: string<\/span>; }\ninterface<\/span> Cat extends<\/span> Animal { meow(); }<\/span><\/p>\n function<\/span> isCat(a: Animal): a is<\/span> Cat {<\/span>\n\u00a0 return<\/span> a.name === ‘kitty’<\/span>;<\/span>\n}<\/span><\/p>\n var<\/span> x: Animal;<\/span><\/p>\n if<\/span>(isCat(x)) {<\/span>\n\u00a0 x.meow(); \/\/ OK, x is Cat in this block<\/span><\/span>\n}<\/span><\/p>\n This allows you to work with not only typeof<\/span> and instanceof<\/span> checks, which need a type that JavaScript understands, but now you can work with interfaces and do custom analysis.\u00a0 Guard functions are denoted by their \u201ca is X<\/span>\u201d return type, which returns boolean and signals to the compiler if what the expected type now is.<\/p>\n Common patterns in JS that haven\u2019t been easy to express in TypeScript are mixins and extending existing classes with new methods.\u00a0 To help with this, we\u2019re adding a new type operator \u2018&\u2019 that will combine two types together.\u00a0 While it was possible to do this before by creating a new interface that inherited from two other types, this tended to be clunky and couldn\u2019t be used in the case you wanted to use it most: combining generic types.<\/p>\n This new & operator, called intersection, creates anonymous combinations of types.<\/p>\n function<\/span> extend<T, U>(first: T, second: U): T & U {<\/span>\n\u00a0 let<\/span> result = <T & U> {};<\/span>\n\u00a0 for<\/span> (let<\/span> id in<\/span> first) {<\/span>\n\u00a0 \u00a0 result[id] = first[id];<\/span>\n\u00a0 }<\/span><\/p>\n \u00a0 for<\/span> (let<\/span> id in<\/span> second) {<\/span>\n\u00a0 \u00a0 if (!result.hasOwnProperty(id)) {<\/span>\n\u00a0 \u00a0 \u00a0 result[id] = second[id];<\/span>\n\u00a0 \u00a0 }<\/span>\n\u00a0 }<\/span>\n\u00a0 return<\/span> result;<\/span>\n}<\/span><\/p>\n var<\/span> x = extend({ a: “hello”<\/span> }, { b: 42 });<\/span>\nx.a; \/\/ works<\/span><\/span>\nx.b; \/\/ works\u00a0<\/span><\/span><\/p>\n A long-standing feature request<\/a> for TypeScript has been supporting abstract classes.\u00a0 Similar in some ways to interfaces, abstract classes give you a way of creating a base class, complete with default implementations, that you can build from with the intention of it never being used directly outside of the class hierarchy.<\/p>\n abstract<\/span> class<\/span> A {\nfoo(): number<\/span> { return<\/span> this.bar(); }<\/span>\n\u00a0 abstract<\/span> bar(): number<\/span>;<\/span>\n}<\/span><\/p>\n var<\/span> a = new<\/span> A();\u00a0 \/\/ error, Cannot create an instance of the abstract class ‘A’<\/span><\/span><\/p>\n class<\/span> B extends<\/span> A {\nbar() { return<\/span> 1; }<\/span>\n}<\/span><\/p>\n var<\/span> b = new<\/span>\u00a0B();\u00a0 \/\/ success, all abstracts are defined<\/span><\/span><\/p>\n Leading up to TypeScript 1.6, type aliases were restricted to being simple aliases that shortened long type names.\u00a0 Unfortunately, without being able to make these generic, they had limited use.\u00a0 We now allow type aliases to be generic, giving them full expressive capability.<\/p>\n type<\/span> switcharoo<T, U> = (u: U, t:T)=>T;<\/span>\nvar<\/span> f: switcharoo<number<\/span>, string<\/span>>;<\/span>\nf(“bob”<\/span>, 4);<\/span><\/p>\n Along with all the new features, we also spent some time tightening and fixing up a few areas of the system to generally work better, help you catch more errors, and be closer to how other tools work.\u00a0 In this release we now require\u00a0that an object literal should be matched directly.\u00a0 We\u2019ve also updated the module resolution logic to work more closely to what you would expect for the type of output module you selected.\u00a0 You can read the full list of potential breaking changes<\/a> with their mitigations.<\/p>\n We\u2019ve made object compatibility stricter to help catch a class of common bugs.\u00a0 You can learn more about this in the 1.6 beta post<\/a>.<\/p>\n We\u2019ve changed module resolution when doing CommonJS output to work more closely to how Node does module resolution.\u00a0 If a module name is non-relative, we now follow these steps to find the associated typings:<\/p>\n Please note<\/strong>: when we search through node_modules, we assume these are the packaged node modules which have type information and a corresponding .js file. \u00a0As such, we resolve only .d.ts files (not .ts file) for non-relative names.<\/p>\n Previously, we \u00a0treated all module names as relative paths, and therefore we would never properly look in node_modules.\u00a0 If you prefer the previous behavior, you can use the compiler flag \u201c–moduleResolution classic\u201d.\u00a0 We will continue to improve module resolution, including improvements to AMD, in upcoming releases.<\/p>\n We\u2019re excited to reveal all the new improvements to TypeScript and to hear your feedback<\/a>.\u00a0 There\u2019s lots to come, with more ES6 and ES7 features ahead.\u00a0 And we\u2019re always open if you want to jump in<\/a>.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":" Today, we’re happy to announce the release of TypeScript 1.6. \u00a0This release adds support\u00a0for React\/JSX, class expressions, and a rich set of new capabilities in the type system. It also provides stricter type checking for object literals. You can download\u00a0TypeScript 1.6 for Visual Studio 2015, Visual Studio 2013, on npm, or as source. React\/JSX Designed […]<\/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-1675","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-typescript"],"acf":[],"blog_post_summary":" Today, we’re happy to announce the release of TypeScript 1.6. \u00a0This release adds support\u00a0for React\/JSX, class expressions, and a rich set of new capabilities in the type system. It also provides stricter type checking for object literals. You can download\u00a0TypeScript 1.6 for Visual Studio 2015, Visual Studio 2013, on npm, or as source. React\/JSX Designed […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/typescript\/wp-json\/wp\/v2\/posts\/1675","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=1675"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/typescript\/wp-json\/wp\/v2\/posts\/1675\/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=1675"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/typescript\/wp-json\/wp\/v2\/categories?post=1675"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/typescript\/wp-json\/wp\/v2\/tags?post=1675"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}![\"Image](\"https:\/\/devblogs.microsoft.com\/typescript\/wp-content\/uploads\/sites\/11\/2015\/09\/8512.react_-300x268.png\")
<\/a><\/p>\n![\"Image](\"https:\/\/devblogs.microsoft.com\/typescript\/wp-content\/uploads\/sites\/11\/2015\/09\/6177.Renaming.gif\")
<\/a><\/p>\nClass expressions<\/h2>\n
User defined type guards<\/h2>\n
Intersection types<\/h2>\n
Abstract classes<\/h2>\n
Generic type aliases<\/h2>\n
Potentially-breaking changes<\/h2>\n
Object literal strictness<\/h2>\n
Improvements to module resolution<\/h2>\n
\n
Looking ahead<\/h2>\n