Today we’re announcing the availability of TypeScript 3.8 Beta! This Beta release contains all the new features you should expect from TypeScript 3.8’s final release.<\/p>\n
To get started using the beta, you can get it through NuGet<\/a>, or through npm with the following command:<\/p>\n You can also get editor support by<\/p>\n TypeScript 3.8 brings a lot of new features, including new or upcoming ECMAScript standards features, new syntax for importing\/exporting only types, and more.<\/p>\n TypeScript reuses JavaScript’s import syntax in order to let us reference types. For instance, in the following example, we’re able to import This is convenient because most of the time<\/em> we don’t have to worry about what’s being imported – just that we’re importing something<\/em>.<\/p>\n Unfortunately, this only worked because of a feature called import elision<\/em>. When TypeScript outputs JavaScript files, it sees that Again, this behavior is usually great, but it causes some other problems.<\/p>\n First of all, there are some places where it’s ambiguous whether a value or a type is being exported. For example, in the following example is Limiting ourselves to just this file, there’s no way to know. Both Babel and TypeScript’s The other issue was that TypeScript’s import elision would get rid of import statements that only<\/em> contained imports used as types. That caused observably different behavior for modules that have side-effects, and so users would have to insert a second<\/em> import statement purely to ensure side-effects.<\/p>\nnpm install typescript@beta<\/pre>\n<\/div>\n
\n
\n
export * as ns<\/code> Syntax<\/a><\/li>\nawait<\/code><\/a><\/li>\nwatchOptions<\/code><\/a><\/li>\nType-Only Imports and Export<\/span><\/h2>\n
doThing<\/code> which is a JavaScript value along with Options<\/code> which is purely a TypeScript type.<\/p>\n\/\/ .\/foo.ts<\/span>\r\ninterface<\/span> Options<\/span> {<\/span>\r\n \/\/ ...<\/span>\r\n}<\/span>\r\n\r\nexport<\/span> function<\/span> doThing<\/span>(<\/span>options<\/span>: Options<\/span>)<\/span> {<\/span>\r\n \/\/ ...<\/span>\r\n}<\/span>\r\n\r\n\/\/ .\/bar.ts<\/span>\r\nimport<\/span> {<\/span> doThing<\/span>,<\/span> Options<\/span> }<\/span> from<\/span> \".\/foo.js\"<\/span>;<\/span>\r\n\r\nfunction<\/span> doThingBetter<\/span>(<\/span>options<\/span>: Options<\/span>)<\/span> {<\/span>\r\n \/\/ do something twice as good<\/span>\r\n doThing<\/span>(<\/span>options<\/span>)<\/span>;<\/span>\r\n doThing<\/span>(<\/span>options<\/span>)<\/span>;<\/span>\r\n}<\/span><\/pre>\n<\/div>\nOptions<\/code> is only used as a type, and it automatically drops its import. The resulting output looks kind of like this:<\/p>\n\/\/ .\/foo.js<\/span>\r\nexport<\/span> function<\/span> doThing<\/span>(<\/span>options<\/span>: Options<\/span>)<\/span> {<\/span>\r\n \/\/ ...<\/span>\r\n}<\/span>\r\n\r\n\/\/ .\/bar.js<\/span>\r\nimport<\/span> {<\/span> doThing<\/span> }<\/span> from<\/span> \".\/foo.js\"<\/span>;<\/span>\r\n\r\nfunction<\/span> doThingBetter<\/span>(<\/span>options<\/span>: Options<\/span>)<\/span> {<\/span>\r\n \/\/ do something twice as good<\/span>\r\n doThing<\/span>(<\/span>options<\/span>)<\/span>;<\/span>\r\n doThing<\/span>(<\/span>options<\/span>)<\/span>;<\/span>\r\n}<\/span><\/pre>\n<\/div>\nMyThing<\/code> a value or a type?<\/p>\nimport<\/span> {<\/span> MyThing<\/span> }<\/span> from<\/span> \".\/some-module.js\"<\/span>;<\/span>\r\n\r\nexport<\/span> {<\/span> MyThing<\/span> }<\/span>;<\/span><\/pre>\n<\/div>\ntranspileModule<\/code> API will emit code that doesn’t work correctly if MyThing<\/code> is only a type, and TypeScript’s isolatedModules<\/code> flag will warn us that it’ll be a problem. The real problem here is that there’s no way to say “no, no, I really only meant the type – this should be erased”, so import elision isn’t good enough.<\/p>\n\/\/ This statement will get erased because of import elision.<\/span>\r\nimport<\/span> {<\/span> SomeTypeFoo<\/span>,<\/span> SomeOtherTypeBar<\/span> }<\/span> from<\/span> \".\/module-with-side-effects\"<\/span>;<\/span>\r\n\r\n\/\/ This statement always sticks around.<\/span>\r\nimport<\/span> \".\/module-with-side-effects\"<\/span>;<\/span><\/pre>\n<\/div>\n