Exception in String type error on SPFX with JQuery

Question

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"
        }
    ]
}

Answer 1

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);

Answer 2

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));
    }
});