{"id":1095,"date":"2017-06-27T16:53:33","date_gmt":"2017-06-27T16:53:33","guid":{"rendered":"https:\/\/blogs.msdn.microsoft.com\/typescript\/?p=1095"},"modified":"2019-02-20T10:45:50","modified_gmt":"2019-02-20T17:45:50","slug":"announcing-typescript-2-4","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/typescript\/announcing-typescript-2-4\/","title":{"rendered":"Announcing TypeScript 2.4"},"content":{"rendered":"
\n

Today we’re excited to announce the release of TypeScript 2.4!<\/p>\n

If you haven’t yet heard of TypeScript, it’s a superset of JavaScript that brings static types and powerful tooling to JavaScript. These static types are entirely optional and get erased away – you can gradually introduce them to your existing JavaScript code, and get around to adding them when you really need. At the same time, you can use them aggressively to your advantage to catch painful bugs, focus on more important tests that don’t have to do with types, and get a complete editing experience. In the end, you can run TypeScript code through the compiler to get clean readable JavaScript. That includes ECMAScript 3, 5, 2015, and so on.<\/p>\n

To get started with the latest stable version of TypeScript, you can grab it through NuGet<\/a>, or use the following command with npm:<\/p>\n

\n
npm install -g typescript<\/pre>\n<\/div>\n
Visual Studio 2015 users (who have Update 3<\/a>) will be able to get TypeScript by simply installing it from here<\/a>. Visual Studio 2017 users using Update 2<\/a> will be able to ge TypeScript 2.4 from this installer<\/a>.<\/p>\n
Built-in support for 2.4 should be coming to other editors very soon, but you can configure Visual Studio Code<\/a> and our Sublime Text plugin<\/a> to pick up any other version you need.<\/p>\n
While our What’s New in TypeScript<\/a> page as well as our 2.4 RC blog post<\/a> may be a little more in-depth, let’s go over what’s here in TypeScript 2.4.<\/p>\n
Dynamic import()<\/code> expressions<\/h2>\n
Dynamic import<\/code> expressions are a new feature in ECMAScript that allows you to asynchronously request a module at any arbitrary point in your program. These modules come back as Promise<\/code>s of the module itself, and can be await<\/code>-ed in an async function, or can be given a callback with .then<\/code>.<\/p>\n
What this means in short that you can conditionally and lazily import other modules and libraries to make your application more efficient and resource-conscious. For example, here’s an async<\/code> function that only imports a utility library when it’s needed:<\/p>\n
\n
async<\/span> function<\/span> getZipFile(name<\/span>:<\/span> string<\/span>, files<\/span>:<\/span> File<\/span>[]):<\/span> Promise<\/span><File<\/span>> {\n    const<\/span> zipUtil =<\/span> await<\/span> import<\/span>('<\/span>.\/utils\/create-zip-file'<\/span><\/span>);\n    const<\/span> zipContents =<\/span> await<\/span> zipUtil<\/span>.getAsBlob<\/span>(files<\/span>);\n    return<\/span> new<\/span> File<\/span>(zipContents<\/span>, name<\/span>);\n}<\/pre>\n<\/div>\n
Many bundlers have support for automatically splitting output bundles (a.k.a. “code splitting”) based on these import()<\/code>expressions, so consider using this new feature with the esnext<\/code> module target. Note that this feature won’t<\/em> work with the es2015<\/code> module target, since the feature is anticipated for ES2018 or later.<\/p>\n
String enums<\/h2>\n
TypeScript has had string literal types for quite some time now, and enums since its release. Having had some time to see how these features were being used, we revisited enums for TypeScript 2.4 to see how they could work together. This release of TypeScript now allows enum members to contain string initializers.<\/p>\n
\n
enum<\/span> Colors<\/span> {\n    Red<\/span> =<\/span> \"<\/span>RED\"<\/span><\/span>,\n    Green<\/span> =<\/span> \"<\/span>GREEN\"<\/span><\/span>,\n    Blue<\/span> =<\/span> \"<\/span>BLUE\"<\/span><\/span>,\n}<\/pre>\n<\/div>\n
String enums have the benefit that they’re much easier to debug with, and can also describe existing systems that use strings. Like numeric enums and string literal types, these enums can be used as tags in discriminated unions as well.<\/p>\n
\n
enum<\/span> ShapeKind<\/span> {\n    Circle<\/span> =<\/span> \"<\/span>circle\"<\/span><\/span>,\n    Square<\/span> =<\/span> \"<\/span>square\"<\/span><\/span>\n}\n\ninterface<\/span> Circle<\/span> {\n    kind:<\/span> ShapeKind<\/span>.Circle<\/span>;\n    radius:<\/span> number<\/span>;\n}\n\ninterface<\/span> Square<\/span> {\n    kind:<\/span> ShapeKind<\/span>.Square<\/span>;\n    sideLength:<\/span> number<\/span>;\n}\n\ntype<\/span> Shape<\/span> =<\/span> Circle<\/span> |<\/span> Square<\/span>;<\/pre>\n<\/div>\n
Improved checking for generics<\/h2>\n
TypeScript 2.4 has improvements in how types are inferred when generics come into play, as well as improved checking when relating two generic function types.<\/p>\n
Return types as inference targets<\/h2>\n
One such improvement is that TypeScript now can let types flow through return types in some contexts. This means you can decide more freely where to put your types. For example:<\/p>\n
\n
function<\/span> arrayMap<T<\/span>, U<\/span>>(f<\/span>:<\/span> (x<\/span>:<\/span> T<\/span>) =><\/span> U<\/span>):<\/span> (a<\/span>:<\/span> T<\/span>[]) =><\/span> U<\/span>[] {\n    return<\/span> a<\/span> =><\/span> a<\/span>.map<\/span>(f<\/span>);\n}\n\nconst<\/span> lengths:<\/span> (a<\/span>:<\/span> string<\/span>[]) =><\/span> number<\/span>[] =<\/span> arrayMap<\/span>(s<\/span> =><\/span> s<\/span>.length<\/span>);<\/pre>\n<\/div>\n
it used to be the case that s<\/code> would need to be explicitly annotated or its type would be inferred as {}<\/code>. While lengths<\/code> could be left unannotated in that case, it felt surprising to some users that information from that type wasn’t used to infer the type of s<\/code>.<\/p>\n
In TypeScript 2.4, the type system knows s<\/code> is a string<\/code> from the type of lengths<\/code>, which could better fit your stylistic choices.<\/p>\n
This also means that some errors will be caught, since TypeScript can find better candidates than the default {}<\/code> type (which is often too permissive).<\/p>\n
\n
let<\/span> x:<\/span> Promise<\/span><string<\/span>> =<\/span> new<\/span> Promise<\/span>(resolve<\/span> =><\/span> {\n    resolve<\/span>(10<\/span>);\n    \/\/      ~~ Now correctly errors!<\/span>\n});<\/pre>\n<\/div>\n
Stricter checking for generic functions<\/h3>\n
TypeScript now tries to unify type parameters when comparing two single-signature types. As a result, you’ll get stricter checks when relating two generic signatures which may catch some bugs.<\/p>\n
\n
type<\/span> A<\/span> =<\/span> <T<\/span>, U<\/span>>(x<\/span>:<\/span> T<\/span>, y<\/span>:<\/span> U<\/span>) =><\/span> [T<\/span>, U<\/span>];\ntype<\/span> B<\/span> =<\/span> <S<\/span>>(x<\/span>:<\/span> S<\/span>, y<\/span>:<\/span> S<\/span>) =><\/span> [S<\/span>, S<\/span>];\n\nfunction<\/span> f(a<\/span>:<\/span> A<\/span>, b<\/span>:<\/span> B<\/span>) {\n    a<\/span> =<\/span> b<\/span>;  \/\/ Error<\/span>\n    b<\/span> =<\/span> a<\/span>;  \/\/ Ok<\/span>\n}<\/pre>\n
As a temporary workaround for any breakage, you may be able to suppress some of these errors using the new --noStrictGenericChecks<\/code> flag.<\/p>\n<\/div>\n
Strict contravariance for callback parameters<\/h2>\n
TypeScript has always compared parameters in a bivariant way. There are a number of reasons for this, and for the most part it didn’t appear to be a major issue until we heard more from users about the adverse effects it had with Promise<\/code>s and Observable<\/code>s. Relating two Promise<\/code>s or Observable<\/code>s should use the type arguments in a strictly covariant<\/em> manner – a Promise<T><\/code> can only be related to a Promise<U><\/code> if T<\/code> is relatable to U<\/code>. However, because of parameter bivariance, along with the structural nature of TypeScript, this was previously not the case.<\/p>\n
TypeScript 2.4 now tightens up how it checks two function types by enforcing the correct directionality on callback parameter type checks. For example:<\/p>\n
\n
interface<\/span> Mappable<\/span><T<\/span>> {\n    map<U<\/span>>(f<\/span>:<\/span> (x<\/span>:<\/span> T<\/span>) =><\/span> U<\/span>):<\/span> Mappable<\/span><U<\/span>>;\n}\n\ndeclare<\/span> let<\/span> a:<\/span> Mappable<\/span><number<\/span>>;\ndeclare<\/span> let<\/span> b:<\/span> Mappable<\/span><string<\/span> |<\/span> number<\/span>>;\n\na<\/span> =<\/span> b<\/span>; \/\/ should fail, now does.<\/span>\nb<\/span> =<\/span> a<\/span>; \/\/ should succeed, continues to do so.<\/span><\/pre>\n<\/div>\n
In other words, TypeScript now catches the above bug, and since Mappable<\/code> is really just a simplified version of Promise<\/code> or Observable<\/code>, you’ll see similar behavior with them too.<\/p>\n
Note that this may be a breaking change for some, but this more correct behavior will benefit the vast majority of users in the long run.<\/p>\n
Stricter checks on “weak types”<\/h2>\n
TypeScript 2.4 introduces the concept of “weak types”. A weak<\/em> type is any type that contains nothing but all-optional properties. For example, this Options<\/code> type is a weak type:<\/p>\n
\n
interface<\/span> Options<\/span> {\n    data?<\/span>:<\/span> string<\/span>,\n    timeout?<\/span>:<\/span> number<\/span>,\n    maxRetries?<\/span>:<\/span> number<\/span>,\n}<\/pre>\n<\/div>\n
In TypeScript 2.4, it’s now an error to assign anything to a weak type when there’s no overlap in properties. That includes primitives like number<\/code>, string<\/code>, and boolean<\/code>.<\/p>\n
For example:<\/p>\n
\n
function<\/span> sendMessage(options<\/span>:<\/span> Options<\/span>) {\n    \/\/ ...<\/span>\n}\n\nconst<\/span> opts =<\/span> {\n    payload: \"<\/span>hello world!\"<\/span><\/span>,\n    retryOnFail: true<\/span>,\n}\n\n\/\/ Error!<\/span>\nsendMessage<\/span>(opts<\/span>);\n\/\/ No overlap between the type of 'opts' and 'Options' itself.<\/span>\n\/\/ Maybe we meant to use 'data'\/'maxRetries' instead of 'payload'\/'retryOnFail'.<\/span><\/pre>\n<\/div>\n
This check also catches situations like classes that might forget to implement members of an interface:<\/p>\n
\n
interface<\/span> Foo<\/span> {\n    someMethod?<\/span>():<\/span> void<\/span>;\n    someOtherMethod?<\/span>(arg<\/span>:<\/span> number<\/span>):<\/span> string<\/span>;\n}\n\n\/\/ Error! Did 'Dog' really need to implement 'Foo'?<\/span>\nclass<\/span> Dog<\/span> implements<\/span> Foo<\/span> {\n    bark() {\n        return<\/span> \"<\/span>woof!\"<\/span><\/span>;\n    }\n}<\/pre>\n<\/div>\n
This change to the type system may introduce some breakages, but in our exploration of existing codebases, this new check primarily catches silent errors that users weren’t aware of.<\/p>\n
If you really are sure that a value should be compatible with a weak type, consider the following options:<\/p>\n
    \n
  1. Declare properties in the weak type that are always expected to be present.<\/li>\n
  2. Add an index signature to the weak type (i.e. [propName: string]: {}<\/code>).<\/li>\n
  3. Use a type assertion (i.e. opts as Options<\/code>).<\/li>\n<\/ol>\n
    In the case above where the class Dog<\/code> tried to implement Foo<\/code>, it’s possible that Foo<\/code> was being used to ensure code was implemented correctly later on in a derived class. You can get around this by performing class-interface merging.<\/p>\n
    \n
    class<\/span> Dog<\/span> {\n    bark() {\n        return<\/span> \"<\/span>woof!\"<\/span><\/span>;\n    }\n}\n\ninterface<\/span> Dog<\/span> implements<\/span> Foo<\/span> {\n    \/\/ 'Dog' now inherits all of the methods from 'Foo'.<\/span>\n}\n<\/pre>\n<\/div>\n
    Enjoy!<\/h2>\n
    You can read up our full what’s new in TypeScript<\/a> page on our wiki for some more details on this new release. To also see a full list of breaking changes, you can look at our breaking changes page<\/a> as well.<\/p>\n
    Keep in mind that any sort of constructive feedback that you can give us is always appreciated, and used as the basis of every new version of TypeScript. Any issues you run into, or ideas that you think would be helpful for the greater TypeScript community can be filed on our GitHub issue tracker<\/a>.<\/p>\n
    If you’re enjoying TypeScript 2.4, let us know on Twitter with the #iHeartTypeScript<\/a> hashtag on Twitter.<\/p>\n
    Thanks for reading up on this release, and happy hacking!<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
    Today we’re excited to announce the release of TypeScript 2.4! If you haven’t yet heard of TypeScript, it’s a superset of JavaScript that brings static types and powerful tooling to JavaScript. These static types are entirely optional and get erased away – you can gradually introduce them to your existing JavaScript code, and get around […]<\/p>\n","protected":false},"author":381,"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-1095","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-typescript"],"acf":[],"blog_post_summary":"
    Today we’re excited to announce the release of TypeScript 2.4! If you haven’t yet heard of TypeScript, it’s a superset of JavaScript that brings static types and powerful tooling to JavaScript. These static types are entirely optional and get erased away – you can gradually introduce them to your existing JavaScript code, and get around […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/typescript\/wp-json\/wp\/v2\/posts\/1095","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\/381"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/typescript\/wp-json\/wp\/v2\/comments?post=1095"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/typescript\/wp-json\/wp\/v2\/posts\/1095\/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=1095"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/typescript\/wp-json\/wp\/v2\/categories?post=1095"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/typescript\/wp-json\/wp\/v2\/tags?post=1095"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}