Typescript，Browserify和angularjs超出兩個文件示例

我正在嘗試將打字稿中的非常大的angularjs項目從AMD轉移到CommonJS。我在網上找到了幾個例子，但找不到一個能夠涵蓋三個實際項目相結合的例子。Typescript，Browserify和angularjs超出兩個文件示例

短版： 如果我刪除TS模塊，然後我不能找到一種方法，用在其他文件中的接口，除非宣佈每個文件之一。如果我保留TS模塊，那麼使用導出的項目會變得很麻煩，因爲我需要聲明require，然後在整個TS模塊名稱空間中，即使在模塊本身中也是如此。

長版本： 到目前爲止，我一直在使用打字稿模塊系統，我很高興它的工作方式。據我所知，在使用browserify時沒有必要使用ts模塊系統，因爲在使用它之前需要應用程序的特定部分，並且它不會像使用污染全局範圍的東西那樣透明（我得到了正確的結果？）。如果我從打字稿模塊內取出的一切，在蛇頁controller.ts類似的代碼：

'use strict'; 

interface ISnakePageController { 
    isLoggedInUser: boolean; 
} 

class SnakePageController implements ISnakePageController { 
    public isLoggedInUser:boolean = false; 

    static className:string = 'SnakePageController'; 
    static $inject:string[] = []; 

    constructor() { 
     console.log('snake controller created.'); 
    } 
} 

export = SnakePageController;

然後我可以使用該控制器從像index.ts文件：

/// <reference path="../../typings/angularjs/angular.d.ts" /> 
'use strict'; 

import angular = require('angular'); 
import directives = require('./directives'); 
import snakeController = require('./snake-page-controller'); 

var snakeModule:ng.IModule = angular.module('mike.snake', [ 
    directives.name 
]) 
.controller(snakeController.className, snakeController); 

export = snakeModule;

然後一切正常，但

我再也不能把出口關鍵字在接口的前面，因爲那麼編譯器抱怨每個文件約多出口。那麼如何在聲明的文件之外使用此接口？我必須爲每個界面創建單獨的文件，並要求（這看起來很尷尬）？
如果index.ts寫在JS的我就可以這樣寫：[ 要求（」 ./指令）的名稱 ]

angular.module（ 'mike.snake'，

inline。但是如果我在TS中編寫這個代碼，編譯器會抱怨TS2304：找不到名字'require'這似乎只是一個煩惱，但我希望能夠輸入所需的內聯模塊而不是導入它們並在兩個不同的地方使用它們。

有上面的困難，而不是瘋狂的必須從10s的文件中刪除TS模塊代碼我試圖堅持與打字稿模塊系統，並使其與browserify模塊系統打好，但...

有蛇-page控制器這樣寫：

'use strict'; 
export module Mike.Snake { 
    export interface ISnakePageController { 
     isLoggedInUser: boolean; 
    } 

    export class SnakePageController implements ISnakePageController { 
     public isLoggedInUser:boolean = false; 

     static className:string = 'SnakePageController'; 
     static $inject:string[] = []; 

     constructor() { 
      console.log('snake controller created.'); 
     } 
    } 
}

我可以訪問的類和文件外接口都，但我必須連在同一個模塊內鑽取整個模塊命名空間：即。

//part of index.ts which is in the same TS module with SnakePageController 
.controller(snakeController.Mike.Snake.SnakePageController.className, snakeController.Mike.Snake.SnakePageController);

是否有一個完整的打字稿，angularjs和browserify示例在那裏，我錯過了？

來源

2015-06-15 masimplo

你的問題讓我非常好奇，而且我認爲你這樣做可能大多是正確的;但是您應該能夠將示例中的長名稱空間名稱導入到使用它們的文件頂部的更簡單的本地名稱中。找到這個鏈接：http://www.codebelt.com/typescript/javascript-namespacing-with-typescript-internal-modules/但我無法驗證，因爲我沒有一個Typescript項目設置試試它 – Katana314

我設法將兩個接口都放在同一個文件中，而不是在整個命名空間中走動，通過刪除命名空間但保持導出。不知道這是否正確，雖然https://gist.github.com/masimakopoulos/d2e28b638b664d305c94 – masimplo

我剛剛通過TS文檔有關模塊https://github.com/Microsoft/TypeScript/wiki/Modules的另一個閱讀，它似乎刪除命名空間並導出界面和類是正確的方法。 – masimplo

我再也不能把出口關鍵字在接口的前面，因爲那麼編譯器抱怨，每個文件

提示多個出口：不使用export =。只使用命名導出，然後你可以導出不止一件東西

那麼我怎樣才能在聲明的文件之外使用這個接口呢？

建議您將接口放在globals.d.ts文件中。更多：http://basarat.gitbooks.io/typescript/content/docs/project/modules.html

來源

2015-06-15 23:43:41 basarat

你能舉一個名爲出口的例子嗎？同時將所有接口都集中在一個地方，這與我目前在我的項目中實現的每個模塊都是自包含的模塊化相反。另外，我將面對名稱衝突，其中兩個模塊可能具有相同的接口名稱 – masimplo

另外，如何不使用導入並將其存儲在第一位時不能使用require？我看到你使用import/from語法，不是這個ES6還是它與打字稿一起工作（我試過並從webstorm中得到一個錯誤）？順便說一句我曾嘗試導出聲明類似於https://github.com/Microsoft/TypeScript/issues/2242但tsc似乎並不喜歡他們編譯使用--target ES5 -module「commonjs」 – masimplo

downvote的原因：我認爲他的導入（這導致他選擇導出方法）的複雜性是如何實際*將文件帶入*。在註釋中引用d.ts文件有助於IDE，但實際上並未爲該文件編寫AMD/Common/etc導入。 – Katana314

Typescript，Browserify和angularjs超出兩個文件示例

回答

相關問題