Discussion :

[Orang-]

Bonjour,

Je cherche à obtenir en .ts l'équivalent JS du code suivant :

Code javascript :

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

1
2
3
4
5
6
7
var $calculette = document.getElementById('calculette');
var $td = document.getElementsByTagName('td');
$calculette.onfocus = function () {
	$td[0].innerHTML = $calculette.value;
	$td[1].innerHTML = Math.pow($calculette.value,2);
	$td[2].innerHTML =  Math.pow($calculette.value,3);
};

Il fonctionne sans ajout d'une fonction de conversion.
En revanche, en .ts si je rédige ainsi :

Code typescript :

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

1
2
3
4
5
6
7
var $calculette = <HTMLInputElement> document.getElementById('calculette');
var $td = document.getElementsByTagName('td');
$calculette.onblur = function () {
	var resultat = parseFloat($calculette.value);
	$td[0].innerHTML = $calculette.value;
	$td[1].innerHTML = Math.pow(resultat,2);
};

Or à ce moment, j'obtiens ceci :

Code :

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

script.ts(6,30): error TS2345: Argument of type 'string' is not assignable to parameter of type 'number'.

Il doit exister une façon fonctionnelle de procéder, mais j'avoue ne pas trouver.

[yahiko]

TypeScript est un langage avec un typage statique. Une fois qu'un type est attribué à une variable, celle-ci ne peut en changer.

Dans ton code, $td[1].innerHTML est du type string.
Or tu essaies de lui affecter une expression Math.pow(resultat,2) qui elle est du type number.

Il convient donc de convertir explicitement cette expression avec la méthode toString().

Ce qui donne :

Code typescript :

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

$td[1].innerHTML = Math.pow(resultat,2).toString();

[Orang-]

Excellent, merci beaucoup.

Code typescript :

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

1
2
3
4
5
6
var $calculette = <HTMLInputElement> document.getElementById('calculette');
var $td = document.getElementsByTagName('td');
$calculette.onblur = function () {
	$td[1].innerHTML = Math.pow(resultat,2).toString();
	console.log(typeof($td[1].innerHTML)); // string
	console.log(typeof(+$td[1].innerHTML));}; // number

[Orang-]

Bonsoir,

Je suis désolé, je butte de nouveau :
Je ne parviens pas à ajouter une propriété à un objet existant sans obtenir une erreur TS2339 à la compilation (la console du navigateur n'en affiche aucune par contre) :

Code typescript :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var person = {
	name: 'Colleen',
	age: 25,
	getPets: function () {
		return ['Spot', 'Nemo', 'Pascal'];
	},
	listeFruits : ['pomme','poire','banane',{exotique:'mangue'}]
};
console.log(person.name);
console.log(person.getPets()[1]);
person.passion = 'natation';
console.log(person.passion);
console.log(person.listeFruits[0]);
console.log(person.listeFruits[3].exotique);

Code :

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

1
2
3
test.ts(11,8): error TS2339: Property 'passion' does not exist on type '{ name: string; age: number; getPets: () => string[]; listeFruits: (string | { passion: string; }...'.
test.ts(12,20): error TS2339: Property 'passion' does not exist on type '{ name: string; age: number; getPets: () => string[]; listeFruits: (string | { passion: string; }...'.
test.ts(14,35): error TS2339: Property 'exotique' does not exist on type 'string | { exotique: string; }'.

Sortie console :

Code :

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

1
2
3
4
5
Colleen
Nemo
natation
pomme
mangue

L'exemple est en partie tiré d'ici : http://www.johnpapa.net/typescriptpost2/

Merci

[yahiko]

Comme le message d'erreur à la compilation l'indique, la propriété passion n'existe pas dans la structure qui a servi à l'initialisation de person.
L'adjonction à postériori d'une propriété à un objet n'est pas autorisé en TypeScript, bien qu'en JavaScript cela le soit (d'où l'absence d'erreur à l'exécution puisque le code est in fine converti en JavaScript).

Il faut que tu gardes bien à l'esprit que TypeScript est un langage à typage statique propriété indispensable pour obtenir la sûreté du typage.

Pour éliminer les messages d'erreurs correspondant à la compilation, il est nécessaire d'inclure à l'avance les propriétés que tu souhaites utiliser.

Concernant la propriété exotique que tu tentes d'utiliser à partir de listeFruits, il se trouve que son existence n'est pas garantie, d'où une nouvelle fois un message d'erreur de la part du compilateur TypeScript.

Pour éliminer le message d'erreur correspondant à la compilation, il est possible de créer une interface que tu utiliseras pour forcer le typage de l'élément du tableau listeFruits où tu es sûr qu'il contient une propriété exotique.

Code typescript :

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
interface FruitExotique {
	exotique: string;
}
 
var person = {
	name: 'Colleen',
	age: 25,
	getPets: function () {
		return ['Spot', 'Nemo', 'Pascal'];
	},
	listeFruits : ['pomme','poire','banane',{exotique:'mangue'}],
	passion: null
};
console.log(person.name);
console.log(person.getPets()[1]);
person.passion = 'natation';
console.log(person.passion);
console.log(person.listeFruits[0]);
console.log((<FruitExotique>person.listeFruits[3]).exotique);

[Orang-]

Merci !

Code typescript :

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 Person {
	name;
	fruits;
	age;
	passion;
	constructor(name:string,fruits:Object, age:any,passion:string[]=[]) {
		this.name = name;
		this.fruits = fruits;
		this.age = age;
		this.passion=passion;
	}
}
var marie = new Person('Marie',['pomme','poire','banane',{exotique:'mangue'}],'1an');
 
console.log(marie.fruits[0]);
console.log(marie.fruits[3].exotique);
console.log(marie.age);
marie.passion = ['velo','alpinisme'];
console.log(marie.passion[1]);
console.log('***');
var tarik = new Person('Tarik','cerise',99,['Tshirt','Stylo','Peigne']);
console.log(tarik.name);
console.log(tarik.fruits);
console.log(tarik.age);
console.log(tarik.passion[2]);

Code :

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

1
2
3
4
5
6
7
8
9
"pomme"
"mangue"
"1an"
"alpinisme"
"***"
"Tarik"
"cerise"
99
"Peigne"

La façon de déclarer un ou plusieurs paramètres de façon optionnelle à l'instar de ce qui se pratique en php est un vrai plus