javascript - Angular + TypeScript + מודולים חיצוניים. איך לשמור על מידע טיפוס בין קבצים?

אני משתמש ב-Angular 1.4, TypeScript 1.6, ובמודולים חיצוניים של CommonJS.

יש לי שלושה קבצים במודול הזה:

paginator.module.ts
paginator.service.ts
paginator.controller.ts

paginator.module.ts נראה כך:

import PaginatorService = require('./paginator.service');
import PaginatorCtrl = require('./paginator.controller');

var Paginator = angular.module('paginator', [])
  .service('pageService', PaginatorService)
  .controller('pageCtrl', PaginatorCtrl);

הנה paginator.service.ts:

class PaginatorService {
    currentPage: number;
    pageCount: number;
    pages: Array<Array<any>>;

    constructor() {
      this.currentPage = 0;
    }
  }

export = PaginatorService;

בקובץ paginator.controller.ts, אני מזריק את pageService יחד עם $scope בעזרת הזרקת תלות, ואני מצפה לראות מידע על הסוג כשאני נותן לו סוג של PaginatorService.

class PaginatorController {
  scope: ng.IScope;
  pageService: PaginatorService;

  /**
   * @param  $scope
   * @param  pageService
   */
  constructor($scope: ng.IScope, pageService: PaginatorService) {
    this.scope = $scope;
    this.pageService = pageService;
  }
 export = PaginatorController;

עם זאת, אני מקבל את השגיאה הבאה ב-atom-typescript:

TS Error: Cannot find name 'PaginatorService'.

מה שניסיתי

• הוספת פקודת import נוספת בקובץ paginator.controller.js פותרת את הבעיה (כלומר import PaginatorService=require('./paginator.service');). עם זאת, זה נראה מיותר כי אני כבר require() את השירות הזה כאשר הקמתי את מודול ה-Angular שלי.

• ניסיתי להשתמש ב-tsc --declaration על paginator.service.js כדי ליצור קובץ הצהרה, שאותו תוכלו לצפות למטה, אבל זה לא פתר את הבעיה.

קובץ d.ts שנוצר אוטומטית

declare class PaginatorService {
    currentPage: number;
    pageCount: number;
    pages: Array<Array<any>>;
    constructor();
}
export = PaginatorService;

• שינוי קובץ ההצהרה הזה כדי להצהיר על מודול (הצהרה סביבתית?) נראה שעבד, אבל ביצוע זה ידנית עבור יותר מ-100 שירותי Angular שאני צריך להעביר לסינטקס CommonJS הופך את הגישה הזו לבעייתית.

השאלה שלי היא זו: מהו תבנית מומלצת לשימוש ב-CommonJS + Angular + TypeScript כדי לדרוש את המודולים הנכונים ואז לתת ל-Injection של התלותות של Angular לקחת אחריות מכאן, במיוחד בקבצים שונים?

תודה!

תשובה #1

שגיאת TS: לא ניתן למצוא את השם 'PaginatorService'.

אתה עושה

export class PaginatorService 

אתה צריך לייבא את זה כ

ES6

import {PaginatorService} from "./paginatorService"; 

או

סגנון ישן

import paginatorService = require("./paginatorService"); 
import PaginatorService = paginatorService.PaginatorService;