无法从另一个.ts文件访问.ts文件中定义的函数定义

Question

I would appreciate your 2 cents to resolve the issue of calling a function defined in another file. I read the docs for Typescript which suggested to either setup an interface or a module and then reference it but I received the same error as below.

Error

ReferenceError: viewReport is not defined

File Structure

sample
  - sample.component.ts
  - sample.component.html
  - sample.component.css
  pdf
    viewReport.ts

sample.component.ts

import './pdf/viewReport';

declare var pdfMake: any;
declare var viewReport: any;

export class SampleComponent {

    addr = {
        "streetaddress": '',
        "cityName": '',
        "stateCode": '',
        "zipCode": ''
    };

    constructor() {}

    data = {
        header: {
            "address": {
                "street": this.addr.streetAddress,
                "city": this.addr.cityName,
                "state": this.addr.stateCode,
                "zip": this.addr.zipCode 
            }
        }

    }

    downloadPdf(){
        let pdf = pdfMake;
        pdf.createPdf(viewReport(this.data)).download('test.pdf');
    }
}

viewReport.ts

function viewReport( data ) {
    let docDefinition = {
      content: [{
        text: 'Address: ' + data.header.address.street
      }]
    }
    console.log( 'data:: ', data );
    return docDefinition;
}

Answer 1

I was able to resolve the issue by making the following changes to the code:

viewReport.ts

add keyword ' default ' when exporting

export default function viewReport( data ) {

sample.component.ts

replace

import './pdf/viewReport';
declare var viewReport: any;

with

import viewReport from './pdf/viewReport';

References

@n00dl3
@vesse
https://www.typescriptlang.org/docs/handbook/modules.html