Gestion des types en TS

Version imprimable

Bonjour,

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

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:

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:

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.

12/03/2015, 14h34
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:

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

Excellent, merci beaucoup.

Code:

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

Gestion et manipulation des objets

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:

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:

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:

1
2
3
4
5
Colleen
Nemo
natation
pomme
mangue

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

Merci :)

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:

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

Merci !

Code:

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:

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