J'ai du code qui inclut un formulaire de réaction qui contient quelque chose comme ça:
let test : string = <HTMLInputElement>document.getElementById(region).value;
J'ai une fonction qui est appelée à partir d'un clic sur un bouton et je veux obtenir la valeur de l'ID "region".
J'ai vu que je peux faire quelque chose comme ça:
<input id="region"></input>
Mais je peux vérifier 8 façons de dimanche ne fonctionne pas. J'obtiens des erreurs de syntaxe indiquant qu'il manque une virgule si j'essaye.
Alors, y a-t-il un moyen de faire cela? Qu'est-ce que je rate? traitez-moi comme un idiot puisque je ne suis que 48 heures à la dactylographie.
3 Réponses :
Typescript est un sur-ensemble de Javascript. Chaque code Javascript valide est un code Typecript valide.
Si ce que vous essayez de faire ne fonctionne pas comme prévu, c'est pour une autre raison.
L'erreur de syntaxe n'apparaît que si j'entre cette ligne spécifique de texte dactylographié dans le code. Si je le retire / le commente, cela fonctionne sans erreur ...
pourriez-vous ajouter un peu plus de contexte alors? car ce n'est clairement pas un problème dactylographié ...
C'est un problème de TypeScript. OP a omis une partie cruciale de son code.
Le manque de frappe n'est pas cohérent avec l'erreur qu'il obtient.
Cependant, le manque de " autour de region dans l'argument est.
Cela ne pose aucun problème non plus. Le problème est que OP utilise des casts de parenthèses angulaires dans un fichier TSX. Il n'avait pas le casting dans son code d'origine mais il a mis à jour sa réponse pour le montrer.
C'était donc un problème lié à React, pas à un Typecript.
Et s'il ne s'agissait pas d'un composant React, son code aurait entraîné une erreur de type erronée et non une virgule manquante. Typescript ne rend pas une instruction Javascript invalide par elle-même.
Je ne vois pas comment vos commentaires visent à aider le PO, simplement à défendre votre propre réponse. Ce n'est pas le but de ce site.
Mon commentaire vise à aider OP à comprendre où se trouve l'erreur. Son problème n'est pas un manque de compréhension de la dactylographie. Il réside dans le tsx interprétant l'opérateur de coercition de type <> valide comme un élément. Ce qui ne se produirait jamais en dehors de l'écosystème React. Vous ne pouvez pas écrire de code Typescript non valide en écrivant du code Javascript.
Je suppose que vous utilisez React en raison de la balise, et donc je suppose que le code suivant est dans un fichier tsx.
let test : string = (document.getElementById(region) as HTMLInputElement).value;
Vous ne pouvez pas utiliser de casse crochets de flèche dans les fichiers TSX car TypeScript supposera que vous essayez d'utiliser un élément React. Vous devez à la place utiliser la forme comme de casts:
let test : string = <HTMLInputElement>document.getElementById(region).value;
vous devez utiliser ref dans react: Puis appelez-le dans votre fonction. Comme ceci
<input type="text" ref={this.setregionInputRef} />
votre élément change:
private regioninput: HTMLInputElement;
constructor(props) {
super(props);
this.regioninput = null;
this.setregionInputRef = element => {
this.stepInput = element;
};
}
Notez que dans React, comme dans Angular et autres, vous n'utilisez généralement pas le DOM pour obtenir des valeurs; vous liez des valeurs à des objets dans l'état (voir reactjs.org/docs/forms.html ).