Conseils pour utiliser ts dans vue

Remarque : cet article ne vise pas à remplacer toutes les vues par ts, mais à intégrer les fichiers ts dans le projet d'origine. Il n'en est actuellement qu'au stade de la pratique et de la transition vers le processus de conversion ts.

A quoi sert ts ?

Vérification de type, compilation directe en js natif, introduction d'un nouveau sucre syntaxique

Pourquoi utiliser ts ?

TypeScript doit être conçu pour résoudre les « points douloureux » de JavaScript : types faibles et pas d'espace de noms, ce qui rend la modularisation difficile et ne convient pas à développement Grands programmes. En outre, il fournit également du sucre de syntaxe pour aider tout le monde à pratiquer la programmation orientée objet plus facilement.

Typescript peut non seulement restreindre nos habitudes de codage, mais aussi jouer le rôle de commentaires Lorsque nous voyons une fonction, nous pouvons immédiatement connaître l'utilisation de cette fonction. Il est clair en un coup d'œil quelle valeur est transmise et quel type est la valeur de retour, ce qui améliore considérablement la maintenabilité des grands projets. Cela n’incitera pas les développeurs à se tirer une balle dans le pied.

Angular : Pourquoi avons-nous choisi TypeScript ?

• Excellents outils en TypeScript

• TypeScript est un sur-ensemble de JavaScript

• TypeScript rend les abstractions visibles

• TypeScript rend le code plus facile à lire et à comprendre

Oui, je sais cela ne semble pas intuitif. Permettez-moi d'illustrer ce que je veux dire avec un exemple. Jetons un coup d'œil à cette fonction jQuery.ajax(). Quelles informations pouvons-nous tirer de sa signature ?

La seule chose dont nous sommes sûrs est que cette fonction a deux paramètres. Nous pouvons deviner ces types. Peut-être que le premier est une chaîne et le second est un objet de configuration. Mais ce ne sont que des spéculations et nous pouvons nous tromper. Nous ne savons pas quelles options entrent dans l'objet settings (leurs noms et types), ni ce que renvoie la fonction.

Il est impossible d'appeler cette fonction sans vérifier le code source ou la documentation. Examiner le code source n’est pas une option – le but d’avoir des fonctions et des classes est de les utiliser sans savoir comment les implémenter. En d’autres termes, nous devrions nous fier à leurs interfaces et non à leurs implémentations. Nous pourrions vérifier la documentation, mais ce n'est pas la meilleure expérience de développement : cela prend plus de temps et la documentation est souvent obsolète.

Donc, bien qu'il soit facile de lire jQuery.ajax(url,settings), pour bien comprendre comment appeler cette fonction, il faut lire son implémentation ou sa documentation.

Voici une version type :

Elle nous donne plus d'informations.

• Le premier paramètre de cette fonction est une chaîne.

• Le réglage des paramètres est facultatif. Nous pouvons voir toutes les options qui peuvent être transmises à la fonction, non seulement leurs noms, mais aussi leurs types. La fonction

• renvoie un objet JQueryXHR, et nous pouvons voir ses propriétés et fonctions.

Les signatures typées sont nettement plus longues que celles non typées, mais :string, :JQueryAjaxSettings et JQueryXHR ne sont pas encombrées. Ce sont des documents importants qui améliorent la compréhensibilité de votre code. Nous pouvons comprendre le code plus en profondeur sans avoir à nous plonger dans l'implémentation ou à lire la documentation. Mon expérience personnelle est que je peux lire le code tapé plus rapidement car les types fournissent plus de contexte pour comprendre le code.

Extrait d'Angular : Pourquoi avons-nous choisi TypeScript ?

Est-ce qu'il a envie d'apprendre ?

L'un des points forts de la conception de TypeScript est qu'il n'abandonne pas la syntaxe de JavaScript pour en créer une nouvelle, mais en fait plutôt un sur-ensemble de JavaScript (ce crédit doit être attribué à Anders), de sorte que toute déclaration légale JavaScript est légale sous TypeScript, ce qui signifie que le coût d'apprentissage est très faible. Si vous avez une compréhension plus approfondie de JavaScript, vous pouvez réellement démarrer rapidement avec TypeScript, car sa conception est basée sur les habitudes d'utilisation de JavaScript et. conventions.

Quelques exemples simples, faciles à comprendre d'un seul coup d'œil :

Types de base

  let isDone: boolean = false;  // 布尔值
  let decLiteral: number = 6;    // 数字
  let name: string = "bob";  // 字符串
  let list: number[] = [1, 2, 3]; // 数组
  ...
  ...

Interfaces

function printLabel(labelledObj: { label: string }) {    console.log(labelledObj.label);
  }  let myObj = { size: 10, label: "Size 10 Object" };
  printLabel(myObj);

Le vérificateur de type examinera l'appel à printLabel. printLabel a un paramètre et nécessite que ce paramètre d'objet ait un attribut nommé label de type chaîne. Il convient de noter que le paramètre d'objet que nous transmettons contiendra en réalité de nombreuses propriétés, mais le compilateur vérifiera uniquement si ces propriétés requises existent et si leurs types correspondent.

Bien sûr, il existe quelques utilisations avancées, que je ne présenterai pas trop ici. En savoir plus

Comment appliquer ts dans les projets vue ?

1. Installez d'abord ts

npm install --save-dev typescript npm install --save-dev ts-loader

2. le fichier tsconfig.json dans le répertoire racine

<code>{
    "compilerOptions": {
      "experimentalDecorators": true,
      "emitDecoratorMetadata": true,
      "lib": ["dom","es2016"],
      "target": "es5"
    },
    "include": ["./src/**/*"]  <br>}</code>

3. Ajoutez ts-loader dans la configuration

{
    test: /\.tsx?$/,
    loader: 'ts-loader',    exclude: /node_modules/,      options: {
      appendTsSuffixTo: [/\.vue$/],
    }
  }

4. Enfin, ajoutez le suffixe .ts et ce sera OK. , dans webpack. Sous le fichier base.conf.js

vous pouvez maintenant utiliser le fichier ts dans notre projet d'origine.

Comment pratiquer ?

1. Comment référencer des fichiers ts en js ?

Étant donné que les fichiers js n'ont pas de détection de type, lorsque nous importons des fichiers ts, les fichiers ts seront convertis en fichiers js, donc le mécanisme de détection de type de méthode pour référencer les fichiers ts dans les fichiers js ne prendra pas effet. En d’autres termes, il existe un mécanisme de détection de type uniquement dans le fichier ts.

Alors, comment utiliser le mécanisme de détection de type dans les fichiers js ? L'éditeur a encapsulé un ensemble de méthodes de décorateur typeCheck pour référence uniquement ! L'utilisation est la suivante :

@typeCheck('object','number')  deleteItem(item,index) {}

Détecter les paramètres de la méthode deleteItem : l'élément est de type objet, l'index est de type numérique, si les types ne correspondent pas, une exception sera levée

Présentation d'une partie du code :

<code>const _check = function (checked,checker) {
        check:    <br>        for(let i = 0; i < checked.length; i++) {      <br>        if(/(any)/ig.test(checker[i]))        <br>            continue check;      <br>        if(_isPlainObject(checked[i]) && /(object)/ig.test(checker[i]))<br>            continue check;      <br>        if(_isRegExp(checked[i]) && /(regexp)/ig.test(checker[i]))<br>            continue check;      <br>        if(Array.isArray(checked[i]) && /(array)/ig.test(checker[i]))<br>            continue check;      <br>        let type = typeof checked[i];      <br>        let checkReg = new RegExp(type,'ig')      <br>        if(!checkReg.test(checker[i])) {        <br>            console.error(checked[i] + 'is not a ' + checker[i]);        <br>            return false;
      }
    }    return true;
  }  /**
   * @description 检测类型
   *   1.用于校检<a href="http://www.php.cn/wiki/147.html" target="_blank">函数参数</a>的类型，如果类型错误，会打印错误并不再执行该函数；
   *   2.类型检测忽略大小写，如string和String都可以识别为字符串类型；
   *   3.增加any类型，表示任何类型均可检测通过；
   *   4.可检测多个类型，如 "number array",两者均可检测通过。正则检测忽略连接符 ；
   */
  export function typeCheck() {    <br>      const checker =  Array.prototype.slice.apply(arguments);    <br>          return function (target, funcName, descriptor) {      <br>              let oriFunc = descriptor.value;
              descriptor.value =  function () {        <br>              let checked =  Array.prototype.slice.apply(arguments);        <br>                  let result = undefined;        <br>                  if(_check(checked,checker) ){
                      result = oriFunc.call(this,...arguments);
        }             return result;
      }
    }
  };</code>

La détection de type ts combinée à typeCheck répond fondamentalement à nos besoins.

2. Comment référencer des fichiers js dans ts ?

Comme il n'y a pas de détection de type dans le fichier js, le fichier ts sera converti en n'importe quel type lors de son importation dans le fichier js. Bien sûr, nous pouvons également déclarer le type dans le fichier .d.ts.

Par exemple, le fichier global.d.ts

Bien sûr parfois nous devons utiliser certaines bibliothèques, mais il n'y a pas de fichier de déclaration, alors on ajoute il dans le fichier ts. Il ne sera pas défini une fois référencé. Que devons-nous faire à ce moment-là ?

Par exemple, lorsque je souhaite utiliser 'query-string' dans le fichier util.ts, nous le citerons comme ceci :

import querystring from 'query-string';

Cependant, lorsque vous imprimez la chaîne de requête, elle est indéfini. Comment le résoudre ? La méthode de l'éditeur est à titre de référence uniquement

Créer un nouveau fichier module.js

import querystring from 'query-string';  export const qs = querystring;

fichier utile.ts

import { qs } from './module.js';

Résolu. L'impression de qs n'est plus indéfinie et vous pouvez utiliser la bibliothèque qs normalement.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Connaissance de base du HTML dans le front-end

Position du modèle de boîte flottante CSS

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!