TypeScript类函数不可用

TypeScript class function not available

本文关键字：类函数 TypeScript 更新时间：2023-09-26

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

我在一个jsfiddle中复制了生成的JavaScript，该方法似乎可以工作
我不是一个真正的JavaScript爱好者，所以非常感谢任何帮助！

到目前为止我尝试过的东西：

不同的浏览器（Chrome:Uncaught TypeError: undefined is not a function，FF:TypeError: this.checkString is not a function）
清除浏览器缓存
删除IIS Express的临时文件
清洁和重建解决方案
不使用私有修饰符
在另一台机器上启动项目
将underscore.js调用替换为verfiy的dummy，这不是问题所在
已检查实例成员的设置是否正确

这是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;
})();

这可能是因为运行时出现了错误的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));
    }

请搜索this在javascript和typescript中的含义以了解更多信息。

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

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

多亏了Typescript，这是一个很容易实现的微妙好处。：）

示例：
来源：Typescript绕过堆栈溢出解决方案

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.
    }
}