{"id":1680,"date":"2016-12-07T19:01:02","date_gmt":"2016-12-07T19:01:02","guid":{"rendered":"https:\/\/blogs.msdn.microsoft.com\/typescript\/?p=895"},"modified":"2019-02-20T10:45:58","modified_gmt":"2019-02-20T17:45:58","slug":"announcing-typescript-2-1-2","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/typescript\/announcing-typescript-2-1-2\/","title":{"rendered":"Announcing TypeScript 2.1"},"content":{"rendered":"
\n

We spread<\/em> ourselves thin, but this is the moment you’ve been await<\/em>ing – TypeScript 2.1 is here!<\/p>\n

For those who are unfamiliar, TypeScript is a language that brings you all the new features of JavaScript, along with optional static types. This gives you an editing experience that can’t be beat, along with stronger checks against typos and bugs in your code.<\/p>\n

This release comes with features that we think will drastically reduce the friction of starting new projects, make the type-checker much<\/em> more powerful, and give you the tools to write much more expressive code.<\/p>\n

To start using TypeScript you can use NuGet<\/a>, or install it through npm:<\/p>\n

\n
npm install -g typescript<\/pre>\n<\/div>\n
You can also grab the TypeScript 2.1 installer for Visual Studio 2015<\/a> after getting Update 3<\/a>.<\/p>\n
Visual Studio Code will usually just prompt you if your TypeScript install is more up-to-date, but you can also follow instructions to use TypeScript 2.1 now with Visual Studio Code<\/a> or our Sublime Text Plugin<\/a>.<\/p>\n
We’ve written previously about some great new things 2.1 has in store, including downlevel async<\/code>\/await<\/code><\/strong> and significantly improved inference<\/strong>, in our announcement for TypeScript 2.1 RC<\/a>, but here’s a bit more about what’s new in 2.1.<\/p>\n
<\/a>Async Functions<\/h2>\n
It bears repeating: downlevel async<\/code> functions have arrived! That means that you can use async<\/code>\/await<\/code> and target ES3\/ES5 without using any other tools.<\/p>\n
Bringing downlevel async<\/code>\/await<\/code> to TypeScript involved rewriting our emit pipeline to use tree transforms. Keeping parity meant not just that existing emit didn’t change, but that TypeScript’s emit speed was on par as well. We’re pleased to say that after several months of testing, neither have been impacted, and that TypeScript users should continue to enjoy a stable speedy experience.<\/p>\n
<\/a>Object Rest & Spread<\/h2>\n
We’ve been excited to deliver object rest & spread since its original proposal, and today it’s here in TypeScript 2.1. Object rest & spread is a new proposal for ES2017 that makes it much easier to partially copy, merge, and pick apart objects. The feature is already used quite a bit when using libraries like Redux.<\/p>\n
With object spreads, making a shallow copy of an object has never been easier:<\/p>\n
\n
let<\/span> copy =<\/span> { ...<\/span>original<\/span> };<\/pre>\n<\/div>\n
Similarly, we can merge several different objects so that in the following example, merged<\/code> will have properties from foo<\/code>, bar<\/code>, and baz<\/code>.<\/p>\n
\n
let<\/span> merged =<\/span> { ...<\/span>foo<\/span>, ...<\/span>bar<\/span>, ...<\/span>baz<\/span> };<\/pre>\n<\/div>\n
We can even add new properties in the process:<\/p>\n
\n
let<\/span> nowYoureHavingTooMuchFun =<\/span> {\n    hello: 100<\/span>,\n    ...<\/span>foo<\/span>,\n    world: 200<\/span>,\n    ...<\/span>bar<\/span>,\n}<\/pre>\n<\/div>\n
Keep in mind that when using object spread operators, any properties in later spreads “win out” over previously created properties. So in our last example, if bar<\/code> had a property named world<\/code>, then bar.world<\/code> would have been used instead of the one we explicitly wrote out.<\/p>\n
Object rests are the dual of object spreads, in that they can extract any extra properties that don’t get picked up when destructuring an element:<\/p>\n
\n
let<\/span> { a, b, c, ...<\/span>defghijklmnopqrstuvwxyz } =<\/span> alphabet<\/span>;<\/pre>\n<\/div>\n
<\/a>keyof<\/code> and Lookup Types<\/h2>\n
Many libraries take advantage of the fact that objects are (for the most part) just a map of strings to values. Given what TypeScript knows about each value’s properties, there’s a set of known strings (or keys) that you can use for lookups.<\/p>\n
That’s where the keyof<\/code> operator comes in.<\/p>\n
\n
interface<\/span> Person<\/span> {\n    name:<\/span> string<\/span>;\n    age:<\/span> number<\/span>;\n    location:<\/span> string<\/span>;\n}\n\nlet<\/span> propName:<\/span> <\/span>keyof<\/span> Person<\/span>;<\/pre>\n<\/div>\n
The above is equivalent to having written out<\/p>\n
\n
let<\/span> propName:<\/span> \"<\/span>name\"<\/span><\/span> |<\/span> \"<\/span>age\"<\/span><\/span> |<\/span> \"<\/span>location\"<\/span><\/span>;<\/pre>\n<\/div>\n
This keyof<\/code> operator is actually called an index type query<\/em>. It’s like a query for keys on object types, the same way that typeof<\/code> can be used as a query for types on values.<\/p>\n
The dual of this is indexed access types<\/em>, also called lookup types<\/em>. Syntactically, they look exactly like an element access, but are written as types:<\/p>\n
\n
interface<\/span> Person<\/span> {\n    name:<\/span> string<\/span>;\n    age:<\/span> number<\/span>;\n    location:<\/span> string<\/span>;\n}\n\nlet<\/span> a:<\/span> Person<\/span>[\"<\/span>age\"<\/span><\/span>];<\/pre>\n<\/div>\n
This is the same as saying that n<\/code> gets the type of the age<\/code> property in Person<\/code>. In other words:<\/p>\n
\n
let<\/span> a:<\/span> number<\/span>;<\/pre>\n<\/div>\n
When indexing with a union of literal types, the operator will look up each property and union the respective types together.<\/p>\n
\n
\/\/ Equivalent to the type 'string | number'<\/span>\nlet<\/span> nameOrAge:<\/span> Person<\/span>[\"<\/span>name\"<\/span><\/span> |<\/span> \"<\/span>age\"<\/span><\/span>];<\/pre>\n<\/div>\n
This pattern can be used with other parts of the type system to get type-safe lookups, serving users of libraries like Ember<\/a>.<\/p>\n
\n
function<\/span> get<T<\/span>, K<\/span> extends<\/span> keyof<\/span> T<\/span>>(obj<\/span>:<\/span> T<\/span>, propertyName<\/span>:<\/span> K<\/span>):<\/span> T<\/span>[K<\/span>] {\n    return<\/span> obj<\/span>[propertyName<\/span>];\n}\n\nlet<\/span> x =<\/span> { foo: 10<\/span>, bar: \"<\/span>hello!\"<\/span><\/span> };\n\nlet<\/span> foo =<\/span> get<\/span>(x<\/span>, \"<\/span>foo\"<\/span><\/span>); \/\/ has type 'number'<\/span>\nlet<\/span> bar =<\/span> get<\/span>(x<\/span>, \"<\/span>bar\"<\/span><\/span>); \/\/ has type 'string'<\/span>\n\nlet<\/span> oops =<\/span> get<\/span>(x<\/span>, \"<\/span>wargarbl\"<\/span><\/span>); \/\/ error!<\/span><\/pre>\n<\/div>\n
<\/a>Mapped Types<\/h2>\n
Mapped types<\/em> are definitely the most interesting feature in TypeScript 2.1.<\/p>\n
Let’s say we have a Person<\/code> type:<\/p>\n
\n
interface<\/span> Person<\/span> {\n    name:<\/span> string<\/span>;\n    age:<\/span> number<\/span>;\n    location:<\/span> string<\/span>;\n}<\/pre>\n<\/div>\n
Much of the time, we want to take an existing type and make each of its properties entirely optional. With Person<\/code>, we might write the following:<\/p>\n
\n
interface<\/span> PartialPerson<\/span> {\n    name?<\/span>:<\/span> string<\/span>;\n    age?<\/span>:<\/span> number<\/span>;\n    location?<\/span>:<\/span> string<\/span>;\n}<\/pre>\n<\/div>\n
Notice we had to define a completely new type.<\/p>\n
Similarly, we might want to perform a shallow freeze of an object:<\/p>\n
\n
interface<\/span> FrozenPerson<\/span> {\n    readonly<\/span> name:<\/span> string<\/span>;\n    readonly<\/span> age:<\/span> number<\/span>;\n    readonly<\/span> location:<\/span> string<\/span>;\n}<\/pre>\n<\/div>\n
Or we might want to create a related type where all the properties are boolean<\/code>s.<\/p>\n
\n
interface<\/span> BooleanifiedPerson<\/span> {\n    name:<\/span> boolean<\/span>;\n    age:<\/span> boolean<\/span>;\n    location:<\/span> boolean<\/span>;\n}<\/pre>\n<\/div>\n
Notice all this repetition – ideally, much of the same information in each variant of Person<\/code> could have been shared.<\/p>\n
Let’s take a look at how we could write BooleanifiedPerson<\/code> with a mapped type<\/em>.<\/p>\n
\n
type<\/span> BooleanifiedPerson<\/span> =<\/span> {\n    [P<\/span> in<\/span> \"<\/span>name\"<\/span><\/span> |<\/span> \"<\/span>age\"<\/span><\/span> |<\/span> \"<\/span>location\"<\/span><\/span>]:<\/span> boolean<\/span>\n};<\/pre>\n<\/div>\n
Mapped types are produced by taking a union of literal types, and computing a set of properties for a new object type. They’re like list comprehensions in Python<\/a>, but instead of producing new elements in a list, they produce new properties in a type.<\/p>\n
In the above example, TypeScript uses each literal type in \"name\" | \"age\" | \"location\"<\/code>, and produces a property of that name (i.e. properties named name<\/code>, age<\/code>, and location<\/code>). P<\/code> gets bound to each of those literal types (even though it’s not used in this example), and gives the property the type boolean<\/code>.<\/p>\n
Right now, this new form doesn’t look ideal, but we can use the keyof<\/code> operator to cut down on the typing:<\/p>\n
\n
type<\/span> BooleanifiedPerson<\/span> =<\/span> {\n    [P<\/span> in<\/span> keyof<\/span> Person<\/span>]:<\/span> boolean<\/span>\n};<\/pre>\n<\/div>\n
And then we can generalize it:<\/p>\n
\n
type<\/span> Booleanify<\/span><T<\/span>> =<\/span> {\n    [P<\/span> in<\/span> keyof<\/span> T<\/span>]:<\/span> boolean<\/span>\n};\n\ntype<\/span> BooleanifiedPerson<\/span> =<\/span> Booleanify<\/span><Person<\/span>>;<\/pre>\n<\/div>\n
With mapped types, we no longer have to create new partial or readonly variants of existing types either.<\/p>\n
\n
\/\/ Keep types the same, but make every property optional.<\/span>\ntype<\/span> Partial<\/span><T<\/span>> =<\/span> {\n    [P<\/span> in<\/span> keyof<\/span> T<\/span>]?<\/span>:<\/span> T<\/span>[P<\/span>];\n};\n\n\/\/ Keep types the same, but make each property to be read-only.<\/span>\ntype<\/span> Readonly<\/span><T<\/span>> =<\/span> {\n    readonly<\/span> [P<\/span> in<\/span> keyof<\/span> T<\/span>]:<\/span> T<\/span>[P<\/span>];\n};<\/pre>\n<\/div>\n
Notice how we leveraged TypeScript 2.1’s new indexed access types here by writing out T[P]<\/code>.<\/p>\n
So instead of defining a completely new type like PartialPerson<\/code>, we can just write Partial<Person><\/code>. Likewise, instead of repeating ourselves with FrozenPerson<\/code>, we can just write Readonly<Person><\/code>!<\/p>\n
<\/a>Partial<\/code>, Readonly<\/code>, Record<\/code>, and Pick<\/code><\/h2>\n
Originally, we planned to ship a type operator in TypeScript 2.1 named partial<\/code> which could create an all-optional version of an existing type.\nThis was useful for performing partial updates to values, like when using React<\/a>‘s setState<\/code> method to update component state. Now that TypeScript has mapped types, no special support has to be built into the language for partial<\/code>.<\/p>\n
However, because the Partial<\/code> and Readonly<\/code> types we used above are so useful, they’ll be included in TypeScript 2.1. We’re also including two other utility types as well: Record<\/code> and Pick<\/code>. You can actually see how these types are implemented within lib.d.ts<\/code> itself<\/a>.<\/p>\n
<\/a>Easier Imports<\/h2>\n
TypeScript has traditionally been a bit finnicky about exactly how you can import something. This was to avoid typos and prevent users from using packages incorrectly.<\/p>\n
However, a lot of the time, you might just want to write a quick script and get TypeScript’s editing experience. Unfortunately, it’s pretty common that as soon as you import something you’ll get an error.<\/p>\n
\"The<\/p>\n
“But I already have that package installed!” you might say.<\/p>\n
The problem is that TypeScript didn’t trust the import since it couldn’t find any declaration files for lodash. The fix is pretty simple:<\/p>\n
\n
npm install --save @types\/lodash<\/pre>\n<\/div>\n
But this was a consistent point of friction for developers. And while you can still compile & run your code in spite of those errors, those red squiggles can be distracting while you edit.<\/p>\n
So we focused on on that one core expectation:<\/p>\n
But I already have that package installed!<\/em><\/p><\/blockquote>\n
and from that statement, the solution became obvious. We decided that TypeScript needs to be more trusting, and in TypeScript 2.1, so long as you have a package installed, you can use it.<\/p>\n
Do be careful though – TypeScript will assume the package has the type any<\/code>, meaning you can do anything<\/em> with it. If that’s not desirable, you can opt in to the old behavior with --noImplicitAny<\/code>, which we actually recommend for all new TypeScript projects.<\/p>\n
<\/a>Enjoy!<\/h2>\n
We believe TypeScript 2.1 is a full-featured release that will make using TypeScript even easier for our existing users, and will open the doors to empower new users. 2.1 has plenty more including sharing tsconfig.json<\/code> options<\/a>, better support for custom elements<\/a>, and support for importing helper functions<\/a>, all which you can read about on our wiki<\/a>.<\/p>\n
As always, we’d love to hear your feedback, so give 2.1 a try and let us know how you like it! Happy hacking!<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
We spread ourselves thin, but this is the moment you’ve been awaiting – TypeScript 2.1 is here! For those who are unfamiliar, TypeScript is a language that brings you all the new features of JavaScript, along with optional static types. This gives you an editing experience that can’t be beat, along with stronger checks against […]<\/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-1680","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-typescript"],"acf":[],"blog_post_summary":"
We spread ourselves thin, but this is the moment you’ve been awaiting – TypeScript 2.1 is here! For those who are unfamiliar, TypeScript is a language that brings you all the new features of JavaScript, along with optional static types. This gives you an editing experience that can’t be beat, along with stronger checks against […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/typescript\/wp-json\/wp\/v2\/posts\/1680","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=1680"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/typescript\/wp-json\/wp\/v2\/posts\/1680\/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=1680"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/typescript\/wp-json\/wp\/v2\/categories?post=1680"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/typescript\/wp-json\/wp\/v2\/tags?post=1680"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}