Today we’re happy to announce the availability of TypeScript 3.6!<\/p>\n
For those unfamiliar, TypeScript is a language that builds on JavaScript by adding optional static types. These types can be checked by the TypeScript compiler to catch common errors in your programs (like misspelling properties and calling functions the wrong way). Tools like the TypeScript compiler and Babel can then be used to transform TypeScript code that uses all the latest and greatest standard features to standards-compliant ECMAScript code that will work on any browser or runtime (even much older ones that support ES3 or ES5).<\/p>\n
TypeScript goes beyond just type-checking and new ECMAScript features though. Editor tooling is considered a first-class citizen and is an integral part of the TypeScript project, powering things like code completions, refactorings, and quick fixes in a series of different editors<\/a>. In fact, if you’ve already edited JavaScript files in Visual Studio or Visual Studio Code, that experience is actually provided by TypeScript, so you might’ve already been using TypeScript without knowing it!<\/p>\n To learn more, you can check out the TypeScript website<\/a>. But to just get started, you can get it through NuGet<\/a>, or use npm with the following command:<\/p>\n You can also get editor support by<\/p>\n Support for other editors<\/a> will likely be rolling in in the near future.<\/p>\n Let’s explore what’s in 3.6!<\/p>\n TypeScript 3.6 introduces stricter checking for iterators and generator functions. In earlier versions, users of generators had no way to differentiate whether a value was yielded or returned from a generator.<\/p>\n Additionally, generators just assumed the type of In TypeScript 3.6, the checker now knows that the correct type for The Building on that work, the new To allow differentiation between returned values and yielded values, TypeScript 3.6 converts the In short, what this means is that you’ll be able to appropriately narrow down values from iterators when dealing with them directly.<\/p>\n To correctly represent the types that can be passed in to a generator from calls to npm install -g typescript<\/pre>\n<\/div>\n
\n
\n
\n
import.meta<\/code> Support in SystemJS<\/a><\/li>\nget<\/code> and set<\/code> Accessors Are Allowed in Ambient Contexts<\/a><\/li>\n--build<\/code> and --incremental<\/code><\/a><\/li>\n<\/ul>\n<\/li>\n\n
Stricter Generators<\/h2>\n
function<\/span>*<\/span> foo() {\r\n if<\/span> (Math<\/span>.random<\/span>() <<\/span> 0.5<\/span>) yield<\/span> 100<\/span>;\r\n return<\/span> \"<\/span>Finished!\"<\/span><\/span>\r\n}\r\n\r\nlet<\/span> iter =<\/span> foo<\/span>();\r\nlet<\/span> curr =<\/span> iter<\/span>.next<\/span>();\r\nif<\/span> (curr<\/span>.done<\/span>) {\r\n \/\/ TypeScript 3.5 and prior thought this was a 'string | number'.<\/span>\r\n \/\/ It should know it's 'string' since 'done' was 'true'!<\/span>\r\n curr<\/span>.value<\/span>\r\n}<\/pre>\n<\/div>\nyield<\/code> was always any<\/code>.<\/p>\nfunction<\/span>*<\/span> bar() {\r\n let<\/span> x:<\/span> { hello():<\/span> void<\/span> } =<\/span> yield<\/span>;\r\n x<\/span>.hello<\/span>();\r\n}\r\n\r\nlet<\/span> iter =<\/span> bar<\/span>();\r\niter<\/span>.next<\/span>();\r\niter<\/span>.next<\/span>(123<\/span>); \/\/ oops! runtime error!<\/span><\/pre>\n<\/div>\ncurr.value<\/code> should be string<\/code> in our first example, and will correctly error on our call to next()<\/code> in our last example. This is thanks to some changes in the Iterator<\/code> and IteratorResult<\/code> type declarations to include a few new type parameters, and to a new type that TypeScript uses to represent generators called the Generator<\/code> type.<\/p>\nIterator<\/code> type now allows users to specify the yielded type, the returned type, and the type that next<\/code> can accept.<\/p>\ninterface<\/span> Iterator<\/span><T<\/span>, TReturn<\/span> =<\/span> any<\/span>, TNext<\/span> =<\/span> undefined<\/span>> {\r\n \/\/ Takes either 0 or 1 arguments - doesn't accept 'undefined'<\/span>\r\n next(...<\/span>args<\/span>:<\/span> [] |<\/span> [TNext<\/span>]):<\/span> IteratorResult<\/span><T<\/span>, TReturn<\/span>>;\r\n return?<\/span>(value<\/span>?<\/span>:<\/span> TReturn<\/span>):<\/span> IteratorResult<\/span><T<\/span>, TReturn<\/span>>;\r\n throw?<\/span>(e<\/span>?<\/span>:<\/span> any<\/span>):<\/span> IteratorResult<\/span><T<\/span>, TReturn<\/span>>;\r\n}<\/pre>\n<\/div>\nGenerator<\/code> type is an Iterator<\/code> that always has both the return<\/code> and throw<\/code> methods present, and is also iterable.<\/p>\ninterface<\/span> Generator<\/span><T<\/span> =<\/span> unknown<\/span>, TReturn<\/span> =<\/span> any<\/span>, TNext<\/span> =<\/span> unknown<\/span>>\r\n extends<\/span> Iterator<\/span><T<\/span>, TReturn<\/span>, TNext<\/span>> {\r\n next(...<\/span>args<\/span>:<\/span> [] |<\/span> [TNext<\/span>]):<\/span> IteratorResult<\/span><T<\/span>, TReturn<\/span>>;\r\n return(value<\/span>:<\/span> TReturn<\/span>):<\/span> IteratorResult<\/span><T<\/span>, TReturn<\/span>>;\r\n throw(e<\/span>:<\/span> any<\/span>):<\/span> IteratorResult<\/span><T<\/span>, TReturn<\/span>>;\r\n [Symbol<\/span>.iterator<\/span>]():<\/span> Generator<\/span><T<\/span>, TReturn<\/span>, TNext<\/span>>;\r\n}<\/pre>\n<\/div>\nIteratorResult<\/code> type to a discriminated union type:<\/p>\ntype<\/span> IteratorResult<\/span><T<\/span>, TReturn<\/span> =<\/span> any<\/span>> =<\/span> IteratorYieldResult<\/span><T<\/span>> |<\/span> IteratorReturnResult<\/span><TReturn<\/span>>;\r\n\r\ninterface<\/span> IteratorYieldResult<\/span><TYield<\/span>> {\r\n done?<\/span>:<\/span> false<\/span>;\r\n value:<\/span> TYield<\/span>;\r\n}\r\n\r\ninterface<\/span> IteratorReturnResult<\/span><TReturn<\/span>> {\r\n done:<\/span> true<\/span>;\r\n value:<\/span> TReturn<\/span>;\r\n}<\/pre>\n<\/div>\nnext()<\/code>, TypeScript 3.6 also infers certain uses of yield<\/code> within the body of a generator function.<\/p>\nfunction<\/span>*<\/span> foo() {\r\n let<\/span> x:<\/span> string<\/span> =<\/span> yield<\/span>;\r\n console<\/span>.log<\/span>(x<\/span>.toUpperCase<\/span>());\r\n}\r\n\r\nlet<\/span> x =<\/span>