Typescript Class with private variables

Question

Need help to write following javascript code in typescript, it is a simple class with two public functions:

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 call the constructor , than the constructor call public function test.
function test give out the first element of private array teststr and call public function test1
function test1 give out the second elemement of private array teststr

i try this solution, bur typescript compilier shows errors

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();

if i try a private function with a form.submit, than the function is undefined:

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

Read the docs: https://www.typescriptlang.org/docs/handbook/classes.html — jonrsharpe, Sep 23 '17 at 14:20
@jonrsharpe, i read the docs, but my english is small so i thought it is a good idea to ask someone. — S.Chrobak, Sep 23 '17 at 14:50
SO is not a tutorial service; there are many tutorials and articles out there on TS, you may even find some in your native language. — jonrsharpe, Sep 23 '17 at 14:51
@Nitzan, yes i tried, and the compilied js-code makes my confuse and typescript shows a lot of red lines. — S.Chrobak, Sep 23 '17 at 14:52
@jonrsharpe, who defined what SO is? You? i use SO since i am writing code, and i learned a lot of to ask questions like this or read questions from other people who do the same. If you don#T like my question, so don't read it, spend your time for better things. — S.Chrobak, Sep 23 '17 at 14:56
The community defines what it is. See the [help] for the current guidance. If you have a problem with that, take it to [meta]. — jonrsharpe, Sep 23 '17 at 14:56
@jonrshape, i read in the help center: However, if your motivation is “I would like others to explain ______ to me”, then you are probably OK. This is the reason of my posting. So what i'm doing wrong? — S.Chrobak, Sep 23 '17 at 14:59
So show us what you've tried, what errors you got. Ask specific questions instead of asking people to write code for you. — Nitzan Tomer, Sep 23 '17 at 15:01

Niladri · Accepted Answer · 2017-09-23T21:12:17.390

0

Can you try with the typescript code below . Updated my answer

ts file

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>

edited Sep 23 '17 at 21:12

answered Sep 23 '17 at 15:08

Niladri

5,832
2
23
41

Thx, this was my stupid error, i did not understand wath's privat and what is public, thx nilardi that you are open my eyes.... – S.Chrobak Sep 23 '17 at 15:12
it only works if i call the member functions from out of th constructor, but if the call comes from a form.submit, than the private function is undefined. please see Example in my updated posting – S.Chrobak Sep 23 '17 at 16:08
@S.Chrobak what happens if you make it public ?... the code I provided above is not related to HTMLFormElement, this was related to typescript. But you have changed your question . it's better that you post a different question with the updated code you are using. – Niladri Sep 23 '17 at 16:14
@S.Chrobak where are you getting the undefined error? – Niladri Sep 23 '17 at 16:21
@Niardi, sorry for posting update! When i start today i was little bit confuse, so i tryed to ask with a simple code , but didn't realizied that when the meber function call come from a dom event it si not the same as to call this function from construct. – S.Chrobak Sep 23 '17 at 20:41
@Nilardi The error throws when in Ticket.submit the this.setUser is fire. Error "TypeError: this.setUser is not a function" – S.Chrobak Sep 23 '17 at 20:45
that is because you are not calling the constructor. – Niladri Sep 23 '17 at 20:45
in index.html i call var ticket = new Ticket(); when document is load. So i thought that this.setUser is the namespace ticket.setuser() as a private function?!? – S.Chrobak Sep 23 '17 at 21:00
@Nilardi, thanks for your solution. I'm a jQuery-developer and it's hard for my to work with ts, because i must write a lot of code to do little thinks! In jQuery it is no problem to give an form-element a member-function for a submit-event in the constructor, it is not the best practice but it is possible with small code. Your solutions is a way to fix the problem, but i search for a way to do this things in a class-namespace, to understand how OOP works with ts. Thanks a lot for your answers. – S.Chrobak Sep 24 '17 at 15:19

score 0 · Answer 2 · answered Sep 23 '17 at 17:24

You can use getter/setter for what you are trying to do.
Firstly you forgot the 'this' to call variables and functions withing class.
Secondly you don't use function, you use private, publict and protected to declare them.
See the example below on how to build, instantiate and use a class.

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);

If you have tsc compiler install do this:

tsc myfilename.tsc
node myfilename.js

and you should see the output.

score 0 · Answer 3 · answered May 12 '22 at 03:53

0

You can now use private access fields in TypeScript:

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

Read more about this in my article here.

answered May 12 '22 at 03:53

Sean Amarasinghe

638
1
6
8

Typescript Class with private variables

3 Answers3

Linked