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: typescriptlang.org/docs/handbook/classes.html — jonrsharpe
– jonrsharpe, Commented Sep 23, 2017 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
– S.Chrobak, Commented Sep 23, 2017 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
– jonrsharpe, Commented Sep 23, 2017 at 14:51
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
– Nitzan Tomer, Commented Sep 23, 2017 at 15:01

Niladri · Accepted Answer · 2017-09-23 21:12:17Z

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, 2017 at 21:12

answered Sep 23, 2017 at 15:08

Niladri

5,9922 gold badges27 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

S.Chrobak Over a year ago

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 Over a year ago

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

Niladri Over a year ago

@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 Over a year ago

@S.Chrobak where are you getting the undefined error?

S.Chrobak Over a year ago

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

|

Andy · Accepted Answer · 2017-09-23 17:24:59Z

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.

Sean Amarasinghe · Accepted Answer · 2024-03-15 00:17:08Z

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.

edited Mar 15, 2024 at 0:17

answered May 12, 2022 at 3:53

Sean Amarasinghe

7491 gold badge6 silver badges8 bronze badges

Collectives™ on Stack Overflow

Typescript Class with private variables

3 Answers 3

9 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

9 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related