React TypeScript Property 'assign' does not exist on type 'Object constructor'

Question

I'm new to both React and TypeScript so there might be something obvious that I have missed. I'm trying to do the following:

const props = Object.assign({}, this.props, {
    loaded: this.state.loaded
});

I get this error in my .tsx file: Property 'assign' does not exist on type 'Object constructor'.

Found this thread and tried:

const props = (<any>Object).assign({}, this.props, {
    loaded: this.state.loaded
});

Gave me this error: Property 'any' does not exist on type 'JXS.IntrinsicElements'.

I also tried this which returned Unexpected modifier for declare.

declare interface ObjectConstructor {
    assign(target: any, ...sources: any[]): any;
}

What have I missed?

That's kinda weird. Can you give a little more context? E.g. the Component you're using it and also maybe your `tsconfig`? Because there should be no issue with you first code snippet. — Sebastian Sebald, Apr 24 '17 at 14:33

score 3 · Accepted Answer · answered Apr 24 '17 at 14:43

Object.assign is a es6 feature so you need to target es6:

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

If you can't target es6 but still know for sure that your code will run in environments that do support new es6 features then you can use the lib:

{
    "compilerOptions": {
        ...
        "target": "es5", // for example
        "lib": ["DOM", "ES6", "ScriptHost"],
        ...
    }
}

Another option is to add this funtionality yourself.
You'll need to add the definitions (copied from the lib.es6.d.ts):

interface ObjectConstructor {
    assign<T, U>(target: T, source: U): T & U;
    assign<T, U, V>(target: T, source1: U, source2: V): T & U & V;
    assign<T, U, V, W>(target: T, source1: U, source2: V, source3: W): T & U & V & W;
    assign(target: any, ...sources: any[]): any;
}

And then polyfill it.

As for the casting part that you tried, you can't use this form of casting inside tsx files, you need to do this:

const props = (Object as any).assign({}, this.props, {
    loaded: this.state.loaded
});

Because in tsx files the compiler thinks that <any> as an html/react element.

React TypeScript Property 'assign' does not exist on type 'Object constructor'

1 Answers1