I am using TypeScript in my application, where I use function:
Object.assign(this.success, success.json())
However, during compilation, I receive the following error:
error TS2339: Property 'assign' does not exist on type 'ObjectConstructor'.
Do you have any idea how can I get rid of this error?
Configure:
If you're using VS code (or if you see a tsconfig.json file):
You should add the lib
property to your tsconfig.json
and then your editor will use the bundled typescript type definitions and also give you intellisense.
Just add the "lib": ["esnext", "dom"]
to your tsconfig.json
and restart VS Code
{
"compilerOptions": {
// ...
"target": "es5",
"lib": ["esnext", "dom"]
// ...
}
}
See all tsconfig.json
options here.
If you're using Visual Studio or MSBuild include this tag:
<TypeScriptLib>esnext, dom</TypeScriptLib>
See all MSBuild typescript compiler options and usage here.
Check your work:
If you've configured your project to use the built-in types and restarted your editor, then your resulting type will look like this instead of the type being any
when you use Object.assign
:
https://i.stack.imgur.com/8VM3Y.png
Note on polyfills and older browser compatibility:
Note that if you are transpiling to ES5 or lower and are targeting IE11, you will need to include polyfills because the typescript compiler will not include the polyfills for you.
If you'd like to include the polyfills (which you should) then I would recommend using core-js's polyfills.
npm install --save core-js
or
yarn add core-js
Then in the entry point in your app (e.g. /src/index.ts
) add the import for core-js
at the top of the file:
import 'core-js';
If you're not using a package manager then you can just paste the following polyfill taken from MDN in some place in your code that runs before the your usage of Object.assign
.
if (typeof Object.assign != 'function') {
// Must be writable: true, enumerable: false, configurable: true
Object.defineProperty(Object, "assign", {
value: function assign(target, varArgs) { // .length of function is 2
'use strict';
if (target == null) { // TypeError if undefined or null
throw new TypeError('Cannot convert undefined or null to object');
}
var to = Object(target);
for (var index = 1; index < arguments.length; index++) {
var nextSource = arguments[index];
if (nextSource != null) { // Skip over if undefined or null
for (var nextKey in nextSource) {
// Avoid bugs when hasOwnProperty is shadowed
if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
to[nextKey] = nextSource[nextKey];
}
}
}
}
return to;
},
writable: true,
configurable: true
});
}
You can use type assertion, like this:
(<any>Object).assign(this.success, success.json())
tsconfig
which is a better solution than this one.
This is caused by you using an ECMAScript 6 feature and targeting ECMAScript 5 or 3. Easiest fix is to set the right target, for example if you are using Grunt:
options: {
target: 'es6'
}
of change the relevant property tab in Visual Studio, or manually by editing your .csproj file and finding the TypeScriptTarget element and changing to ES6, for example:
<TypeScriptTarget>ES6</TypeScriptTarget>
If you need to target ES5, then merely add the following to your TypeScript code
declare interface ObjectConstructor {
assign(target: any, ...sources: any[]): any;
}
That merges the extra method in, solving the issue. More details here. You may need a polyfill though, depending on your browser compatibility requirements - for example this one from MDN:
if (typeof Object.assign != 'function') {
(function () {
Object.assign = function (target) {
'use strict';
if (target === undefined || target === null) {
throw new TypeError('Cannot convert undefined or null to object');
}
var output = Object(target);
for (var index = 1; index < arguments.length; index++) {
var source = arguments[index];
if (source !== undefined && source !== null) {
for (var nextKey in source) {
if (source.hasOwnProperty(nextKey)) {
output[nextKey] = source[nextKey];
}
}
}
}
return output;
};
})();
}
--lib es2015
compiler option. My issue with the approach above is that if you declare
the Object.assign
function instead of using the built-in declaration then you won't get proper typing and documentation. They added the --lib
option so you don't have to re-declare interfaces that are already part of the standard.
.d.ts
) file, rather than a typescript (.ts
) file.
"target": "es5",
to "target": "es6",
in tsconfig.json
. and it worked (y)
Object.values
, it must be "target": "es2017"
, since this is the top search result for the same error code.
You can use spread operator as in ES6
const obj = {...this.success,...success.json()};
I've added typings:
typings install dt~es6-shim --global --save
Why not use the spread operator?
return {this.success, ...success.json() || {}};
Object.assign
covers as the latter accepts an arbitrary number of objects. return Object.assign({}, ...arrayOfObjects);
.
I faced this issue when testing a React application with Jest using @testing-library/react
. The fix for me was to add the following to my setupTests.ts
:
declare global {
interface Object {
/**
* Returns an array of values of the enumerable properties of an object
* @param o Object that contains the properties and methods. This can be an object that you created or an existing Document Object Model (DOM) object.
*/
values<T>(o: { [s: string]: T } | ArrayLike<T>): T[];
/**
* Returns an array of values of the enumerable properties of an object
* @param o Object that contains the properties and methods. This can be an object that you created or an existing Document Object Model (DOM) object.
*/
values(o: {}): any[];
/**
* Returns an array of key/values of the enumerable properties of an object
* @param o Object that contains the properties and methods. This can be an object that you created or an existing Document Object Model (DOM) object.
*/
entries<T>(o: { [s: string]: T } | ArrayLike<T>): [string, T][];
/**
* Returns an array of key/values of the enumerable properties of an object
* @param o Object that contains the properties and methods. This can be an object that you created or an existing Document Object Model (DOM) object.
*/
entries(o: {}): [string, any][];
}
}
Success story sharing
Object.values
is in the spec. and typescript has typings for it."lib": [ "es2015", "es2017", "dom" ]
TypeScriptTarget
option changes the target version of EmcaScript (~the formal javascript name). FYI:ES2015
is not compatible for IE11 (in case you have to support it). You can still setTypeScriptTarget
toES5
while also settingTypeScriptLib
toDOM, ES2015
to achieve the same fix while also remaining compatible with IE11 (but if you don't have to support IE, then just setTypeScriptTarget
toES2015
).