159

I am trying to form a comma separated string from an object,

const data = {"Ticket-1.pdf":"8e6e8255-a6e9-4626-9606-4cd255055f71.pdf","Ticket-2.pdf":"106c3613-d976-4331-ab0c-d581576e7ca1.pdf"};
const values = Object.values(data).map(x => x.substr(0, x.length - 4));
const commaJoinedValues = values.join(',');
console.log(commaJoinedValues);

How to do this with TypeScript?

getting an error file:

severity: 'Error'
message: 'Property 'values' does not exist on type 'ObjectConstructor'.'
at: '216,27'
source: 'ts'

9 Answers 9

258
+100

Object.values() is part of ES2017, and the compile error you are getting is because you need to configure TS to use the ES2017 library. You are probably using ES6 or ES5 library in your current TS configuration.

Solution: use es2017 or es2017.object in your --lib compiler option.

For example, using tsconfig.json:

"compilerOptions": {
    "lib": ["es2017", "dom"]
}

Note that targeting ES2017 with TypeScript does not emit polyfills in the browser for ES2017 (meaning the above solves your compile error, but you can still encounter a runtime error because the browser doesn't implement ES2017 Object.values), it's up to you to polyfill your project code yourself if you want. And since Object.values is not yet well supported by all browsers (at the time of this writing) you definitely want a polyfill: core-js will do the job.

15
  • 1
    @ErikvanVelzen You edited the answer to change the case of ES2017 to es2017 but AFAIK this is not necassary, but I always want to learn, was there a reason for the change? Jan 2, 2018 at 15:34
  • 2
    ^ To answer my own question: ES2017, DOM (uppercase) is listed in the tsc --init comment as the valid values and it works correctly in the compiler, but the JSON schema only enumerates the es2017, dom (lowercase) options, so JSON IDE/linter will flag ES2017, DOM as an invalid values (even though they are valid). A bit confusing. Jan 2, 2018 at 16:39
  • Indeed that was the reason. It does work uppercase as you note. tsc --help displays lowercase though Jan 3, 2018 at 14:36
  • Isn't the core-js is included in angular, if not that how to add this pollyfill? Mar 2, 2018 at 9:54
  • 1
    @Totty.js The library files that TS includes are for type-checking only, in other words it doesn't actually emit any JS library polyfills for things like Object.values(). In other words you can get around the compile error but still run into runtime errors if you run in a browser that doesn't have Object.values(). Aug 15, 2018 at 16:39
129

using Object.keys instead.

const data = {
  a: "first",
  b: "second",
};

const values = Object.keys(data).map(key => data[key]);

const commaJoinedValues = values.join(",");
console.log(commaJoinedValues);
20
  • 100
    Note that this an alternative (a good one!), not an actual answer on how to use ES7's Object.values in TS to solve the OP's compile error. To do that you simply need ES2017 in your --lib setting. Mar 23, 2017 at 16:24
  • 4
    @Aaron your solution is so complex that anyone new to typescript can't accepted,to compile you must add ES2017 lib, and must include polyfills library where use it.give different answer against different people is king.
    – holi-java
    Mar 24, 2017 at 0:50
  • 12
    @holi-jave It's not "my solution" its just how TS and non-yet-standard JS features work, like the OP's attempted use of ES7/Object.values(). Maybe you think its complex (I don't disagree), but that's just the nature of trying to use future features like Object.values() today. Its always been this way. Even Object.keys() should still be polyfilled if you were targeting ES3 or want to support IE8 (hopefully you don't anymore!) It's a good idea in general to understand ES features, browser support, and polyfilling if you are in web development! Mar 24, 2017 at 14:13
  • 1
    @holi-jave Nope. If you only add polyfill TS will still give the compile error the OP showed us. You need --lib for TS to understand what level of ES features you support. You need polyfills for it to actually work in the browser. So understanding both is important. Maybe my explanation is not clear enough. Mar 24, 2017 at 14:42
  • 1
    Let us continue this discussion in chat.
    – holi-java
    Mar 24, 2017 at 15:35
20

You can use Object.values in TypeScript by doing this (<any>Object).values(data) if for some reason you can't update to ES7 in tsconfig.

1
  • 4
    @Aaron at the time of the posting there were comments indicating people using a specific version of Angular had issues updating the lib where it wasn't working. Which is why I put if for some reason you can't update to ES7 in tsconfig
    – mtpultz
    Mar 20, 2019 at 18:33
13

Instead of

Object.values(myObject);

use

Object["values"](myObject);

In your example case:

const values = Object["values"](data).map(x => x.substr(0, x.length - 4));

This will hide the ts compiler error.

6
  • 1
    you are genius(^-' )b Nov 18, 2018 at 13:40
  • 11
    This is a mis-use of TS. You should configure the compiler with the lib setting to reflect how you're using it, not intentionally escape the compiler. Mar 20, 2019 at 14:06
  • 1
    @AaronBeall it's a good use if for some reason you cant upgrade to es2017
    – Dino
    May 8, 2019 at 10:07
  • 1
    @Dino You don't need to upgrade to es2017, you can use core-js to polyfill all the way down to ES5. TypeScript has no runtime, the lib setting is just to get the correct type-checking. May 14, 2019 at 3:53
  • 1
    @Dino if you can't upgrade to es2017 why are you using a function that is defined in es2017?
    – pqnet
    Jul 21, 2020 at 8:36
13

I have increased target in my tsconfig.json to enable this feature in TypeScript

{
    "compilerOptions": {
        "target": "es2017",
        ......
    }
}
1
  • Changing the target is not a solution in case you want to keep compatibility with older browsers. Typescript has to be able to transpile an ES2017 syntax to ES2015.
    – Random
    Feb 12, 2020 at 15:38
4

I just hit this exact issue with Angular 6 using the CLI and workspaces to create a library using ng g library foo.

In my case the issue was in the tsconfig.lib.json in the library folder which did not have es2017 included in the lib section.

Anyone stumbling across this issue with Angular 6 you just need to ensure that you update you tsconfig.lib.json as well as your application tsconfig.json

2
  • i've put es2017 in both tsconfig.lib and tsconfig.json, but still i get the error 'entries doesn't exist on Object' error when trying to use entries. Is there anything else i should change/update?
    – Maurice
    Jul 21, 2018 at 5:40
  • i changed the target in tsconfig.lib to es2017 just now, still the same error.
    – Maurice
    Jul 21, 2018 at 5:43
2

Having my tslint rules configuration here always replacing the line Object["values"](myObject) with Object.values(myObject).

Two options if you have same issue:

(Object as any).values(myObject)

or

/*tslint:disable:no-string-literal*/
`Object["values"](myObject)`
1
  • 1
    Why would you ever want to use Object["values"]? Mar 20, 2019 at 14:07
-7

Simplest way is to cast the Object to any, like this:

const data = {"Ticket-1.pdf":"8e6e8255-a6e9-4626-9606-4cd255055f71.pdf","Ticket-2.pdf":"106c3613-d976-4331-ab0c-d581576e7ca1.pdf"};
const obj = <any>Object;
const values = obj.values(data).map(x => x.substr(0, x.length - 4));
const commaJoinedValues = values.join(',');
console.log(commaJoinedValues);

And voila – no compilation errors ;)

-7

Even simpler, use _.values from underscore.js https://underscorejs.org/#values

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.