0

I really need help to resolve Type error encountered on this function in SPFX with jQuery.

Here is the function, The return statement is failing:

var addFile = function (fileTitle, fileName, fileType, team) {
var requestUri = "../_api/web/lists/getByTitle('SPFxFiles')/items";
var requestHeaders = {
    "accept": "application/json;odata=verbose",
    "content-type": "application/json;odata=verbose",
    "X-RequestDigest": $('#__REQUESTDIGEST').val()
}
var fileData = {
    __metadata: { "type": "SP.Data.SPFxFilesListItem" },
    Title: fileTitle,
    SPFxFileName: fileName,
    SPFxFileType: fileType,
    SPFxTeam: team
};
var requestBody = JSON.stringify(fileData);
return $.ajax({
    url: requestUri,
    type: "POST",
    headers: requestHeaders,
    data: requestBody
});

Error:

{
    "resource": ".../src/webparts/orderForm/OrderFormWebPart.ts",
    "owner": "typescript",
    "code": "2769",
    "severity": 8,
    "message": "No overload matches this call.\n  Overload 1 of 2, '(url: string, settings?: AjaxSettings<any>): jqXHR<any>', gave the following error.\n    Argument of type '{ url: string; type: string; contentType: string; headers: { accept: string; \"X-HTTP-Method\": string; \"X-RequestDigest\": string | number | string[]; \"If-Match\": string | number | string[]; }; data: string; }' is not assignable to parameter of type 'string'.\n  Overload 2 of 2, '(settings?: AjaxSettings<any>): jqXHR<any>', gave the following error.\n    Type '{ accept: string; \"X-HTTP-Method\": string; \"X-RequestDigest\": string | number | string[]; \"If-Match\": string | number | string[]; }' is not assignable to type 'PlainObject<string>'.\n      Property '\"X-RequestDigest\"' is incompatible with index signature.\n        Type 'string | number | string[]' is not assignable to type 'string'.\n          Type 'number' is not assignable to type 'string'.",
    "source": "ts",
    "startLineNumber": 317,
    "startColumn": 8,
    "endLineNumber": 323,
    "endColumn": 3,
    "relatedInformation": [
        {
            "startLineNumber": 165,
            "startColumn": 13,
            "endLineNumber": 165,
            "endColumn": 20,
            "message": "The expected type comes from property 'headers' which is declared here on type 'AjaxSettings<any>'",
            "resource": ".../node_modules/@types/jquery/misc.d.ts"
        }
    ]
}
2

Probably Typescript type-check does not recognize the inline object as PlainObject:

settings
Type: PlainObject

(source)

You could try this

var requestBody = JSON.stringify(fileData);
var settings: Object = {
    url: requestUri,
    type: "POST",
    headers: requestHeaders,
    data: requestBody
};
return $.ajax(settings);
0

Try using below working code:

$.ajax({
    url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('SPFxFiles')/items",
    type: "POST",
    data: JSON.stringify({
        __metadata: {
            type: "SP.Data.SPFxFilesListItem"
        },
        Title: fileTitle,
        SPFxFileName: fileName,
        SPFxFileType: fileType,
        SPFxTeam: team
    }),
    headers: {
        "Accept": "application/json;odata=verbose",
        "Content-Type": "application/json;odata=verbose",
        "X-RequestDigest": $("#__REQUESTDIGEST").val()
    },
    success: function(data, status, xhr) {
        alert("item added sucessfully");
    },
    error: function(xhr, status, error) {
        alert(JSON.stringify(error));
    }
});

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.