Question

需要帮助在打字稿中编写以下javascript代码，它是一个带有两个公共函数的简单类：

var Myclass =   (function  ()
{
var teststr = ['ein test','noch ein test'];

function Myclass (){
    this.test();
}
function getStr (id) {
    return teststr[id];
}
Myclass.prototype.test = function ()
{
    console.log(getStr(0))
    this.test1();
}
Myclass.prototype.test1 = function ()
{
    console.log(getStr(1))
}
return Myclass;
})();
var instMyClass = new Myclass();

var instMyClass调用构造函数，而不是构造函数调用public function test。
function test发出私有数组teststr的第一个元素并调用公共功能test1
function test1发出私有数组teststr的第二个元素

我尝试这个解决方案，bur typescript compilier显示错误

class Myclass {
private teststr:Array<string> = ['ein test','noch ein test'];
constructor() {
    this.test();
}
function getStr() {
    return teststr[id];
}
test() {
console.log(getStr(0));
    this.test1();
}
test1(str:string) {
console.log(getStr(1));
}
}

let instMyclass = new Myclass();

如果我尝试使用form.submit的私有函数，则函数未定义：

class Ticket {

private form: HTMLFormElement;

constructor() {

    this.form = document.forms[0]!
    this.form.onsubmit = this.submit;
}
private setUser (user: TicketUser):void {
    console.log('ticket setUser',user);
}
public submit ():any {
    console.log('ticket submit');
    this.setUser({name:'stefan',age:100});
    return false;
}
}

Answer 1

您可以尝试使用下面的打字稿代码吗？更新了我的回答

ts文件

class Ticket {

    private form: HTMLFormElement;

    constructor(elem: HTMLFormElement) {

        this.form = elem;
        //this.form.onsubmit = this.submit();
    }
    private setUser(user: TicketUser): void {
        console.log('ticket setUser', user);
    }
    public submit(): any {
        console.log('ticket submit');
        this.setUser({ name: 'stefan', age: 100 });
        return false;
    }
}

class TicketUser {

    name: string;
    age: number;
}

window.onload = () => {
    var btn = document.getElementById("btn");
    btn.onclick = function () {
        var form = document.forms[0];
        var ticket = new Ticket(form);
        form.onsubmit = ticket.submit();

    }
};

HTML

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>TypeScript HTML App</title>
    <link rel="stylesheet" href="app.css" type="text/css" />

</head>
<body>
    <h1>TypeScript test</h1>

    <form id="myform" action="#"></form> <br />
    <button id="btn">click me</button>
    <script src="test.js"></script>
</body>
</html>

Answer 2

你可以使用getter / setter来做你想做的事情。
首先你忘记了这个＆＃39;用类调用变量和函数。
其次，你不使用函数，你使用private，publict和protected来声明它们。
请参阅下面的示例，了解如何构建，实例化和使用类。

class Myclass {
private teststr: Array<string> = ['ein test','noch ein test'];

constructor() {
    this.test();
}

public getStr(id): string {
    return this.teststr[id];
}

public setStr(str: string) {
    this.teststr.push(str);
}

private test() {
    console.log('This works, calling withing class functions within class');
}

private test1(str:number) {
    console.log(this.getStr(1));
}
}

let instMyclass = new Myclass();
instMyclass.setStr('Another String');
let x = instMyclass.getStr(2);
console.log(x);

如果你有tsc编译器安装，请执行以下操作：

tsc myfilename.tsc
node myfilename.js

你应该看到输出。

带有私有变量的Typescript类

2 个答案: