Maison > interface Web > js tutoriel > Partagez quelques conseils sur TypeScript

Partagez quelques conseils sur TypeScript

零下一度
Libérer: 2018-05-17 14:16:21
original
2613 Les gens l'ont consulté

Compilez TypeScript (ci-après dénommé ts) dans un projet C++

Modifiez les propriétés du fichier ts et sélectionnez "Outil de production personnalisé" comme type d'élément.

Entrez les paramètres d'emplacement et de compilation de tsc sur la ligne de commande. Le mien est "C:Program Files (x86)Microsoft SDKsTypeScript2.2tsc" %(Identity) --outFile %(RelativeDir)/%(FileName) .js-tes5. UNC (Universal Naming Convention) avec des espaces doit être placé entre guillemets doubles. %(Identity) est l'emplacement du fichier compilé.

--outFile est le paramètre de sortie, suivi de l'emplacement de sortie.

  -t(--target) est le type de cible, j'utilise ES5, il peut aussi être "ES3" (par défaut), "ES5", "ES6"/"ES2015" , "ES2016", "ES2017" ou "ESNext"。

  说明写%(Identity)就可以,这个随意。

La sortie est $(FileName).js Cela doit être utilisé pour déterminer la nécessité de la compilation.

ps : C'est la méthode que j'ai recherchée, je pense qu'il y en a une plus standard. Le responsable n'a pas expliqué comment compiler dans un projet C++.

Citer la déclaration de jquery dans ts

jquery n'est pas écrit en ts, donc le fichier ts est introuvable sur git Heureusement, vs fournit un support puissant pour jquery. Si vous créez un nouveau fichier HTML de n'importe quel type de projet et incluez un fichier js de n'importe quelle version de jquery, votre invite intelligente prendra automatiquement en charge $. Ensuite, placez la souris à gauche ou à droite de $ et appuyez sur F12 pour afficher la définition. Elle accédera automatiquement au fichier index.d.ts. Cliquez avec le bouton droit sur l'étiquette et sélectionnez Open Directory pour rechercher le fichier et le copier. dans votre propre répertoire de projet.

Utiliser la syntaxe triple slash pour référencer le fichier ts actuel ///

Le fichier .d.ts est un fichier de déclaration , et il n'y a pas de code logique, juste une structure.

Comment générer un fichier de déclaration pour votre propre fichier ts

Comme précédemment, le compilateur tsc peut générer un fichier de déclaration, seul le paramètre -d/-- la déclaration est requise et les fichiers ts.

Par exemple : tsc -d main.ts

Utiliser la ligne de commande pour compiler les fichiers ts ?

Oui, tant que les ennuis ne vous dérangent pas. L'invite de commande du développeur pour VS 2017 de VS peut utiliser directement la commande tsc. Vous pouvez l'épingler sur l'écran de démarrage pour améliorer l'efficacité du démarrage.

Comment résoudre le problème de ne pas obtenir la déclaration

  declare var swal: (arg: any) => any;
Copier après la connexion

Ajoutez que vous avez une fonction comme swal qui ne fournit pas de ts, afin que vous puissiez l'utiliser gratuitement. Bien entendu, il s’agit d’une mauvaise utilisation des paramètres.

Le membre HTMLElement.remove dans ts n'existe pas. Vous ne pouvez utiliser que le removeChild de son objet parent, ce qui n'est pas très pratique.

 dom:HTMLElement;

  (<any>dom).remove();// 就这样勉强的转为any再调用remove吧。
Copier après la connexion

Il n'est pas nécessaire de créer une classe pour chaque objet

La classe de ts ne prend pas en charge la déclaration interne des classes. Par conséquent, il n’est pas approprié de déclarer le type de membre en dehors de la classe.

  class foo{
    member:{mem1:number, mem2?:string};// 加问号表示可有可无  }
Copier après la connexion

De cette façon, le membre est similaire à une classe interne.

Abonnement à l'événement et ce paramètre

  class bar{
    sub(){
      dom.onclick=function(){this};
    }
  }
Copier après la connexion

De cette façon, ceci dans la fonction function est l'objet dom.

 dom.onclick=()=>{this};

 Cela représente une instance de barre de classe.

Alors je veux avoir l'objet dom et l'instance bar ?

Actuellement, je ne peux utiliser que des fermetures :

  class bar{
    click(node:HTMLElement, ev:MouseEvent){
      this...
    }
    dom.onclick = (ev:MouseEvent)=>this.click(dom,ev);
  }
Copier après la connexion

Le dom est passé avec des fermetures. C'est toujours ce à quoi vous vous attendiez. Après tout, le clic est un. membre de la fonction bar.

Ne pas utiliser en lecture seule pour les propriétés en lecture seule

Si vous souhaitez le modifier, la lecture seule n'est pas pratique pour un accès interne au sein de la classe

Vous devez donc utiliser Object.defineProperty,ts. Il existe des attributs d'opération set/get plus pratiques.

  class baz{
    _attr:[];
    get attr(){
      return _attr;
    }
  }
Copier après la connexion

De cette façon, attr ne peut être que lu. Pour utiliser la fonctionnalité d'attribut, vous devez définir l'option cible (-t/--target) du compilateur ts sur es5 ou supérieur.

Cet article continuera à être mis à jour. Je le mettrai à jour tant qu'il sera lié aux compétences ts. Si vous faites également attention à la technologie dactylographiée, veuillez me suivre/favoriser cet article.

btw : cnblogs ne prend pas en charge la coloration du code ts et utilise la coloration du code JS.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal