Discussion :

[keokaz]

Bonsoir, j'essaye de récupérer une donnée d'une classe typescript, mais j'ai comme résultat indefined

voici le bout de code:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 
/// <reference path='../typings/restify.d.ts' />
import * as restify from 'restify';
 
import {PDO} from '../PDO'
 
 
class User{
 
    public data:any;
 
    public findUser()
    {
    let pdo = new PDO().getPdo();
 
    var qb = pdo.query("SELECT * from utilisateur where id = 1", function(err,result){
 
        if (err) throw err;
           this.data = result.rows[0];
           console.log(this.data); // anonymous { id: 1, email: 'pg@pg.fr' }
        });
 
    }
    public getUser(){
        console.log(this.data);
    }
 
 
}
 
 
var user = new User();
user.findUser(); 
user.getUser();//undefined

ma méthode getUser() me donne undefined, alors que dans la méthode findUser(),
la console.log(this.data) me donne un résultat?
comment faire pour enregistrer ma donnée dans l'attirbut data qui est public ?
merci de vos réponses

[yahiko]

Ton programme est problématique dans la mesure où il n'est pas déterministe. Son comportement dépend de la plateforme et des aléas de son environnement. Ta gestion de l'asynchrone n'est pas convenable.

L'attribut data de ta classe User n'est défini que si ta requête SQL, en supposant qu'elle fonctionne, s'est terminée. Ce qui n'est pas garanti au moment de l'appel à getUser(). Et dans ton exemple, peu de chance pour que cela soit le cas.

Pour remédier à cela, il faudrait passer par le modèle observateur (observer pattern) et les architectures du style MVVM.

Et même si la requête SQL était terminée avant l'appel à getUser(), l'attribut data ne serait pas initialisé correctement puisque ton this dans ta fonction anonyme ne correspond pas au this de l'instance de la classe (user) mais à celui de ta fonction anonyme. Utilise plutôt la notation fléchée =>.

[keokaz]

Je te remercie beaucoup de ta réponse, je suis encore trop habitué au programme ligne par ligne procédural ...
c'est pas encore claire chez moi ...

j'ai tenter ceci:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
 
/// <reference path='../typings/restify.d.ts' />
import * as restify from 'restify';
 
import {PDO} from '../PDO'
 
 
class User{
 
    public data:string;
 
    public findUser()
    {
 
 
 
        this.data = function(result)
        {
 
            let pdo = new PDO().getPdo();
            let qb =  pdo.query("SELECT * from utilisateur where id = 1", function(err,result){
 
 
            if (err) throw err;
                return  result.rows[0];
            });
        }
 
    }
 
    public getUser(function(this.data)){
        console.log(this.data);
    }
 
 
}
 
 
var user = new User();
user.findUser(); 
user.getUser();//undefined

ici le compilateur tsc me génère une erreur

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
 
  User.prototype.getUser = ;
                             ^
SyntaxError: Unexpected token ;
    at Object.exports.runInThisContext (vm.js:76:16)
    at Module._compile (module.js:513:28)
    at Object.Module._extensions..js (module.js:550:10)
    at Module.load (module.js:458:32)
    at tryModuleLoad (module.js:417:12)
    at Function.Module._load (module.js:409:3)
    at Module.runMain (module.js:575:10)
    at run (bootstrap_node.js:352:7)
    at startup (bootstrap_node.js:144:9)
    at bootstrap_node.js:467:3
l

je ne sais pas encore bien construire correctement ma classe avec des callbacks.

quant tu parles de "=>" c'est la déclaration de variable qui est une fonction ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
function add(x: number, y: number): number {
    return x + y;
}
 
let myAdd = function(x: number, y: number): number { return x+y; };

si j'essaye d'adapter mon attribut ressemblerais à ça ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
class User{
//sql = SELECT * from utilisateur where id = 1
public data_sql = function(sql,pdo,result): string { return getUser(result) }
 
public getUser(result){
   return result;
}

[keokaz]

j'ai trouvé un autre exemple pour le "=>"

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
class MarchePas {
    private email = "marchepas@mail.fr";
 
    public  getEmail() { 
        console.log(this.email);
    }
}
 
var erreur = new MarchePas();
erreur.getEmail();
 
 
 
class  User{
    private email = "mail@mail.fr";
 
    public getEmail = () => {
        console.log(this.email);
    }
}
 
 
var email = new User();
email.getEmail();

quel est la différence entre les ces classes ??
c'est juste la syntaxe ?

[yahiko]

Utilise plutôt la notation fléchée =>.

Cf. Fonction anonyme fléchée

quel est la différence entre les ces classes ??
c'est juste la syntaxe ?

Concernant la différence de syntaxe :

Dans la classe MarchePas, la méthode getEmail() sera transpilée en prototype (ie. commune à toutes les instances de la classe, non dupliquée)

Dans la classe User, getEmail n'est pas une méthode, mais un attribut du type fonction. Il ne sera pas transpilé en prototype et une instance de la classe User pourra avoir une définition de fonction différente d'une autre instance pour cet attribut.

A cause des particularités de la variable this en JavaScript/TypeScript, on pourra parfois préférer définir une méthode de classe comme attribut (et donc dupliqué pour chaque instance de classe) si on utilise this au sein de la méthode, pour éviter les problématiques lié à l'objet appelant la méthode (via callback par exemple).

Par exemple, si on ajoute ces deux instructions ci-dessous à la fin de ton code, on peut constater la problématique de l'utilisation du mot-clé this dans les classes.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
setTimeout(erreur.getEmail, 1000); // undefined
setTimeout(email.getEmail, 2000); // mail@mail.fr

[keokaz]

merci pour cette éclaircissement , il m'a fallut quelque heures pour comprendre l'histoire des variable prototypes qui se partage (je m'en sert jamais sur javascript ....)

maintenant revenons à mon but de trouver un email dans la base de donnée, j'ai donc essayé ceci:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
    /// <reference path='../typings/restify.d.ts' />
import {PDO} from '../PDO'/// <reference path='../typings/restify.d.ts' />
 
class  User{
 
    private email;
 
    public getEmail() {
            this.email = () => {
            let pdo = new PDO().getPdo();
            let qb =  pdo.query("SELECT * from utilisateur where id = 1", function(err,result){
 
                    if (err) {
                        throw err
                    }else{
                        var result = result.rows[0];
                        console.log(result);
                }
            });
            console.log("requete fini");
        }
 
    }
 
 
}
 
 
var email = new User();
email.getEmail();

je lance le script mais j'ai aucun message même pas une erreur ...

le script en js compilé donne:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 
"use strict";
/// <reference path='../typings/restify.d.ts' />
var PDO_1 = require('../PDO'); /// <reference path='../typings/restify.d.ts' />
var User = (function () {
    function User() {
    }
    User.prototype.getEmail = function () {
        this.email = function () {
            var pdo = new PDO_1.PDO().getPdo();
            var qb = pdo.query("SELECT * from utilisateur where id = 1", function (err, result) {
                if (err) {
                    throw err;
                }
                else {
                    var result = result.rows[0];
                    console.log(result);
                }
            });
            console.log(qb);
        };
    };
    return User;
}());
var email = new User();
email.getEmail();