Typescript Class 带私有变量

Question

需要帮助在 typescript 中编写以下 javascript 代码，它是一个具有两个公共功能的简单 class：

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测试。
function test 给出私有数组 teststr 的第一个元素并调用 public function test1
function test1 给出私有数组teststr的第二个元素

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

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 的私有 function，那么 function 是未定义的：

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进行尝试。
首先，您忘记了“ this”与类一起调用变量和函数。
其次，您不使用函数，而是使用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

您应该会看到输出。

Answer 3

您现在可以在 TypeScript 中使用私有访问字段：

class Person {
  #address = '221B, Baker Street, London';
  
  checkAddress(address: string) {
      return this.#address === address;
  }
}

在我的文章中阅读更多相关信息。

Typescript Class 带私有变量

问题描述

3 个解决方案

解决方案1
0 已采纳 2017-09-23 15:08:06

解决方案2
0 2017-09-23 17:24:59

解决方案3
0 2022-05-12 03:53:45

Typescript Class 带私有变量

问题描述

3 个解决方案

解决方案1 0 已采纳 2017-09-23 15:08:06

解决方案2 0 2017-09-23 17:24:59

解决方案3 0 2022-05-12 03:53:45

解决方案1
0 已采纳 2017-09-23 15:08:06

解决方案2
0 2017-09-23 17:24:59

解决方案3
0 2022-05-12 03:53:45