{"id":521,"date":"2016-01-28T11:53:00","date_gmt":"2016-01-28T11:53:00","guid":{"rendered":"https:\/\/blogs.msdn.microsoft.com\/typescript\/2016\/01\/28\/announcing-typescript-1-8-beta\/"},"modified":"2024-07-02T10:18:04","modified_gmt":"2024-07-02T18:18:04","slug":"announcing-typescript-1-8-beta","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/typescript\/announcing-typescript-1-8-beta\/","title":{"rendered":"Announcing TypeScript 1.8 Beta"},"content":{"rendered":"

Today we are releasing a beta of TypeScript 1.8. There are quite a lot of changes coming in the 1.8 release, so please check them out and\u00a0<\/span>send us your feedback<\/a>. TypeScript 1.8 beta is available for\u00a0<\/span>Visual Studio 2015<\/a>, NuGet (Compiler<\/a>\u00a0<\/span>and\u00a0<\/span>MSBuild task<\/a>),\u00a0<\/span>npm<\/a>, and straight from the\u00a0<\/span>source<\/a>.<\/p>\n

For npm users, make sure to use the following command:<\/p>\n

> npm install -g typescript@beta<\/span><\/p>\n

You can also get TypeScript 1.8 beta in VS Code by downloading the above npm package and updating your .vscode\/settings.json<\/code><\/span> with the following:<\/p>\n

\n
\"<\/span>typescript.tsdk\"<\/span><\/span>: \"<\/span>\/some\/path\/to\/node_modules\/typescript\/lib\"<\/span><\/span><\/span><\/pre>\n<\/div>\n
JavaScript in TypeScript Compilation<\/h2>\n
In TypeScript 1.8, the TypeScript compiler can now consume JavaScript files alongside TypeScript files. To enable this feature, just add the compiler flag --allowJs<\/code> or add \"allowJs\": true<\/code> to compilerOptions<\/code> in tsconfig.json<\/code>. This is awesome for several reasons:<\/p>\n
Converting JavaScript projects to TypeScript<\/h3>\n
At times, the conversion process from JavaScript to TypeScript could be menacing for big projects. While it\u2019s project specific, simply converting all .js<\/code> files to .ts<\/code> files may yield a fairly large number of compilation errors at times, making the conversion a bit unfriendly. However, by allowing JavaScript files into the TypeScript compiler, it is now possible to convert one file at a time while still compiling your entire project all together. This allows developers to be in full control of where and how they want to carry out the conversion making converting sizable projects much more manageable.<\/p>\n
Using 3rd party JavaScript libraries is easier<\/h3>\n
In order to utilize JavaScript libraries in your TypeScript projects, developers have to include a type definition (.d.ts) file so that the TypeScript compiler knows what you\u2019re doing at compile time and the JavaScript engine knows what to use at runtime. Typically, this is fine unless you want to bundle your external JavaScript libraries with the JavaScript emitted by your TypeScript compilation. Until now, to address this problem, developers needed a third party bundler such as webpack or browserify. With TypeScript 1.8, you can simply include these 3rd party JavaScript libraries in your compilation and they will follow your emitted JavaScript wherever it goes. Source maps included!<\/p>\n
Trivial JavaScript manipulation<\/h3>\n
With JavaScript in TypeScript compilation, the TypeScript compiler can now emit JavaScript files in all the same ways that TypeScript files can. This includes ES3\/ES5, different module types, and bundling. For example, for a quick ES6 to ES5 downlevel conversion using the TypeScript compiler, you just need the following command:<\/p>\n
\n
><\/span> tsc --allowJs --outDir out target_file.js<\/pre>\n<\/div>\n
Expanded JSX Support<\/h2>\n
After much community discussion<\/a>, TypeScript 1.8 brings a few key improvements to enhance the state of art TSX\/JSX support.<\/p>\n
Custom JSX Factories<\/h3>\n
While React has paved the way, JSX syntax is not only tied to React. As such, a JSX factory should be able to be overridden from the default React<\/code> factory. Using the new compiler flag --reactNamespace <factory_name><\/code> in combination with --jsx react<\/code>, TSX authors can now control the emit of the factory name.<\/p>\n
Stateless functional components<\/h3>\n
Stateless functional components are a new concept with React 0.14, however they are already seeing very healthy adoption. Starting with TypeScript 1.8, we support stateless functional components in TSX files.<\/p>\n
interface<\/span> GreeterProps<\/span> {<\/span>\n\u00a0\u00a0\u00a0 name:<\/span> string;<\/span>\n}<\/span><\/p>\n
class <\/span>Greeter <\/span>extends <\/span>React<\/span>.Component<\/span><<\/span>GreeterProps<\/span>, {}><\/span> {<\/span>\n\u00a0\u00a0\u00a0 render<\/span>() {<\/span>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 return <\/span><<\/span>div><\/span>Hello, {this<\/span>.props<\/span>.name<\/span>}<<\/span>\/<\/span>div><\/span>;<\/span>\n\u00a0\u00a0\u00a0 }\u00a0\u00a0 <\/span>\n}<\/span><\/p>\n
\/\/stateless functional component SimpleGreeter<\/span>\nlet <\/span>SimpleGreeter =<\/span> ({name<\/span> =<\/span> ‘<\/span>world‘<\/span><\/span>}) =><\/span> <<\/span>div<\/span>><\/span>Hello, {name}<<\/span>\/<\/span>div<\/span>><\/span>;<\/span><\/span><\/span><\/p>\n
Syntax highlighting in VS 2015<\/h3>\n
With the TypeScript 1.8 update in Visual Studio, JSX tags will now get classified and colorized improving the readability of the code.<\/p>\n
\"Image<\/a><\/p>\n
TypeScript NuGet Packges<\/h2>\n
A long-standing request from some of our users has been to provide an official TypeScript NuGet package to improve the ease of acquisition. Starting with TypeScript 1.8 beta, we will be distributing the TypeScript compiler and the MSBuild task as a NuGet package with every release! Links to the respective packages are below:<\/p>\n
TypeScript compiler<\/a><\/p>\n
TypeScript MSBuild task<\/a><\/p>\n
In addition to these official releases, we will also be hosting the nightly build of TypeScript on MyGet. These are not supported builds, but feel free to check them out and let us know what you think. You can find the builds here<\/a>.<\/p>\n
Chakra Core + TypeScript<\/h2>\n
We are always looking for ways to improve the performance of the TypeScript compiler, so when Chakra Core<\/a> was released a few weeks ago, we jumped at the opportunity to test it out. Below is a chart of the compilation times for each engine over different size repositories. We found ChakraCore achieved significantly reduced compilation times, outperforming the previous version of Chakra that we were using by 5-20% and Node by 10-50%! Based on these improvements, we have switched to using ChakraCore when possible.<\/p>\n
\"Image<\/a><\/p>\n
And More!<\/h2>\n
TypeScript 1.8 includes several more features like F-Bounded polymorphism, string literal types, etc. If you want to deep dive on these and other features coming in 1.8, check out our what\u2019s new page<\/a>. As always, we encourage you to weigh in on the future of TypeScript by browsing our existing issues<\/a>, throwing us a pull request<\/a>, or just hanging out with the team on gitter<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
Today we are releasing a beta of TypeScript 1.8. There are quite a lot of changes coming in the 1.8 release, so please check them out and\u00a0send us your feedback. TypeScript 1.8 beta is available for\u00a0Visual Studio 2015, NuGet (Compiler\u00a0and\u00a0MSBuild task),\u00a0npm, and straight from the\u00a0source. For npm users, make sure to use the following command: […]<\/p>\n","protected":false},"author":380,"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-521","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-typescript"],"acf":[],"blog_post_summary":"
Today we are releasing a beta of TypeScript 1.8. There are quite a lot of changes coming in the 1.8 release, so please check them out and\u00a0send us your feedback. TypeScript 1.8 beta is available for\u00a0Visual Studio 2015, NuGet (Compiler\u00a0and\u00a0MSBuild task),\u00a0npm, and straight from the\u00a0source. For npm users, make sure to use the following command: […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/typescript\/wp-json\/wp\/v2\/posts\/521","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\/380"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/typescript\/wp-json\/wp\/v2\/comments?post=521"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/typescript\/wp-json\/wp\/v2\/posts\/521\/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=521"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/typescript\/wp-json\/wp\/v2\/categories?post=521"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/typescript\/wp-json\/wp\/v2\/tags?post=521"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}