javascript - Angular + TypeScript + Ulkoiset moduulit. Kuinka ylläpitää tyyppitietoa tiedostojen välillä?

Käytän Angular 1.4:ää, TypeScript 1.6:ta ja CommonJS-ulkoisia moduuleja.

Minulla on kolme tiedostoa tässä moduulissa:

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

paginator.module.ts näyttää tältä:

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

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

Tässä on paginator.service.ts:

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

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

export = PaginatorService;

Tiedostossa paginator.controller.ts injektoin pageService yhdessä $scope:n kanssa riippuvuuden injektion avulla, ja odotan näkeväni tyyppitiedot, kun annan sille tyypiksi 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;

Kuitenkin saan seuraavan virheen atom-typescriptissä:

TS Error: Cannot find name 'PaginatorService'.

Mitä olen yrittänyt

  • Toisen tuontilauseen lisääminen tiedostoon paginator.controller.js ratkaisee ongelman (eli import PaginatorService=require('./paginator.service');). Tämä kuitenkin vaikuttaa ylimääräiseltä, koska olen jo require()n tämän palvelun luodessani Angular-moduulini.

  • Yritin käyttää tsc --declaration tiedostoon paginator.service.js luodakseni deklarointitiedoston, jonka voit nähdä alla, mutta se ei ratkaissut ongelmaa.

Automaattisesti luotu d.ts-tiedosto

declare class PaginatorService {
    currentPage: number;
    pageCount: number;
    pages: Array<Array<any>>;
    constructor();
}
export = PaginatorService;
  • Tämän deklarointitiedoston muokkaaminen moduulin (ambientti-deklarointi?) ilmoittamiseksi näytti toimivan, mutta tämän tekeminen manuaalisesti yli 100 Angular-palvelulle, jotka minun täytyy siirtää CommonJS-syntaksiin, tekee tästä lähestymistavasta ongelmallisen.

Kysymykseni on tämä: Mikä on suositeltu malli CommonJS:n, Angularin ja TypeScriptin käyttämiseen oikeiden modulien vaatimiseen ja sen jälkeen Angularin riippuvuuksien injektion antamiseen hoitaa loput, erityisesti tiedostojen välillä?

Kiitos!

Vastaus #1

TS-virhe: Nimeä 'PaginatorService' ei löydy.

Sinä teet

export class PaginatorService

Sinun täytyy tuoda se sisään nimellä

ES6

import {PaginatorService} from "./paginatorService";

tai

Vanha tyyli

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

Aiheeseen liittyviä artikkeleita