Angular 5中TypeScript调用JavaScript函数及JS文件引入方法

Hey there! Let's break down how to get your existing JavaScript functions working smoothly in your Angular 5 project—this is a super common scenario when integrating vanilla JS code into an Angular app, so I’ve got you covered with clear steps and examples.

You’ve got two main approaches here, depending on whether you need the JS functions available across your entire app or only in specific components.

Option 1: Global Import (Available Everywhere) #

If your JS functions need to be accessible in multiple components, add them to your Angular CLI configuration:

1. Open your angular-cli.json file (note: Angular 5 uses this instead of the later angular.json).
2. Find the scripts array under the apps section.
3. Add the relative path to your JS file(s). For example:

   "apps": [
     {
       "scripts": [
         "../src/assets/js/pdf-ui-functions.js"
       ]
     }
   ]
   

4. Restart your Angular development server (ng serve) to apply the changes.

Alternatively, you can add a <script> tag directly to your src/index.html file for global access:

<script src="./assets/js/pdf-ui-functions.js"></script>

Option 2: Component-Specific Import (Only in One Component) #

If you only need the JS functions in a single component, you can import them directly in the component’s TypeScript file. First, update your JS file to use ES module syntax (add export to your functions):

// pdf-ui-functions.js
export function renderPDFViewer() {
  // Your existing JS logic here
}

export function zoomPDF(level) {
  // More UI functionality logic
}

Then, adjust your tsconfig.json to allow JS imports (set allowJs: true under compilerOptions) and import the functions in your component:

import * as pdfUtils from '../assets/js/pdf-ui-functions.js';

@Component({
  selector: 'app-pdf-reader',
  templateUrl: './pdf-reader.component.html'
})
export class PdfReaderComponent {
  ngOnInit() {
    // Call the imported JS function to initialize the UI
    pdfUtils.renderPDFViewer();
  }
}

Once your JS files are imported, you need to let TypeScript know about the functions to avoid "cannot find name" compilation errors.

For Globally Imported JS Functions #

Add a type declaration at the top of your component’s .ts file (before the @Component decorator):

// Declare the global JS function(s) to inform TypeScript
declare var renderPDFViewer: () => void;
declare var zoomPDF: (level: number) => void;

@Component({...})
export class PdfReaderComponent {
  onZoomIn() {
    // Call the JS function directly from your TypeScript method
    zoomPDF(1.2);
  }
}

This tells TypeScript that these functions exist in the global scope, so it won’t throw errors when you reference them.

For Component-Specific Imported Functions #

As shown in Option 2 above, once you’ve imported the JS module, you can call the functions directly using the imported module alias (like pdfUtils.zoomPDF(0.8) for zooming out).

• Load Order: Ensure your JS files load before the components that use them. Global imports via angular-cli.json or index.html will load early, so this is rarely an issue.
• Type Safety: For better maintainability, you can define TypeScript interfaces for your JS functions’ parameters and return values.
• Angular 5 Compatibility: Angular 5 uses TypeScript 2.4-2.6, so double-check your tsconfig.json has settings like moduleResolution: node to support JS imports.

内容的提问来源于stack exchange，提问作者Ravi