Maison > interface Web > js tutoriel > Cours gratuit de dactylographie 5

Cours gratuit de dactylographie 5

Linda Hamilton
Libérer: 2025-01-06 07:11:39
original
645 Les gens l'ont consulté

Pour vous aider à atteindre vos objectifs en 2025 en tant que développeur de logiciels, je vous propose un cours complet de Typescript entièrement GRATUIT !

? Qu'allez-vous apprendre ?
? Classe 001 - Types primitifs
? Classe 002 - Objets et tableaux
? Classe 003 - Fonctions
? Classe 004 - Autres types
? Classe 005 - Types d'union, assertion de type et types littéraux
? Classe 006 - Inférence de type
? Classe 007 - Interface et types
? Classe 008 - Génériques
? Classe 009 - Types d'utilitaires
? Classe 010 - Cours (Partie 1)
? Classe 011 - Cours (Partie 2)
? Classe 012 - Conseils supplémentaires
? Classe 013 - Défi pratique

Vous apprendrez de manière pratique tout ce que vous utiliserez le plus lorsque vous travaillerez avec Typescript dans votre vie quotidienne.

Si vous connaissez déjà Javascript, Typescript changera la donne dans votre carrière, apportant plus de sécurité et d'évolutivité à votre code.

Installation

Avant de commencer le cours, nous devons d'abord configurer la configuration de notre environnement de développement, en installant et en configurant certains outils que nous utiliserons.

Installation du nœud

Si Node n'est pas installé sur votre machine, vous pouvez accéder à https://nodejs.org/en/download et l'installer en fonction de votre système d'exploitation.

Installation du code VS

J'utiliserai VS Code comme éditeur, vous pouvez le télécharger en allant sur https://code.visualstudio.com.

Installation dactylographiée

Une fois Node installé, nous pouvons démarrer le projet et configurer Typescript.

Créez un dossier et ouvrez le terminal dans ce dossier nouvellement créé et exécutez la commande suivante en appuyant sur ENTRÉE :

npm init -y && code .
Copier après la connexion
Copier après la connexion

Curso gratuito de Typescript 5

La commande créera un fichier package.json et ouvrira VS Code dans le dossier. Dans VS Code, cliquez sur Afficher > Terminal pour ouvrir le terminal intégré.

Curso gratuito de Typescript 5

Maintenant, dans le terminal VS Code intégré, exécutez la commande suivante :

npm i -D typescript
Copier après la connexion
Copier après la connexion

Curso gratuito de Typescript 5

Cette commande installera Typescript en tant que dépendance de développement dans notre package.json.

Créez un fichier appelé tsconfig.json et ajoutez la configuration suivante au fichier :

{
  "compilerOptions": {
    "rootDir": "./src",
    "outDir": "./dist",
    "target": "ES2020",
    "strict": true,
    "noEmitOnError": true
  }
}
Copier après la connexion
Copier après la connexion

Curso gratuito de Typescript 5

Le fichier tsconfig.json sert à configurer le compilateur Typescript, il y a plusieurs configurations que nous pouvons faire, pour le moment nous ne nous intéressons qu'aux configurations suivantes :

  • rootDir - Définit le chemin d'accès aux fichiers Typescript.
  • outDir - Définit le dossier de sortie pour les fichiers Javascript.
  • target - Définit la version de Javascript que le compilateur doit utiliser pour compiler les fichiers.
  • strict - Active le mode strict.
  • noEmitOnError - N'exécute pas la compilation en cas d'erreur.

Vous pouvez découvrir toutes les options disponibles en visitant https://www.typescriptlang.org/docs/handbook/compiler-options.html

Accédez au fichier package.json et créez un nouveau script de build avec la commande :

npm init -y && code .
Copier après la connexion
Copier après la connexion

Curso gratuito de Typescript 5

Le navigateur, comme Node, ne comprend pas Typescript, nous devons compiler le code Typescript en Javascript pour qu'il puisse comprendre et exécuter. Cette commande compilera notre code Typescript en Javascript afin que nous puissions l'exécuter dans Node.

N'oubliez pas qu'à la fin, tout notre code Typescript deviendra Javascript. Typescript n'est qu'un outil utilisé en développement pour améliorer la sécurité des types et l'évolutivité de notre code.

Pour terminer, créez un dossier appelé src et un fichier index.ts avec le code suivant :

npm i -D typescript
Copier après la connexion
Copier après la connexion

Curso gratuito de Typescript 5

Maintenant, testons si tout fonctionne. Ouvrez le terminal et exécutez :

{
  "compilerOptions": {
    "rootDir": "./src",
    "outDir": "./dist",
    "target": "ES2020",
    "strict": true,
    "noEmitOnError": true
  }
}
Copier après la connexion
Copier après la connexion

Curso gratuito de Typescript 5

Lors de l'exécution, si tout va bien, vous devriez voir Hello World dans le terminal.

Curso gratuito de Typescript 5

Chaque fois que vous voulez voir quelque chose dans la console, vous devrez exécuter cette commande pour compiler le fichier en Javascript, d'accord ?


Types primitifs

Dans TypeScript, il existe six types primitifs qui sont : chaîne, nombre, booléen, symbole, bigint, null et undefined.

npx tsc && node ./dist/index.js
Copier après la connexion

Chaîne

Une chaîne est tout ce qui est placé entre guillemets. Il peut s'agir de guillemets simples (''), de guillemets doubles ("") ou de guillemets inversés ().

nombre

Il n'y a pas de distinction ici : entiers, décimaux, positifs, négatifs, tout est traité comme un nombre.

Booléen

Le vrai ou faux classique.

symbole

Un peu abstrait, mais le symbole est un identifiant unique. Considérez-le comme une empreinte digitale pour des objets.

Grosint

Si un nombre est déjà grand, bigint est presque infini. Utilisez-le pour traiter des nombres que même une calculatrice scientifique ne peut pas résoudre.

Nul

Représente une variable qui n'a aucune valeur.

Indéfini

Représente une valeur non initialisée.


Vous pouvez accéder au code du cours en accédant au lien ci-dessous :
https://github.com/d3vlopes/curso-typescript/tree/aula-001

Cours suivant

Dans le prochain cours, nous découvrirons les objets et les tableaux en Typescript.

? Des questions ou des problèmes ?
Avez-vous rencontré des problèmes avec la configuration de l'installation ? Avez-vous des questions sur le cours ? Postez-le ici dans les commentaires, construisons ensemble du matériel de qualité et accessible à tous.

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!

source:dev.to
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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal