TypeScript类函数不可用

Question

我试图调用TypeScript类的实例方法（在ASP.NET MVC项目中）。但是，在运行时，我会遇到0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'checkString'之类的异常。

我将生成的JavaScript复制到方法似乎有效的jsfiddle中 我不是一个真正的JavaScript人，所以非常感谢任何帮助！

到目前为止我尝试过的事情：

1. 不同的浏览器（Chrome：Uncaught TypeError: undefined is not a function，FF：TypeError: this.checkString is not a function）
2. 清除浏览器缓存
3. 删除IIS Express的临时文件
4. 清理并重建解决方案
5. 不使用私有修饰符
6. 在另一台机器上启动项目
7. 用假人替换underscore.js调用以确认这不是问题
8. 检查实例成员是否已正确设置

这是TypeScript代码：

class FormData {
    BlogName: string;
    CacheTimeOut: number;
    CopyrightHolder: string;
    NavBarTitle: string;
    MarkdownExtra: boolean;
    MarkdownSanitize: boolean;
    RatingActive: boolean;
    HtmlEditor: boolean;

    constructor(blogName: string, cacheTimeOut: number, copyrightHolder: string, navBarTitle: string, markdownExtra: boolean, markdownSanitize: boolean, ratingActive: boolean, htmlEditor: boolean) {
        this.BlogName = blogName;
        this.CacheTimeOut = cacheTimeOut;
        this.CopyrightHolder = copyrightHolder;
        this.NavBarTitle = navBarTitle;
        this.MarkdownExtra = markdownExtra;
        this.MarkdownSanitize = markdownSanitize;
        this.RatingActive = ratingActive;
        this.HtmlEditor = htmlEditor;
    }

    private checkString(value: string): boolean {
        return _.isString(value) && value !== '';
    }

    validate(): boolean {
        return (this.checkString(this.BlogName) && this.checkString(this.CopyrightHolder) && this.checkString(this.NavBarTitle) && _.isNumber(this.CacheTimeOut) && !_.isNull(this.MarkdownExtra) && !_.isNull(this.MarkdownSanitize) && !_.isNull(this.RatingActive));
    }       
}

//I'm calling the validate function like that (from within the same module)
var form = getFormData(); //returns a FormData instance
if (!form.validate()) {
    //foo
}

这里生成的JavaScript：

var FormData = (function () {
    function FormData(blogName, cacheTimeOut, copyrightHolder, navBarTitle, markdownExtra, markdownSanitize, ratingActive, htmlEditor) {
        this.BlogName = blogName;
        this.CacheTimeOut = cacheTimeOut;
        this.CopyrightHolder = copyrightHolder;
        this.NavBarTitle = navBarTitle;
        this.MarkdownExtra = markdownExtra;
        this.MarkdownSanitize = markdownSanitize;
        this.RatingActive = ratingActive;
        this.HtmlEditor = htmlEditor;
    }
    FormData.prototype.checkString = function (value) {
        return _.isString(value) && value !== '';
    };

    FormData.prototype.validate = function () {
        return (this.checkString(this.BlogName) && this.checkString(this.CopyrightHolder) && this.checkString(this.NavBarTitle) && _.isNumber(this.CacheTimeOut) && !_.isNull(this.MarkdownExtra) && !_.isNull(this.MarkdownSanitize) && !_.isNull(this.RatingActive));
    };
    return FormData;
})();

Answer 1

这可能是因为运行时错误的this。您可以使用lambda函数()=>{}而不是function来确保this在生成的JavaScript中具有词法范围：

validate = (): boolean => {
        return (this.checkString(this.BlogName) && this.checkString(this.CopyrightHolder) && this.checkString(this.NavBarTitle) && _.isNumber(this.CacheTimeOut) && !_.isNull(this.MarkdownExtra) && !_.isNull(this.MarkdownSanitize) && !_.isNull(this.RatingActive));
    } 

请在javascript和打字稿中搜索this的含义以了解详情。

Answer 2

另一种绕道式解决方案：
您可以使用this.而不是super.。

• 先决条件是创建两个类，一个作为基类，另一个作为可用类。
• Base Class包含要在构造函数中调用的方法。
• 可用类使用super.myMethod();代替this.myMethod();
从其构造函数中调用方法

由于Typescript，这是一个微妙的好处。 ：）

示例：
来源：Typescript Bypass Solution on Stackoverflow

export class myBaseClass
{
    constructor(ctx:any)
    {
        this.ctx = ctx;         // Audio context saved into member variable of class
    }
    myBaseMethod()
    {
        // Do Complex Work
    }
}

export class myUsableClass extends myBaseClass
{
    constructor(ctx:any)
    {
        super(ctx);
        super.myBaseMethod(); // Use super., Not this.
    }

}