Error - [tsc] src/extensions/topBarNavigation/TopBarNavigationApplicationCustomizer.ts(66,111): erro

%3CLINGO-SUB%20id%3D%22lingo-sub-2811574%22%20slang%3D%22en-US%22%3EError%20-%20%5Btsc%5D%20src%2Fextensions%2FtopBarNavigation%2FTopBarNavigationApplicationCustomizer.ts(66%2C111)%3A%20erro%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-2811574%22%20slang%3D%22en-US%22%3E%3CP%3EHi%20i'm%20new%20to%20sharepoint%20development%20and%20I'm%20compiling%20the%20build%20using%20gulp%20build%20for%20solution%20but%20getting%20error%20on%20second%20last%20line%20of%20code%20(const%20elem%3A%20React.ReactElement%3CIREACTHEADERPROPS%3E%20%3D%20React.createElement(ContextualMenuSubmenuExample%2C%20this)%3B)..%20don't%20know%20what%20the%20problem..%20i%20installed%20the%20type%20sscript%20version%203.7.7%3C%2FIREACTHEADERPROPS%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3Ethe%20code%20is%3A%26nbsp%3B%3C%2FP%3E%3CP%3Eimport%20%7B%20override%20%7D%20from%20'%40microsoft%2Fdecorators'%3B%3CBR%20%2F%3Eimport%20%7B%20Log%20%7D%20from%20'%40microsoft%2Fsp-core-library'%3B%3CBR%20%2F%3Eimport%20%7B%3CBR%20%2F%3EBaseApplicationCustomizer%2C%3CBR%20%2F%3EPlaceholderContent%2C%3CBR%20%2F%3EPlaceholderName%3CBR%20%2F%3E%7D%20from%20'%40microsoft%2Fsp-application-base'%3B%3CBR%20%2F%3Eexport%20interface%20IHelloWorldApplicationCustomizerProperties%20%7B%3CBR%20%2F%3ETop%3A%20string%3B%3CBR%20%2F%3EBottom%3A%20string%3B%3CBR%20%2F%3E%7D%3CBR%20%2F%3Eimport%20*%20as%20strings%20from%20'TopBarNavigationApplicationCustomizerStrings'%3B%3CBR%20%2F%3Eimport%20*%20as%20React%20from%20%22react%22%3B%3CBR%20%2F%3Eimport%20*%20as%20ReactDOM%20from%20%22react-dom%22%3B%3CBR%20%2F%3Eimport%20%7BIReactHeaderProps%2C%20ContextualMenuSubmenuExample%7D%20from%20'.%2FContextualMenuSubmenuExample'%3B%3C%2FP%3E%3CP%3E%3CBR%20%2F%3Econst%20LOG_SOURCE%3A%20string%20%3D%20'TopBarNavigationApplicationCustomizer'%3B%3C%2FP%3E%3CP%3E%2F**%3CBR%20%2F%3E*%20If%20your%20command%20set%20uses%20the%20Client%20SideComponentProperties%20JSON%20input%2C%3CBR%20%2F%3E*%20it%20will%20be%20deserialized%20into%20the%20BaseExtension.properties%20object.%3CBR%20%2F%3E*%20You%20can%20define%20an%20interface%20to%20describe%20it.%3CBR%20%2F%3E*%2F%3CBR%20%2F%3Eexport%20interface%20ITopBarNavigationApplicationCustomizerProperties%20%7B%3CBR%20%2F%3ETop%3A%20string%3B%3CBR%20%2F%3EBottom%3A%20string%3B%3CBR%20%2F%3E%7D%3C%2FP%3E%3CP%3E%2F**%20A%20Custom%20Action%20which%20can%20be%20run%20during%20execution%20of%20a%20Client%20Side%20Application%20*%2F%3CBR%20%2F%3Eexport%20default%20class%20TopBarNavigationApplicationCustomizer%3CBR%20%2F%3Eextends%20BaseApplicationCustomizer%3CITOPBARNAVIGATIONAPPLICATIONCUSTOMIZERPROPERTIES%3E%20%7B%3C%2FITOPBARNAVIGATIONAPPLICATIONCUSTOMIZERPROPERTIES%3E%3C%2FP%3E%3CP%3Eprivate%20_topPlaceholder%3A%20PlaceholderContent%20%7C%20undefined%3B%3CBR%20%2F%3Eprivate%20_bottomPlaceholder%3A%20PlaceholderContent%20%7C%20undefined%3B%3C%2FP%3E%3CP%3E%40override%3CBR%20%2F%3Epublic%20onInit()%3A%20Promise%3CVOID%3E%20%7B%3CBR%20%2F%3ELog.info(LOG_SOURCE%2C%20%60Initialized%20%24%7Bstrings.Title%7D%60)%3B%3C%2FVOID%3E%3C%2FP%3E%3CP%3E%2F%2F%20Wait%20for%20the%20placeholders%20to%20be%20created%20(or%20handle%20them%20being%20changed)%20and%20then%3CBR%20%2F%3E%2F%2F%20render.%3CBR%20%2F%3Ethis.context.placeholderProvider.changedEvent.add(this%2C%20this._renderPlaceHolders)%3B%3C%2FP%3E%3CP%3Ereturn%20Promise.resolve()%3B%3CBR%20%2F%3E%7D%3C%2FP%3E%3CP%3Eprivate%20_onDispose()%3A%20void%20%7B%3CBR%20%2F%3Econsole.log('%5BTopBarNavigationApplicationCustomizer._onDispose%5D%20Disposed%20custom%20top%20and%20bottom%20placeholders.')%3B%3CBR%20%2F%3E%7D%3C%2FP%3E%3CP%3Eprivate%20_renderPlaceHolders()%3A%20void%20%7B%3CBR%20%2F%3E%2F%2F%20Handling%20the%20top%20placeholder%3CBR%20%2F%3Eif%20(!this._topPlaceholder)%20%7B%3CBR%20%2F%3Ethis._topPlaceholder%20%3D%20this.context.placeholderProvider.tryCreateContent(%3CBR%20%2F%3EPlaceholderName.Top%2C%3CBR%20%2F%3E%7B%20onDispose%3A%20this._onDispose%20%7D%3CBR%20%2F%3E)%3B%3CBR%20%2F%3E%3CBR%20%2F%3E%2F%2F%20The%20extension%20should%20not%20assume%20that%20the%20expected%20placeholder%20is%20available.%3CBR%20%2F%3Eif%20(!this._topPlaceholder)%20%7B%3CBR%20%2F%3Econsole.error(%22The%20expected%20placeholder%20(Top)%20was%20not%20found.%22)%3B%3CBR%20%2F%3Ereturn%3B%3CBR%20%2F%3E%7D%3CBR%20%2F%3E%3CBR%20%2F%3Econst%20elem%3A%20React.ReactElement%3CIREACTHEADERPROPS%3E%20%3D%20React.createElement(ContextualMenuSubmenuExample%2C%20this)%3B%3CBR%20%2F%3EReactDOM.render(elem%2C%20this._topPlaceholder.domElement)%3B%3CBR%20%2F%3E%7D%3CBR%20%2F%3E%7D%3CBR%20%2F%3E%7D%3C%2FIREACTHEADERPROPS%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3Eerror%3A%26nbsp%3B%3C%2FP%3E%3CP%3E%5B11%3A42%3A27%5D%20Finished%20subtask%20'sass'%20after%209.47%20s%3CBR%20%2F%3E%5B11%3A42%3A27%5D%20Starting%20subtask%20'tslint'...%3CBR%20%2F%3E%5B11%3A42%3A28%5D%20%5Btslint%5D%20tslint%20version%3A%205.12.1%3CBR%20%2F%3E%5B11%3A42%3A28%5D%20Starting%20subtask%20'tsc'...%3CBR%20%2F%3E%5B11%3A42%3A28%5D%20%5Btsc%5D%20typescript%20version%3A%203.7.7%3CBR%20%2F%3E%5B11%3A42%3A40%5D%20Error%20-%20%5Btsc%5D%20src%2Fextensions%2FtopBarNavigation%2FTopBarNavigationApplicationCustomizer.ts(66%2C111)%3A%20error%20TS2769%3A%20No%20overload%20matches%20this%20call.%3CBR%20%2F%3E%5B11%3A42%3A40%5D%20%5Btsc%5D%20The%20last%20overload%20gave%20the%20following%20error.%3CBR%20%2F%3E%5B11%3A42%3A40%5D%20%5Btsc%5D%20Argument%20of%20type%20'this'%20is%20not%20assignable%20to%20parameter%20of%20type%20'Attributes'.%3CBR%20%2F%3E%5B11%3A42%3A40%5D%20%5Btsc%5D%20Type%20'TopBarNavigationApplicationCustomizer'%20has%20no%20properties%20in%20common%20with%20type%20'Attributes'.%3CBR%20%2F%3E%5B11%3A42%3A40%5D%20Error%20-%20'tsc'%20sub%20task%20errored%20after%2012%20s%3CBR%20%2F%3Eexited%20with%20code%202%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-2811574%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3ESPFx%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3Etyescript%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E
Occasional Visitor

Hi i'm new to sharepoint development and I'm compiling the build using gulp build for solution but getting error on second last line of code (const elem: React.ReactElement<IReactHeaderProps> = React.createElement(ContextualMenuSubmenuExample, this);).. don't know what the problem.. i installed the type sscript version 3.7.7

 

the code is: 

import { override } from '@microsoft/decorators';
import { Log } from '@microsoft/sp-core-library';
import {
BaseApplicationCustomizer,
PlaceholderContent,
PlaceholderName
} from '@microsoft/sp-application-base';
export interface IHelloWorldApplicationCustomizerProperties {
Top: string;
Bottom: string;
}
import * as strings from 'TopBarNavigationApplicationCustomizerStrings';
import * as React from "react";
import * as ReactDOM from "react-dom";
import {IReactHeaderProps, ContextualMenuSubmenuExample} from './ContextualMenuSubmenuExample';


const LOG_SOURCE: string = 'TopBarNavigationApplicationCustomizer';

/**
* If your command set uses the Client SideComponentProperties JSON input,
* it will be deserialized into the BaseExtension.properties object.
* You can define an interface to describe it.
*/
export interface ITopBarNavigationApplicationCustomizerProperties {
Top: string;
Bottom: string;
}

/** A Custom Action which can be run during execution of a Client Side Application */
export default class TopBarNavigationApplicationCustomizer
extends BaseApplicationCustomizer<ITopBarNavigationApplicationCustomizerProperties> {

private _topPlaceholder: PlaceholderContent | undefined;
private _bottomPlaceholder: PlaceholderContent | undefined;

@override
public onInit(): Promise<void> {
Log.info(LOG_SOURCE, `Initialized ${strings.Title}`);

// Wait for the placeholders to be created (or handle them being changed) and then
// render.
this.context.placeholderProvider.changedEvent.add(this, this._renderPlaceHolders);

return Promise.resolve();
}

private _onDispose(): void {
console.log('[TopBarNavigationApplicationCustomizer._onDispose] Disposed custom top and bottom placeholders.');
}

private _renderPlaceHolders(): void {
// Handling the top placeholder
if (!this._topPlaceholder) {
this._topPlaceholder = this.context.placeholderProvider.tryCreateContent(
PlaceholderName.Top,
{ onDispose: this._onDispose }
);

// The extension should not assume that the expected placeholder is available.
if (!this._topPlaceholder) {
console.error("The expected placeholder (Top) was not found.");
return;
}

const elem: React.ReactElement<IReactHeaderProps> = React.createElement(ContextualMenuSubmenuExample, this);
ReactDOM.render(elem, this._topPlaceholder.domElement);
}
}
}

 

error: 

[11:42:27] Finished subtask 'sass' after 9.47 s
[11:42:27] Starting subtask 'tslint'...
[11:42:28] [tslint] tslint version: 5.12.1
[11:42:28] Starting subtask 'tsc'...
[11:42:28] [tsc] typescript version: 3.7.7
[11:42:40] Error - [tsc] src/extensions/topBarNavigation/TopBarNavigationApplicationCustomizer.ts(66,111): error TS2769: No overload matches this call.
[11:42:40] [tsc] The last overload gave the following error.
[11:42:40] [tsc] Argument of type 'this' is not assignable to parameter of type 'Attributes'.
[11:42:40] [tsc] Type 'TopBarNavigationApplicationCustomizer' has no properties in common with type 'Attributes'.
[11:42:40] Error - 'tsc' sub task errored after 12 s
exited with code 2

0 Replies