[TypeScript] Introduction et étapes détaillées pour la construction de l'environnement

La rencontre de TypeScript

Bien que nous sachions déjà ce que fait TypeScript et quel type de problèmes il résout, nous devons encore bien comprendre ce qu'est TypeScript ?

Apprenez à connaître TypeScript

Jetons un coup d'œil à la définition de TypeScript sur GitHub et le site officiel :

GitHub说法 : TypeScript est un sur-ensemble de JavaScript qui se compile pour nettoyer la sortie JavaScript.

TypeScript官网： TypeScript est un sur-ensemble typé de JavaScript qui se compile en JavaScript brut.

Ces deux endroits signifient la même chose, traduite : TypeScript est un sur-ensemble typé de JavaScript qui se compile en code JavaScript simple, propre et complet .

Comment comprendre les mots ci-dessus?

Nous pouvons considérer TypeScript comme une version améliorée de JavaScript .

TypeScript prend en charge toutes les fonctionnalités de JavaScript et suit les normes ECMAScript. Ainsi, ES6, ES7, ES8 et d'autres nouvelles normes de syntaxe sont prises en charge.

Et au niveau du langage, il ajoute non seulement des contraintes de type, mais inclut également certaines extensions de syntaxe , telles que les types d'énumération (Enum), les types de tuple (Tuple), etc. ;

Lors de la mise en œuvre de nouvelles fonctionnalités, TypeScript suit toujours le rythme ou même est en tête de la norme ES ;

Et TypeScript sera éventuellement compilé en code JavaScript, vous n'avez donc pas à vous soucier de sa compatibilité, et vous n'avez pas besoin de recourir à des outils comme Babel lors de la compilation ;

Par conséquent, nous pouvons comprendre TypeScript comme un JavaScript plus puissant, qui non seulement rend JavaScript plus sûr, mais lui apporte également de nombreuses fonctionnalités utiles et utiles ;

Fonctionnalités TypeScript

La description officielle des caractéristiques de TypeScript, je pense qu'elle est très bonne (bien que certains officiels, comprenez-la), partageons-la ensemble

Commence par JavaScript, Appartient à JavaScript

TypeScript a commencé avec une syntaxe et une sémantique familières à des millions de développeurs JavaScript aujourd'hui. Utilisez le code JavaScript existant, y compris les bibliothèques JavaScript populaires, et appelez le code TypeScript à partir du code JavaScript ;

TypeScript peut compiler du code JavaScript pur et concis et peut s'exécuter sur n'importe quel navigateur, environnement Node.js et n'importe quel moteur JavaScript prenant en charge ECMAScript 3 (ou version ultérieure) ;

TypeScript est un outil puissant pour la construction de grands projets

Les types permettent aux développeurs JavaScript d'utiliser des outils de développement efficaces et des opérations courantes telles que la vérification statique et la refactorisation du code lors du développement d'applications JavaScript.

Les types sont facultatifs et l'inférence de type permet à certaines annotations de type de faire une grande différence dans la validation statique de votre code. Les types vous permettent de définir des interfaces entre les composants logiciels et d'avoir un aperçu du comportement des bibliothèques JavaScript existantes ;

A avancé JavaScript

TypeScript fournit les fonctionnalités JavaScript les plus récentes et évolutives, y compris celles d'ECMAScript 2015 et des propositions futures, telles que les fonctions asynchrones et les décorateurs, pour aider à créer des composants robustes ;

Ces fonctionnalités sont disponibles lors du développement d'applications à haute confiance, mais seront compilées dans un JavaScript ECMAScript3 (ou plus récent) concis ;

C'est à cause de ces fonctionnalités que TypeScript est actuellement utilisé dans de nombreux endroits :

Le code source angulaire a été réécrit très tôt avec TypeScript, et développer Angular nécessite également de maîtriser TypeScript.

Le code source de Vue3 est également réécrit à l'aide de TypeScript.Lors de la lecture du code source, nous avons vu beaucoup de syntaxe TypeScript ;

L'inclusion de l'éditeur le plus populaire, VSCode, est également effectuée à l'aide de TypeScript ;

Y compris la bibliothèque d'interface utilisateur ant-design qui a été utilisée dans React, elle est également fortement écrite en TypeScript ;

À l'heure actuelle, le mode de développement de Vue3+TypeScript et React+TypeScript est très populaire dans l'entreprise ;

Y compris le développement d'applet, il prend également en charge TypeScript ;

Grande tendance de développement frontal

À l'heure actuelle, nous avons de plus en plus de choses à apprendre sur le front-end, en apprenant divers frameworks, et maintenant nous devons apprendre TS

Lorsque l'auteur de node développait un nouveau framework deno en 2018, quelqu'un a déjà soumis un tel problème sur GitHub

Le grand front-end est un groupe de développeurs qui peuvent ou doivent jeter le plus :

Développeurs côté client : d'Android à iOS, ou d'iOS à Android, en passant par RN, de plus en plus de développeurs côté client sont désormais exposés aux connaissances liées au front-end (Vue, React, Angular, applet) ;

Développeurs frontaux : de jQuery à AngularJS, en passant par trois frameworks parallèles : Vue, React, Angular et de petits programmes, et même certains développements frontaux doivent désormais également contacter le développement côté client (tel que RN, Flutter) ;

À l'heure actuelle, nous sommes confrontés non seulement à l'apprentissage de nouvelles fonctionnalités telles que ES6, 7 et 8, mais également à l'apprentissage de TypeScript ;

Avec l'émergence de nouveaux frameworks, nous devons apprendre les fonctionnalités de nouveaux frameworks, tels que vue3.x, react18, etc.;

Mais l'apparition de chaque technologie sera surprenante, car elle doit résoudre un point douloureux de la technologie précédente, et TypeScript résout vraiment de nombreux défauts de conception en JavaScript, en particulier concernant la détection de type .

Et du point de vue à long terme des développeurs, l'apprentissage de TypeScript nous aide, nous les programmeurs frontaux, à cultiver la pensée typographique, ce qui est particulièrement important pour mener à bien des projets à grande échelle .

Environnement TypeScript

---

Environnement de compilation TypeScript

Comme nous l'avons mentionné précédemment, TypeScript sera éventuellement compilé en JavaScript pour fonctionner, nous devons donc construire l'environnement correspondant :

Nous devons installer TypeScript sur l'ordinateur, afin qu'il puisse être compilé en JavaScript via le compilateur de TypeScript ;

Le code TypeScript ne peut pas s'exécuter directement sur le navigateur, il doit être compilé en code JavaScript pour s'exécuter sur le navigateur, alors qui doit terminer ce processus de compilation ?

Deux outils peuvent nous aider à convertir :

1. tsc : compilateur TypeScript
2. babel : il y a un plugin prédéfini dans babel

Actuellement, nous utilisons l'outil officiel tsc

Tout d'abord, nous devons installer globalement via npm :

Commande d'installation :npm install typescript -g

Afficher la version :tsc --version

[Démo] L'utilisation de tsc, par exemple, nous écrivons du code TS

Tapez la commande dans le terminal :tsc 文件名

Une fois la saisie terminée, un code js portant le même nom sera généré

Exécutez ensuite le code js dans l'environnement du navigateur ou du nœud.

Environnement d'exécution TypeScript

Ce serait trop lourd si nous devions passer par ces deux étapes à chaque fois afin de voir l'effet d'exécution du code TypeScript :

Étape 1 : Compilez TypeScript en code JavaScript via tsc ;

Étape 2 : Exécutez le code JavaScript dans le navigateur ou l'environnement Node ;

Est-il possible de simplifier ces étapes ?

Par exemple, après avoir écrit TypeScript, peut-il s'exécuter directement sur le navigateur ?

Par exemple, après avoir écrit TypeScript, exécutez-le directement via la commande de node?

Les deux façons que j'ai mentionnées ci-dessus peuvent être faites avec deux solutions :

Méthode 1 : via Webpack, configurez l'environnement de compilation TypeScript local et démarrez un service local, qui peut s'exécuter directement sur le navigateur ;

Méthode 2 : Fournir un environnement d'exécution pour que TypeScript s'exécute via la bibliothèque ts-node, ts-node fera deux choses : vous aider à compiler, vous aider à exécuter dans node ;

---

Méthode 1 : configuration du webpack

Dans le projet, Vue-cli nous aidera automatiquement à configurer l'environnement TS. Dans certains cas particuliers, nous devons également le configurer nous-mêmes

Remarque : vous aurez peut-être besoin d'une compréhension simple de npm et de webpack ici, ce ne sera pas très compliqué (si vous ne comprenez pas du tout, suivez simplement les étapes que j'ai données, puis ajoutez vous-même quelques connaissances)

Étape 1 : Initialisez le fichier package.json via npm :npm init

Une fois la saisie terminée, appuyez sur Entrée pour tous

Étape 2 : Installez webpack et webpack-cli localement :npm install webpack webpack-cli -D

ajouter un script dans package.json

• Créer un fichier webpack.config.js

const path = require('path')

module.exports = {
    
    
  mode: "development",
  entry: "./src/main.ts",
  output: {
    
    
    path: path.resolve(__dirname, "./dist"),
    filename: "bundle.js"
  }
}

Étape 3 : Installez ts-loader et tapuscrit :npm install ts-loader typescript -D

Raison de l'installation locale :

• Parce que nous compilons ensuite notre code TypeScript via webpack, et non via tsc. (tsc utilise les dépendances TypeScript installées globalement)
• Ensuite, webpack recherchera les dépendances TypeScript localement, nous devons donc nous fier localement à TypeScript ;

• Configurez ensuite les règles de correspondance dans le fichier webpack.config.js

const path = require('path')

module.exports = {
    
    
  mode: "development",
  entry: "./src/main.ts",
  output: {
    
    
    path: path.resolve(__dirname, "./dist"),
    filename: "bundle.js"
  },
  resolve: {
    
    
    extensions: [".ts"]
  },
  module: {
    
    
    rules: [
      {
    
    
        test: /\.ts$/,
        loader: 'ts-loader'
      }
    ]
  }
}

Etape 4 : Initialisez le fichier tsconfig.json :tsc --init

Un fichier tsconfig.json sera automatiquement généré, et le fichier ts peut être compilé dans un fichier js à ce moment

Etape 5 : Construire un serveur local :npm install webpack-dev-server -D

Après l'installation, configurez un script dans package.json

• Nous avons également besoin d'un index.html comme modèle

• Installez npm install html-webpack-plugin -Dle modèle de configuration dans webpack.config.js, et la configuration finale dans webpack.config.js est la suivante

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    
    
  mode: "development",
  entry: "./src/main.ts",
  output: {
    
    
    path: path.resolve(__dirname, "./dist"),
    filename: "bundle.js"
  },
  devServer: {
    
    
  },
  resolve: {
    
    
    extensions: [".ts", ".js", ".cjs", ".json"]
  },
  module: {
    
    
    rules: [
      {
    
    
        test: /\.ts$/,
        loader: 'ts-loader'
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
    
    
      template: "./index.html"
    })
  ]
}

À ce stade, le fichier main.ts que nous avons écrit directement s'exécutera directement sur le navigateur

---

Méthode 2 : Installer ts-node

Commande d'installation :npm install ts - node -g

Commande d'installation :npm install ts - node -g

De plus, ts-node doit s'appuyer sur deux packages, tslib et @types/node, qui doivent également être installés :npm install tslib @types/node -g

Maintenant, nous pouvons exécuter le code TypeScript directement via ts-node :ts - node 文件名

Dans l'apprentissage de la grammaire de TS, j'utiliserai la deuxième méthode, et j'utiliserai la première méthode dans les projets de suivi.