1

I have used office ui fabric 'Checkbox' component in my spfx. For storing value of checkbox I have declared one property with name 'var_Passport' as 'boolean' type. further, I'm assigning value (true/false) to that property using 'SetState'. But when I build the project, Below error is logging on the console,

[12:18:40] Error - [tsc] src/webparts/ifrsNewContract/components/IfrsNewContract.tsx(50,1): error TS2322: Type '{ var_JobTitle: string; var_JobDescription: string; var_Technology: undefined; var_Salary: undefi...' is not assignable
to type 'Readonly<IVariables>'.
[12:18:40] [tsc] Types of property 'var_Passport' are incompatible.
[12:18:40] [tsc] Type 'boolean' is not assignable to type 'string'.
[12:18:40] Error - 'tsc' sub task errored after 21 s
 exited with code 2 

I'm not getting why its saying that 'Type 'boolean' is not assignable to type 'string', where I'm not assigning any string value to 'Var_Passport' in my entire code !

For your reference, Below are my code snippets:

My Interface:

export interface IVariables
{
  var_JobTitle:string | undefined;
  var_JobDescription:string | undefined;
  var_Technology: { key: string | string | undefined };
  var_Salary:string | undefined;
  var_Age:string | undefined;
  var_JoiningDate:Date;
  var_Location:{ key: string | number | undefined };
  var_Passport:boolean;
  var_Manager:IPersonaProps[];
}

My Constructor:

constructor(props) {
super(props);
this.state={
var_JobTitle:"",
var_JobDescription:"",
var_Technology:undefined,
var_Salary:undefined,
var_Age:undefined,
var_JoiningDate:undefined,
var_Location:undefined,
var_Passport: false,
var_Manager:[] 
}

My SetState Function:

private _onPassportCheckboxChange = (item: boolean):void => {
this.setState({var_Passport:item},function() {console.log("setState Completed",this.state.var_Passport) });
}

My Checkbox:

<Checkbox label="Do you have passport?" onChange ={this._onPassportCheckboxChange.bind(this)}/>
1

The onChange methods first parameter is of type React.FormEvent and the second parameter is of type boolean.

Go to this link and check out the first example code: https://developer.microsoft.com/en-us/fabric#/components/checkbox

Change your code to this (haven't tested it):

private _onPassportCheckboxChange = (item: React.FormEvent<HTMLElement>, isChecked: boolean):void => {
    this.setState({var_Passport:isChecked},function() {
        console.log("setState Completed",this.state.var_Passport);
    });
}
  • Tried this, Same issue. – SP Developer Jan 29 at 6:33
  • I think its because of specific version of react/typescript which unable to compile it. – SP Developer Jan 29 at 6:38
1

Just adding undefined to property 'var_Passport' solved my issue.

export interface IVariables
{
  var_JobTitle:string | undefined;
  var_JobDescription:string | undefined;
  var_Technology: { key: string | string | undefined };
  var_Salary:string | undefined;
  var_Age:string | undefined;
  var_JoiningDate:Date;
  var_Location:{ key: string | number | undefined };
  var_Passport:boolean | undefined;
  var_Manager:IPersonaProps[];
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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