error TS2540: Cannot assign to 'vfs' because it is a read-only property

Im Trying to generate PDF using pdfmaker. In my code it dosent show any errors.but when compiling it show below error. but also pdf is working and generating.

error TS2540: Cannot assign to 'vfs' because it is a read-only property.

> 19 pdfMake.vfs = pdfFonts.pdfMake.vfs;
> ~~~
> src/app/component/invoice/invoice.component.ts:235:25 - error TS2345: Argument of type '{ content: ({ text: string; fontSize:
> number; alignment: string; color: string; bold?: undefined;
> decoration?: undefined; style?: undefined; columns?: undefined; } | {
> text: string; fontSize: number; bold: boolean; ... 4 more ...;
> columns?: undefined; } | { ...; } | { ...; })[]; styles: { ...; }; }'
> is not assignable to parameter of type 'TDocumentDefinitions'.
> Types of property 'content' are incompatible.
> Type '({ text: string; fontSize: number; alignment: string; color: string; bold?: undefined; decoration?: undefined; style?:
> undefined; columns?: undefined; } | { text: string; fontSize: number;
> bold: boolean; ... 4 more ...; columns?: undefined; } | { ...; } | {
> ...; })[]' is not assignable to type 'Content'.
> Type '({ text: string; fontSize: number; alignment: string; color: string; bold?: undefined; decoration?: undefined; style?:
> undefined; columns?: undefined; } | { text: string; fontSize: number;
> bold: boolean; ... 4 more ...; columns?: undefined; } | { ...; } | {
> ...; })[]' is not assignable to type 'ArrayOfContent'.
> The types returned by 'pop()' are incompatible between these types.
> Type '{ text: string; fontSize: number; alignment: string; color: string; bold?: undefined; decoration?: undefined;
> style?: undefined; columns?: undefined; } | { text: string; fontSize:
> number; bold: boolean; ... 4 more ...; columns?: undefined; } | { ...;
> } | { ...; } | undefined' is not assignable to type 'string |
> ArrayOfContent | ContentText | ContentColumns | ContentStack |
> ContentUnorderedList | ... 11 more ... | undefined'.
> Type '{ text: string; fontSize: number; alignment: string; color: string; bold?: undefined; decoration?: undefined;
> style?: undefined; columns?: undefined; }' is not assignable to type
> 'string | ArrayOfContent | ContentText | ContentColumns | ContentStack
> | ContentUnorderedList | ... 11 more ... | undefined'.
> Property 'tocItem' is missing in type '{ text: string; fontSize: number; alignment: string; color: string; bold?:
> undefined; decoration?: undefined; style?: undefined; columns?:
> undefined; }' but required in type 'ContentTocItem'.
>
> 235 pdfMake.createPdf(docDefinition).download();
> ~~~~~~~~~~~~~
>
> node_modules/@types/pdfmake/interfaces.d.ts:253:5
> 253 tocItem: boolean | string | string[];
> ~~~~~~~
> 'tocItem' is declared here.
> src/app/component/invoice/invoice.component.ts:237:25 - error TS2345: Argument of type '{ content: ({ text: string; fontSize:
> number; alignment: string; color: string; bold?: undefined;
> decoration?: undefined; style?: undefined; columns?: undefined; } | {
> text: string; fontSize: number; bold: boolean; ... 4 more ...;
> columns?: undefined; } | { ...; } | { ...; })[]; styles: { ...; }; }'
> is not assignable to parameter of type 'TDocumentDefinitions'.
>
> 237 pdfMake.createPdf(docDefinition).print();
> ~~~~~~~~~~~~~
> src/app/component/invoice/invoice.component.ts:239:25 - error TS2345: Argument of type '{ content: ({ text: string; fontSize:
> number; alignment: string; color: string; bold?: undefined;
> decoration?: undefined; style?: undefined; columns?: undefined; } | {
> text: string; fontSize: number; bold: boolean; ... 4 more ...;
> columns?: undefined; } | { ...; } | { ...; })[]; styles: { ...; }; }'
> is not assignable to parameter of type 'TDocumentDefinitions'.
>
> 239 pdfMake.createPdf(docDefinition).open();


This is my component.ts code and im using generatePDf function to generate pdf and its working fine and no error showing.

import * as pdfMake from 'pdfmake/build/pdfmake.js';
import * as pdfFonts from 'pdfmake/build/vfs_fonts.js';
pdfMake.vfs = pdfFonts.pdfMake.vfs;


generatePDF(action = "open") {
let docDefinition = {
content: [
{
text: "Indika Agro Sales and Service Center",
fontSize: 16,
alignment: "center",
color: "#047886",
},
{
text: "INVOICE",
fontSize: 20,
bold: true,
alignment: "center",
decoration: "underline",
color: "skyblue",
},
{
text: "Customer Details",
style: "sectionHeader",
},
{
columns: [
[
{
text: this.invoiceform.value.customerName,
bold: true
},
{ text:this.invoiceform.value.cusPhnNumber, }
],
[
{
text: `Date: ${new Date().toLocaleString()}`,
alignment: 'right'
},
{
text: `Bill No : ${((Math.random() * 1000).toFixed(0))}`,
alignment: 'right'
}
]
]
},
],
styles: {
sectionHeader: {
bold: true,
decoration: "underline",
fontSize: 14,
margin: [0, 15, 0, 15],
},
},
};

if (action === "download") {
pdfMake.createPdf(docDefinition).download();
} else if (action === "print") {
pdfMake.createPdf(docDefinition).print();
} else {
pdfMake.createPdf(docDefinition).open();
}
}

Continue reading...