繼承與打字稿不工作的瀏覽器端

這個前面的討論：Inheritance TypeScript with exported class and modules 繼承與打字稿不工作的瀏覽器端

這是從ValidatorMessage.class.ts生成的源：

///<reference path='./def/lib.d.ts'/> 
///<reference path='./def/node.d.ts'/> 
var __extends = this.__extends || function (d, b) { 
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; 
    function __() { this.constructor = d; } 
    __.prototype = b.prototype; 
    d.prototype = new __(); 
}; 
var message = require("./Message.class"); 

var ValidatorMessage = (function (_super) { 
    __extends(ValidatorMessage, _super); 
    function ValidatorMessage() { 
     _super.apply(this, arguments); 
    } 
    return ValidatorMessage; 
})(message.Message); 
exports.ValidatorMessage = ValidatorMessage;

但是，當我上加載它瀏覽器（Grunt.js合併和縮小後），我得到這個錯誤：

未捕獲TypeError：無法讀取未定義的屬性'原型'

行剛過：

__.prototype = b.prototype, d.prototype = new __();

（〜LIGNE 6 & 7）

我不明白這個錯誤。即使我只將TS生成的源代碼放在Grunt中，我也會得到相同的錯誤。

編輯：

的console.log（消息）：

function Message(message, data, status) { 
     "undefined" == typeof data && (data = !1), "undefined" == typeof status && (status = !1), 
     /** 
     * Constants. 
     */ 
     this.FIELD_NAME_MESSAGE = "m", this.FIELD_NAME_DATA = "d", this.FIELD_NAME_STATUS = "s", 
     this.EXCEPTION_BAD_JSON_CONTENT = 'Unable to parse JSON. Bad object/string attributes. (Missing message ("' + this.FIELD_NAME_MESSAGE + '" field) or status ("' + this.FIELD_NAME_MESSAGE + '" field)?', 
     this.EXCEPTION_BAD_JSON_TYPE = "Incorrect data type. Object or string expected.", 
     this._message = message, this._data = data, this._status = status; 
    }

來源

2013-11-28 Vadorequest

什麼是行之後消息：'VAR消息=要求（「./ Message.class」）;'你可以CONSOLE.LOG（消息）在Chrome或者Firefox來記錄它並看到它的價值。它應該是一個函數，所以你可以'console.log（typeof message）;'看看它是否是一個函數。 – HMR

主編編輯。這是一個功能。我寫了這個函數需要我自己，因爲它之前不存在：require = function（file）var files = file.split（'/'）; file = files [files.length - 1] .replace（'。class'，''）; 返回導出[文件] ||窗口[文件]; } – Vadorequest

最後，我使用了requireJs和AMD編譯標誌，它正在工作。 – Vadorequest

兩年前我解決了這個問題。

這是因爲我的ValidatorMessage繼承了我的Message類，但加載順序錯誤。

我使用CommonJS的（現在仍然這樣做，AMD通過使一切異步和武力使用額外工具像requireJS IMO很爛，如果你想在服務器和瀏覽器上共享源代碼，最好不要使用AMD ，因爲它在Node上真的不太好。）這是用於Node的，也是瀏覽器兼容的（如果你以正確的順序加載文件...）

使用WebStorm IDE，我首先解決了編譯問題對於AMD和CommonJS來說，有兩個「Watch任務」，一個用於CommonJS，另一個用於AMD，帶有一組不同的文件。但後來我開始使用grunt-ts作爲@basarat表示，這是做了伎倆。

如果你現在在讀這個，我建議不要使用IDE觀察者，而應該使用grunt-ts和[tsconfig.json][1]文件。這是我找到的最好/最乾淨的解決方案。 grunt-ts通過遵循tsconfig文件中的規則，很好地完成了編譯工作。（文件順序，目標等）

原來的答覆：

I wrote a documentation for WebStorm IDE (7.0), probably the same with 6.x and next versions.

If you're not using WebStorm, you're probably using TypeScript with Visual Studio, I hope there is some plugin to do the same thing. Should exist. If you're not using VS, you should definitively use WebStorm as IDE, the best I ever used.

This document show how I solved my issue, by compiling for two different targets.

Configure WebStorm to compile for AMD and CommonJs:(dead link)https://mega.co.nz/#!4Y8jkSwJ!BGWr2FROWYaqwdyQ4aRNczEF4bN37-EB1sO1LdVVux4

來源

2013-12-02 15:29:30 Vadorequest

這不是一個答案，它是您對IDE的看法以及到異地資源的無效鏈接。我對死鏈接感興趣;你能把它包含在你的答案的正文中嗎？ –

@CarrieKendall我沒有這些屏幕截圖，似乎他們已經從我的MEGA帳戶中刪除。我會更新答案以提供更多信息。 – Vadorequest

-1

奇怪的是，打字稿將這種方式，因爲它似乎傳遞ValidatorMessage延長之前它甚至建立依託編譯可變吊裝使之起作用，這通常是不好的做法。更好的辦法是：

var ValidatorMessage = (function (_super) { 
    function ValidatorMessage() { 
     _super.apply(this, arguments); 
    } 
    __extends(ValidatorMessage, _super); 
    return ValidatorMessage; 
})(message.Message);

來源

2013-11-28 11:58:43 HMR

我真的不能這樣做，我的意思是，我的.js是生成的，我不能手動更改它，它是無用的。它會在下一次被覆蓋。但也許有一個TS的問題... – Vadorequest

順便說一句，你的代碼不起作用，因爲_super不存在於此上下文中（最後一行）我嘗試使用message.ValidatorMessage而不是_super，但不起作用。 – Vadorequest

@Voreorequest你說得對，我把__extends幫手也放在了錯誤的地方。更新了答案。由於變量提升，這不應該引起錯誤。仍然奇怪的是打字稿會以這種方式編譯它。 – HMR

既然你正在編譯瀏覽器端你需要--module amd選項進行編譯。您似乎編譯了--module commonjs，這對瀏覽器目標無效。

請參見：http://www.youtube.com/watch?v=KDrWLMUY0R0&hd=1

來源

2013-11-28 12:35:59 basarat

我想在服務器和瀏覽器端都使用它，可以嗎？ – Vadorequest

我的意思是，我的打字稿文件只能被服務器使用，其他的只能通過瀏覽器和其他文件才能使用。我該怎麼做？我看了視頻，謝謝。 – Vadorequest

你必須編譯兩次，一次用於服務器，一次用於客戶端。 –

繼承與打字稿不工作的瀏覽器端

回答

相關問題