How to use Object.values with typescript?

TypescriptObject

Typescript Problem Overview


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'

Typescript Solutions


Solution 1 - Typescript

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.

Solution 2 - Typescript

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);

Solution 3 - Typescript

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.

Solution 4 - Typescript

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.

Solution 5 - Typescript

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

{
    "compilerOptions": {
        "target": "es2017",
        ......
    }
}

Solution 6 - Typescript

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

Solution 7 - Typescript

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)`

Solution 8 - Typescript

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

Solution 9 - Typescript

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 ;)

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Questionuser2280016View Question on Stackoverflow
Solution 1 - TypescriptAaron BeallView Answer on Stackoverflow
Solution 2 - Typescriptholi-javaView Answer on Stackoverflow
Solution 3 - TypescriptmtpultzView Answer on Stackoverflow
Solution 4 - TypescriptKianView Answer on Stackoverflow
Solution 5 - TypescriptLukas IgnatavičiusView Answer on Stackoverflow
Solution 6 - TypescriptNeil StevensView Answer on Stackoverflow
Solution 7 - Typescriptangularrocks.comView Answer on Stackoverflow
Solution 8 - TypescriptLucasView Answer on Stackoverflow
Solution 9 - TypescriptMaksymilian MajerView Answer on Stackoverflow