Apprenez TypeScript - Le Guide Ultime Du Débutant

Machine Translated by Google
30/07/2023 00:13 Apprenez TypeScript – Le guide ultime du débutant
Forum Faire un don
Soutenez notre charité et notre mission. Faites un don à freeCodeCamp.org.
27 JANVIER 2022 / #TYPESCRIPT
Apprendre TypeScript – Le
Guide du débutant ultime
Danny Adams
TypeScript est devenu de plus en plus populaire au
cours des dernières années, et de nombreux emplois
exigent maintenant que les développeurs connaissent
TypeScript.
Mais ne vous inquiétez pas si vous connaissez déjà JavaScript, vous pourrez
rapidement prendre TypeScript.
Même si vous n’avez pas l’intention d’utiliser TypeScript, l’apprendre
vous donnera une meilleure compréhension de JavaScript et fera de
vous un meilleur développeur.
Dans cet article, vous apprendrez :
Qu’estce que TypeScript et pourquoi devraisje l’apprendre
?
Comment configurer un projet avec TypeScript
Tous les principaux concepts TypeScript (types, interfaces, génériques,
typographie, etc...)
https://www.freecodecamp.org/news/learntypescriptbeginnersguide/ 1/51
Comment utiliser TypeScript avec React Forum Faire un don
J’ai également fait un copieur TypeScript PDF et affiche qui résume
cet article en une page. Cela facilite la recherche et la révision
rapide des concepts / syntaxe.
TypeScript aidemémoire PDF
Qu’estce que TypeScript ?
TypeScript est un surensemble de JavaScript, ce qui signifie qu’il
fait tout ce que JavaScript fait, mais avec quelques fonctionnalités
supplémentaires.
La principale raison d’utiliser TypeScript est d’ajouter un typage
statique à JavaScript. Le typage statique signifie que le type d’une
variable ne peut être modifié à aucun moment d’un programme.
Cela peut empêcher BEAUCOUP de bugs!
Forum Faire un don
D’autre part, JavaScript est un langage typé dynamiquement, ce qui
Soutenez notre
les cvharité
signifie que et n
ariables potre
mission.
euvent Faites
changer un don
de type. à freeCodeCamp.org.
Voici un exemple
:
// JavaScript let
foo = "bonjour" ; foo =
55 ; // foo a changé de type d'une chaîne à un nombre pas de problème
// TypeScript let
foo = "bonjour" ; foo =
55 ; // ERREUR foo ne peut pas changer de chaîne en nombre
TypeScript ne peut pas être compris par les navigateurs, il doit donc être
compilé en JavaScript par le compilateur TypeScript (TSC)
dont nous discuterons bientôt.
TypeScript en vautil la peine ?
Pourquoi utiliser TypeScript
La recherche a montré que TypeScript peut repérer 15% des
bogues courants.
Lisibilité – il est plus facile de voir ce que le code est censé
faire. Et lorsque vous travaillez en équipe, il est plus facile de voir
ce que les autres développeurs avaient l’intention de
faire.
C’est populaire – connaître TypeScript vous permettra de
postuler à plus de bons emplois.
L’apprentissage de TypeScript vous donnera une meilleure
compréhension et une nouvelle perspective sur JavaScript.
Voici un court article que j’ai écrit démontrant comment
TypeScript
Forum
Faire un don peut
prévenir les bogues irritants.
Inconvénients de TypeScript
TypeScript prend plus de temps à écrire que JavaScript, car
vous devez spécifier des types, donc pour les petits projets
solo, il peut ne pas être utile de l’utiliser.
TypeScript doit être compilé, ce qui peut prendre du temps,
en particulier dans les grands projets.
Mais le temps supplémentaire que vous devez consacrer à l’écriture
de code plus précis et à la compilation sera plus qu’économisé par le
nombre de bogues en moins que vous aurez dans votre code.
Pour de nombreux projets, en particulier les projets de moyenne à
grande envergure, TypeScript vous fera gagner beaucoup de temps
et de maux de tête.
Et si vous connaissez déjà JavaScript, TypeScript ne sera pas trop
difficile à apprendre. C’est un excellent outil à avoir dans votre
arsenal.
Comment configurer un projet
Manuscrit
Installer Node et le compilateur
Manuscrit
Tout d’abord, assurezvous que Node est installé globalement sur
votre machine.
Installez ensuite le compilateur TypeScript globalement sur votre
ordinateur en exécutant la commande suivante :
Forum Faire un don
npm i g typescript
Pour vérifier si l’installation est réussie (il renverra le numéro de version en
cas de succès) :
tsc v
Comment compiler TypeScript
Ouvrez votre éditeur de texte et créez un fichier TypeScript (par exemple,
index.ts).
Écrivez du JavaScript ou du TypeScript :
laissez sport = 'football';
soit id = 5 ;
Nous pouvons maintenant compiler cela en JavaScript avec ce qui suit
commande:
indice tsc
TSC compilera le code en JavaScript et le sortira dans un fichier appelé
index.js :
Forum Faire un don
c'était du sport = 'football';
var id = 5n ;otre charité et notre mission. Faites un don à freeCodeCamp.org.
Soutenez
Si vous souhaitez spécifier le nom du fichier de sortie :
tsc index.ts outfile nomfichier.js
Si vous voulez que TSC compile votre code automatiquement, chaque fois que vous
apportez une modification, ajoutez le drapeau "watch":
index tsc.ts w
Une chose intéressante à propos de TypeScript est qu'il signale les erreurs
dans votre éditeur de texte pendant que vous codez, mais il compilera toujours
votre code, qu'il y ait des erreurs ou non.
Par exemple, ce qui suit fait que TypeScript signale immédiatement
une erreur:
var sport = 'football'; var id = 5 ;
identifiant = '5'; // Erreur : le type 'chaîne' n'est pas attribuable au type
'nombre'.
Mais si nous essayons de compiler ce code , le code compilera toujours,
malgré l'erreur. indice tsc
Il s'agit d'une propriété importante de TypeScript : elle suppose que le
développeur en sait plus. Même s'il y a une erreur TypeScript, cela ne vous
empêche pas de compiler le code. Il vous indique qu'il y a une erreur, mais c'est à
vous de décider si vous faites quelque chose à ce sujet.
Forum Faire un don
Comment configurer le fichier de configuration ts
Le fichier de configuration ts doit se trouver dans le répertoire racine de votre projet.
Dans ce fichier, nous pouvons spécifier les fichiers racine, les options du compilateur
et la rigueur avec laquelle nous voulons que TypeScript vérifie notre projet.
Tout d'abord, créez le fichier de configuration ts :
tsc init
Vous devriez maintenant avoir un fichier à la racine du projet. tsconfig.json
Voici quelques options qu'il est bon de connaître (si vous utilisez un framework
frontal avec TypeScript, la plupart si ce truc est pris en charge pour vous):
{
"optionscompilateur": {
...
/* Modules */
"target": "es2016", // Passez à "ES2015" pour compiler en E "rootDir": "./src", // Où compiler
à partir de "outDir": "./public", // Où compiler à (généralement le
/* Prise en charge de JavaScript */
"allowJs": true, // Autoriser la compilation des fichiers JavaScript "checkJs": true, // Type
check JavaScript files and repo
/* Émettre */
"sourceMap": true, // Créer des fichiers de carte source pour émis
"removeComments": true, // N'émet pas de commentaires
},
"include": ["src"] // Assurezvous que seuls les fichiers dans src sont compilés
}
Pour tout compiler et surveiller les changements :
tscw Forum Faire un don
Remarque : lorsque des fichiers d'entrée sont spécifiés sur la ligne de
commande (par exemple, ), les fichiers sont ignorés. index tsc tsconfig.json
Types dans TypeScript
Types primitifs
En JavaScript, une valeur primitive est une donnée qui n'est pas un objet et qui n'a
pas de méthode. Il existe 7 types de données primitives :
chaîne
nombre
bigint
booléen
indéfini
nul
symbole
Les primitives sont immuables : elles ne peuvent pas être modifiées. Il est important de
ne pas confondre une primitive ellemême avec une variable affectée d'une valeur
primitive. La variable peut être réaffectée à une nouvelle valeur, mais la valeur existante
ne peut pas être modifiée de la même manière que les objets, les tableaux et
les fonctions peuvent être modifiées.
Voici un exemple :
let name = 'Danny';
nom.toLowerCase();
console.log(nom); // Danny la méthode de chaîne n'a pas muté le
let arr = [1, 3, 5, 7]; arr.pop();
Forum Faire un don
console.log(arr); // [1, 3, 5] the array method mutated the ar Soutenez notre charité et
notre mission. Faites un don à freeCodeCamp.org.
name = 'Anna' // L'affectation donne à la primitive un nouveau (pas un muta
En JavaScript, toutes les valeurs primitives (à l'exception de null et undefined) ont
des équivalents d'objet qui entourent les valeurs primitives.
Ces objets wrapper sont String, Number, BigInt, Boolean et Symbol. Ces objets
wrapper fournissent les méthodes qui permettent de manipuler les valeurs primitives.
De retour à TypeScript, nous pouvons définir le type que nous voulons qu'une variable
ajoute (appelée "annotation de type" ou "signature de type") après avoir déclaré
une variable. Exemples : : tapez
laissez id : nombre = 5 ;
let firstname: string = 'danny'; laissez
hasDog : booléen = vrai ;
soit unité : nombre ; // Déclare une variable sans lui attribuer de valeur unit = 5 ;
Mais il est généralement préférable de ne pas indiquer explicitement le type, car
TypeScript déduit automatiquement le type d'une variable (inférence de type) :
soit id = 5 ; // TS sait que c'est un nombre let
firstname = 'danny'; // TS sait que c'est une chaîne let hasDog = true; //
TS sait que c'est un booléen
aChien = 'oui'; // ERREUR
We can also set a variable to be able to be a union type. A union Forum Fis
type aire
a vuariable
n don that can be
assigned more than one type: Soutenez notre charité et notre mission. Faites un
don à freeCodeCamp.org.
laisser l'âge : chaîne | nombre;
âge = 26 ;
âge = '26';
Types de référence En JavaScript,
presque "tout" est un objet. En fait (et de manière déroutante), les chaînes, les
nombres et les booléens peuvent être des objets s'ils sont définis avec le motclé :
new
let firstname = new String('Danny');
console.log(prénom); // Chaîne {'Danny'}
Mais lorsque nous parlons de types de référence en JavaScript, nous faisons référence à des
tableaux, des objets et des fonctions.
Mise en garde : types primitifs et types de référence
Pour ceux qui n'ont jamais étudié les types primitifs par rapport aux types de référence, voyons
discuter de la différence fondamentale.
Si un type primitif est affecté à une variable, nous pouvons considérer cette variable
comme contenant la valeur primitive. Chaque valeur primitive est stockée dans un
emplacement unique en mémoire.
Si nous avons deux variables, x et y, et qu'elles contiennent toutes deux des données
primitives, alors elles sont complètement indépendantes l'une de l'autre :
Forum Faire un don
X et Y contiennent tous deux des données primitives indépendantes uniques
soit x = 2 ;
soit y = 1 ;
x=y ;
y = 100 ;
console.log(x); // 1 (même si y est passé à 100, x vaut toujours 1
Ce n'est pas le cas avec les types de référence. Les types de référence font référence à un
emplacement mémoire où l'objet est stocké.
point1 et point2 contiennent une référence à l'adresse où
l' objet est stocké
Forum Faire un don
soit point1 = { x : 1, y : 1 } ; soit
point2 = point1 ;
point1.y = 100 ;
console.log(point2.y); // 100 (point1 et point2 font référence au même mem
C'était un aperçu rapide des types principaux par rapport aux types de référence. Consultez
cet article si vous avez besoin d'une explication plus approfondie : Types primitifs vs
types de référence.
Tableaux en TypeScript
Dans TypeScript, vous pouvez définir le type de données qu'un tableau peut contenir :
let ids : nombre[] = [1, 2, 3, 4, 5] ; // ne peut contenir que des nombres et des
noms : string[] = ['Danny', 'Anna', 'Bazza'] ; // ne peut contenir que des options let :
booléen[] = [true, false, false] ; ne peut contenir que des livres true o let : object[] = [
{ nom : 'Fooled by randomness', auteur : 'Nassim Taleb' }, { nom :
'Sapiens', auteur : 'Yuval Noah Harari' }, ] ; // ne peut contenir
que des objets let arr : any[] = ['hello',
1, true] ; // any revient essentiellement à TypeScri
ids.push(6);
ids.push('7'); // ERREUR : L'argument de type 'chaîne' n'est pas assignable t
Vous pouvez utiliser des types d'union pour définir des tableaux contenant plusieurs types :
let person : (string | number | boolean)[] = ['Danny', 1, true] ; personne[0] = 100 ;
personne[1] = {nom : 'Danny'} // Erreur le tableau de personnes ne peut pas contenir d'objet
Forum Faire un don
Si vous initialisez une variable avec une valeur, il n'est pas nécessaire de explicitement
indiquez le type, car TypeScript le déduira :
let person = ['Danny', 1, true] ; // Ceci est identique à l'exemple cidessus person[0] = 100;
personne[1] = { nom :
'Danny' } ; // Erreur le tableau de personnes ne peut pas contenir o
Il existe un type spécial de tableau qui peut être défini dans TypeScript : Tuples. Un tuple est un
tableau avec une taille fixe et des types de données connus.
Ils sont plus stricts que les tableaux normaux.
let person : [string, number, boolean] = ['Danny', 1, true] ; personne[0] = 100 ; // Erreur
La valeur à l'index 0 ne peut être qu'une chaîne
Objets dans TypeScript
Les objets dans TypeScript doivent avoir toutes les propriétés et valeurs correctes
les types:
// Déclarez une variable appelée person avec un type d'objet spécifique annota let person : {
nom : chaîne ;
emplacement :
chaîne ; isProgrammer :
booléen ; } ;
// Affecte une personne à un objet avec toutes les propriétés nécessaires et va person =
{ name:
'Danny',
emplacement :
Forum Faire un don
"RoyaumeUni", isProgrammer :
vrai, } ;
personne.isProgrammer = 'Oui'; // ERREUR : doit être un booléen
personne = {
nom : 'John',
lieu : 'US',
} ;
// ERREUR : il manque la propriété isProgrammer
Lors de la définition de la signature d'un objet, vous utiliserez généralement une interface.
Ceci est utile si nous devons vérifier que plusieurs objets ont les mêmes propriétés
spécifiques et types de valeur :
interface Personne
{ nom : chaîne ;
emplacement :
chaîne ; isProgrammer : booléen ;
}
let person1: Person = { name:
'Danny', location:
'UK', isProgrammer:
true,
} ;
let person2: Person = { name:
'Sarah', location:
'Germany', isProgrammer:
false, };
Nous pouvons également déclarer des propriétés de fonction avec des signatures de fonction.
Nous pouvons le faire en utilisant les fonctions JavaScript courantes de la vieille école () ou les
fonctions fléchées ES6 (): sayHi sayBye
Forum Faire un don
interface Speech
{ sayHi(name: string): string;
Soutenez notre charité et notre mission. Faites un don à freeCodeCamp.org. sayBye: (name:
string) => string;
}
let sayStuff: Speech = { sayHi:
function (name: string) {
return ̀Bonjour ${nom}` ;
},
sayBye : (nom : chaîne) => ̀Au revoir ${nom}`, } ;
console.log(sayStuff.sayHi('Heisenberg')); // Salut Heisenberg
console.log(sayStuff.sayBye('Heisenberg')); // Au revoir Heisenberg
Notez que dans l'objet, ou pourrait recevoir une fonction de flèche ou une
fonction JavaScript commune TypeScript ne le fait pas
se soucier. sayStuff sayHi sayBye
Fonctions dans TypeScript
Nous pouvons définir quels types doivent être les arguments de la fonction,
ainsi que le type de retour de la fonction :
// Définit une fonction appelée cercle qui prend une variable diam de type function
cercle(diam : nombre) : string {
return 'La circonférence est ' + Mathématiques PI * diam;
console.log(cercle(10)); // La circonférence est 31.41592653589793
La même fonction, mais avec une fonction flèche ES6 :
cercle const = (diam: nombre): chaîne => {
} ;
Forum Faire un don
console.log(cercle(10)); // La circonférence est 31.41592653589793
Remarquez qu'il n'est pas nécessaire d'indiquer explicitement qu'il s'agit d'une fonction ;
TypeScript le déduit. TypeScript déduit également le type de retour du
fonction, il n'est donc pas nécessaire de l'indiquer non plus. Bien que, si le
fonction est grande, certains développeurs aiment indiquer explicitement le retour
taper pour plus de clarté. cercle
// Utilisation de la saisie
explicite cercle const : Function = (diam: number): string => {
} ;
// Dactylographie inférée TypeScript voit que le cercle est une fonction qui alw
cercle const = (diam: nombre) => {
} ;
Nous pouvons ajouter un point d'interrogation après un paramètre pour le rendre facultatif.
Notez également cidessous comment un type d'union qui peut être un nombre ou
chaîne : c
const add = (a : nombre, b : nombre, c ? : nombre | chaîne) => {
console.log(c);
retourner a + b ;
} ;
console.log(add(5, 4, 'Je pourrais passer un nombre, une chaîne ou rien ici !
// Je pourrais passer un nombre, une chaîne ou rien ici !
// 9
Une fonction qui ne renvoie rien est dite renvoyer void une fonction
Forum cFomplète
aire un don
dépourvu de toute valeur. Cidessous, le type de retour de void a été explicitement
déclaré. Mais encore une fois, ce n'est pas nécessaire car TypeScript le déduira.
const logMessage = (msg: chaîne): void => {
'
console.log('Voici le message : + msg);
} ;
logMessage('TypeScript est superbe'); // Voici le message : TypeScript
Si nous voulons déclarer une variable de fonction, mais pas la définir (disons
exactement ce qu'il fait), puis utilisez une signature de fonction. Sous le
la fonction doit suivre la signature après les deuxpoints : sayHello
// Déclarez la variable sayHello et donnezlui une signature de fonction qui laisse sayHello :
(nom : chaîne) => void ;
// Définit la fonction en satisfaisant sa signature
sayHello = (nom) => {
console.log('Bonjour ' }; + nom);
sayHello('Danny'); // Bonjour Dany
Voici un canevas interactif pour vous aider à apprendre
en savoir plus sur les fonctions dans TypeScript :
Forum Faire un don
Types dynamiques (tous)
En utilisant le type, nous pouvons essentiellement ramener TypeScript dans
JavaScript : n'importe lequel
soit age : any = '100' ; âge
= 100 ; âge
= {
années : 100,
mois : 2,
} ;
Il est recommandé d'éviter autant que possible d'utiliser le type, car il empêche TypeScript
de faire son travail et peut entraîner des bogues. n'importe quel
Tapez les alias
Les alias de type peuvent réduire la duplication de code, en gardant
notre
Forum code
Faire uD RY.
n
don
Cidessous, nous pouvons voir que l'alias de type a empêché la répétition, et Soutenez
notre charité et notre mission. Faites un don à freeCodeCamp.org. agit comme une source
unique de vérité pour les données qu'un objet personne doit contenir. PersonneObjet
type ChaîneOuNombre = chaîne | nombre;
type PersonObject = { nom :
chaîne ;
identifiant : chaîne ou
numéro ; } ;
const personne1 : ObjetPersonne = {
nom : 'John',
identifiant : 1, } ;
const person2: PersonObject = { name:
'Delia', id: 2,
} ;
const sayHello = (person: PersonObject) => { return 'Salut '
+ nom.personne ;
} ;
const sayGoodbye = (person: PersonObject) => {
return 'Seeya ' }; + nom.personne ;
Le DOM et le casting de type TypeScript n'a pas accès
au DOM comme JavaScript. Cela signifie que chaque fois que nous essayons
d'accéder aux éléments DOM, TypeScript n'est jamais sûr qu'ils existent réellement.
L'exemple cidessous montre le problème :
Forum Faire un don
lien constant = document.querySelector('a');
console.log(link.href); // ERREUR : l'objet est peutêtre 'null'. TypeScrip
Avec l'opérateur d'assertion non nul (!), nous pouvons indiquer au compilateur
explicitement qu'une expression a une valeur autre que ou . C'est peut être
utile lorsque le compilateur ne peut pas déduire le type avec certitude, mais
nous avons plus d'informations que le compilateur. nul non défini
// Ici, nous disons à TypeScript que nous sommes certains que cette ancre const link =
document.querySelector('a')!;
console.log(link.href); // www.freeCodeCamp.org
Remarquez que nous n'avons pas eu à indiquer le type de la variable. C'est
parce que TypeScript peut clairement voir (via l'inférence de type) qu'il est de
taper . lien HTMLAnchorElement
Mais que faire si nous devions sélectionner un élément DOM par sa classe ou son identifiant ?
TypeScript ne peut pas déduire le type, car il peut s'agir de n'importe quoi.
formulaire const = document.getElementById('formulaire d'inscription');
console.log(form.method);
// ERREUR : l'objet est peutêtre 'null'.
// ERREUR : la propriété 'method' n'existe pas sur le type 'HTMLElement'.
Cidessus, nous obtenons deux erreurs. Nous devons dire à TypeScript que nous sommes
certain existe, et que nous savons qu'il est de type . Nous faisons cela avec le type
casting : formulaire HTMLFormElement
Forum Faire un don
const form
Soutenez = document.getElementById('signupform')
notre as
dHon
charité et notre mission. Faites un TMLFormElement
à freeCodeCamp.org.
console.log(form.method); // poste
Et TypeScript est content !
TypeScript a également un objet Event intégré. Donc, si nous ajoutons un submit
écouteur d'événement à notre formulaire, TypeScript nous donnera une erreur si nous appelons
toutes les méthodes qui ne font pas partie de l'objet Event. Découvrez comment
cool TypeScript est il peut nous dire quand nous avons fait une orthographe
erreur:
const form = document.getElementById('signupform') as HTMLFormElement
form.addEventListener('submit', (e: Event) => {
e.preventDefault(); // empêche la page de se rafraichir
console.log(e.tarrget); // ERREUR : la propriété 'cible' n'existe pas });
Voici un canevas interactif pour vous aider
en savoir plus sur les types dans TypeScript :
Forum Faire un don
Classes en TypeScript
Nous pouvons définir les types que chaque élément de données doit être dans une classe :
classe Personne {
nom : chaîne ;
isCool : booléen ; animaux
de compagnie : nombre ;
constructeur(n : chaîne, c : booléen, p : nombre) {
this.name = n;
this.isCool = c;
this.pets = p;
}
sayHello()
{ return ̀Bonjour, je m'appelle ${this.name} et j'ai ${this.pets} pets`;
}
}
const person1 = new Person('Danny', false, 1); const
person2 = new Person('Sarah', 'oui', 6); // ERREUR : Argument de t
Forum Faire un don
console.log(person1.sayHello()); // Salut, je m'appelle Danny et j'ai 1
On pourrait alors créer un tableau qui ne comprendrait que les objets construits à partir de la
classe : people Person
laissez Personnes : Personne[] = [personne1, personne2] ;
Nous pouvons ajouter des modificateurs d'accès aux propriétés d'une classe. TypeScript
fournit également un nouveau modificateur d'accès appelé . lecture seulement
classe Personne
{
nom en lecture seule : chaîne ; // Cette propriété est immuable elle ne peut être que
b private isCool: boolean; // Ne peut accéder ou modifier qu'à partir des méthodes w
protected email: string; // Peut accéder ou modifier à partir de cette classe et des animaux
publics : nombre ; // Peut accéder ou modifier de n'importe où y compris
constructeur(n : chaîne, c : booléen, e : chaîne, p : nombre) {
this.name = n;
this.isCool = c;
this.email = e;
this.pets = p;
}
direMonNom() {
console.log(`Tu n'es pas Heisenberg, tu es ${this.name}`);
}
}
const person1 = new Person('Danny', false, 'dan@e.com', 1);
console.log(person1.name); // Bien
person1.name = 'James' ; // Erreur : lecture seule
console.log(person1.isCool); // Erreur : propriété privée uniquement accessi
console.log(person1.email); // Erreur : propriété protégée accéder uniquement à
console.log(person1.pets); // Propriété publique donc pas de problème
We can make our code more concise by constructing class properties
Forumthis Faire un don
way: Soutenez notre
charité et notre mission. Faites un don à freeCodeCamp.org.
class Personne
{ constructeur
( nom en lecture seule :
chaîne, isCool privé : booléen,
email protégé : chaîne, animaux
publics : nombre ) {}
sayMyName()
{ console.log(`Tu n'es pas Heisenberg, tu es ${this.name}`);
}
}
const person1 = new Person('Danny', false, 'dan@e.com', 1);
console.log(person1.name); // Dany
En l'écrivant de la manière cidessus, les propriétés sont automatiquement attribuées
dans le constructeur, ce qui nous évite d'avoir à les écrire toutes.
Notez que si nous omettons le modificateur d'accès, par défaut la propriété sera publique.
Les classes peuvent également être étendues, comme en JavaScript normal :
le programmeur de classe étend la personne
{ langages de programmation : chaîne [] ;
constructeur( nom :
chaîne, isCool :
booléen, email :
chaîne, animaux :
nombre, pL :
chaîne[] ) {
// Le super appel doit fournir tous les paramètres pour la base (Person) cla super(name,
isCool, email, pets);
this.programmingLanguages = pL;
Forum Faire un don
}
}
Pour plus d'informations sur les classes, reportezvous à la documentation officielle de TypeScript.
Voici un canevas interactif pour vous aider à
en savoir plus sur les classes dans TypeScript :
Modules en TypeScript
En JavaScript, un module est simplement un fichier contenant du code associé.
Les fonctionnalités peuvent être importées et exportées entre les modules, en
gardant le code bien organisé.
TypeScript prend également en charge les modules. Les fichiers TypeScript seront
compilés en plusieurs fichiers JavaScript.
In the file, change the following options to support modern importing and Forum
exporting: Faire un don
tsconfig.json Soutenez notre charité et notre mission. Faites
un don à freeCodeCamp.org.
"cible": "es2016",
"module": "es2015"
(Bien que, pour les projets Node, vous vouliez très probablement Node ne prend pas encore en
charge l'importation/exportation moderne.) "module": "CommonJS"
Maintenant, dans votre fichier HTML, modifiez l'importation du script pour qu'elle soit de type
module:
<script type="module" src="/public/script.js"></script>
Nous pouvons maintenant importer et exporter des fichiers en utilisant ES6 :
// src/hello.ts
exporte la fonction sayHi() {
console.log('Bonjour !');
}
// src/script.ts importe
{ sayHi } depuis './hello.js' ;
dis salut(); // Bonjour!
Remarque : importez toujours en tant que fichier JavaScript, même dans les fichiers TypeScript.
Interfaces en TypeScript
Les interfaces définissent l'apparence d'un objet :
Forum Faire un don
Interface Personne
{ nom : chaîne ;
âge : nombre ;
}
function sayHi(person: Person) {
console.log(`Bonjour ${person.name}`);
}
sayHi({ name: 'John',
âge : 48 ans,
}); // Salut John
Vous pouvez également définir un type d'objet à l'aide d'un alias de type :
type Personne =
{ nom : chaîne ;
âge : nombre ; } ;
function sayHi(person: Person) {
console.log(`Bonjour ${person.name}`);
}
sayHi({ nom :
'John', âge : 48,
}); // Salut John
Ou un type d'objet peut être défini de manière anonyme :
function sayHi(person: { name: string; age: number }) { console.log(`Hi $
{person.name}`);
}
dis salut({
name: 'John',
Forum Faire un don
age:
48, }); // Hi John
Les interfaces sont très similaires aux alias de type et, dans de nombreux cas, vous pouvez
utiliser l'un ou l'autre. La principale distinction est que les alias de type ne peuvent
pas être rouverts pour ajouter de nouvelles propriétés, par rapport à une interface qui est toujours
extensible.
Les exemples suivants sont tirés de la documentation TypeScript.
Extension d'une interface :
interface Animal
{ nom : chaîne
}
interface Ours étend Animal { miel :
booléen
}
const ours : ours =
{ nom : "Winnie",
chéri : vrai,
}
Extension d'un type via des intersections :
type Animal =
{ nom : chaîne
}
type Ours = Animal & { miel :
booléen
}
const ours : ours = {
nom : "Winnie",
Forum Faire un don
miel: vrai,
}
Ajout de nouveaux champs à une interface existante :
interface Animal
{ nom : chaîne
}
// Réouverture de l'interface Animal pour ajouter un nouveau champ
interface Animal {
queue : booléen
const chien : Animal =
{ nom : "Bruce",
queue : vrai,
}
Voici la principale différence : un type ne peut pas être modifié après avoir été
créé:
type Animal =
{ nom : chaîne
}
typeAnimal = { _
queue : booléen
}
// ERREUR : Identifiant 'Animal' en double.
En règle générale, les documents TypeScript recommandent d'utiliser des interfaces pour
définir des objets, jusqu'à ce que vous ayez besoin d'utiliser les fonctionnalités d'un type.
Les interfaces peuvent également définir des signatures de fonction :
Forum Faire un don
Soutenez notre charité et notre mission. Faites un don à freeCodeCamp.org. interface
Person { name: string
age: number
speak(sentence:
string): void
}
const personne1 : Personne = {
nom : "John",
âge :
48 ans, parler : phrase => console.log(phrase),
}
Vous vous demandez peutêtre pourquoi nous utiliserions une interface sur une
classe dans l'exemple cidessus.
L'un des avantages de l'utilisation d'une interface est qu'elle n'est utilisée que
par TypeScript, pas par JavaScript. Cela signifie qu'il ne sera pas compilé et
n'alourdira pas votre JavaScript. Les classes sont des fonctionnalités de JavaScript,
elles seraient donc compilées.
De plus, une classe est essentiellement une fabrique d'objets (c'estàdire un plan
de ce à quoi un objet est censé ressembler puis implémenté), alors qu'une
interface est une structure utilisée uniquement pour la vérification de type.
Alors qu'une classe peut avoir des propriétés et des méthodes initialisées pour aider
à créer des objets, une interface définit essentiellement les propriétés et le type
qu'un objet peut avoir.
Interfaces avec les classes
Nous pouvons indiquer à une classe qu'elle doit contenir certaines propriétés
et méthodes en implémentant une interface :
Forum Faire un don
interface HasFormatter
{ format(): string;
}
class Personne implémente HasFormatter
{ constructeur ( nom d'utilisateur public : chaîne, mot de passe protégé : chaîne) {}
format()
{ return this.username.toLocaleLowerCase();
}
}
// Doit être des objets qui implémentent l'interface HasFormatter let person1:
HasFormatter; let person2:
HasFormatter;
person1 = new Person('Danny', 'password123'); person2
= new Person('Jane', 'TypeScripter1990');
console.log(person1.format()); // danny
Assurezvous qu'il s'agit d'un tableau d'objets qui implémentent (garantit que chaque
personne dispose de la méthode de format) : people HasFormatter
laisser les gens : HasFormatter[] = [] ;
personnes.push(personne1);
personnes.push(personne2);
Types littéraux dans TypeScript
En plus des types généraux et et des , nous pouvons nous référer à des chaînes spécifiques
nombres dans les positions de type : numéro de chaîne
// Type d'union avec un type littéral à chaque position let favoriteColor:
'red' | 'bleu' | 'vert' | 'jaune';
favoriteColor = 'bleu';
Forum Faire un don
favoriteColor = 'crimson'; // ERREUR : Le type '"crimson"' n'est pas ass
Voici un canevas interactif pour vous aider à
en savoir plus sur les types littéraux dans
Manuscrit:
Génériques
Les génériques vous permettent de créer un composant qui peut
fonctionner sur une variété de types, plutôt qu'un seul, ce qui contribue à
rendre le composant plus réutilisable.
Prenons un exemple pour vous montrer ce que cela signifie...
La fonction accepte n'importe quel objet et renvoie un nouvel objet avec
toutes les propriétés et valeurs de l'objet transmis, plus une propriété
avec une valeur aléatoire entre 0 et 1000. En bref, cela donne n'importe
quel
Forum objet
Faire
un don
une pièce d'identité. identifiant addID
const addID = (obj : objet) => {
laissez id = Math.floor(Math.random() * 1000);
return { ...obj, id } ;
} ;
let person1 = addID({ name: 'John', age: 40 });
console.log(person1.id); // 271
console.log(person1.name); // ERREUR : la propriété 'nom' n'existe pas sur
Comme vous pouvez le voir, TypeScript donne une erreur lorsque nous essayons d'accéder au
propriété. En effet, lorsque nous passons un objet à spécifier les propriétés , nous ne sommes pas
que cet objet doit avoir donc TypeScript
n'a aucune idée des propriétés de l'objet (il n'a pas "capturé"
eux). Ainsi, la seule propriété que TypeScript connaît est sur le
l'objet retourné est . nom addID identifiant
Alors, comment pouvonsnous transmettre , mais dites toujours à TypeScript quoi
n'importe quel objet aux propriétés et aux valeurs de l'objet ? Nous pouvons utiliser un générique, où
est connu comme paramètre de type : addID <T> T
// <T> est juste la convention par exemple, nous pourrions utiliser <X> ou <A>
const addID = <T>(obj : T) => {
} ;
Qu'estce que cela fait? Eh bien, maintenant, lorsque nous passons un objet dans , nous avons
TypeScript, nous devons capturer le type devient ainsi le type que nous
passer. saura maintenant quelles sont les propriétés de l'objet que
nous
Fpaire
Forum assons
un don
in. addID T addID
Mais, nous avons maintenant un problème : n'importe quoi peut être transmis et
TypeScript capturera le type et ne signalera aucun problème : addID
let person1 = addID({ name: 'John', age: 40 }); let person2
= addID('Sally'); // Passe une chaîne pas de problème
console.log(person1.name); // John
console.log(person2.id);
console.log(person2.name); // ERREUR : la propriété 'nom' n'existe pas sur
Lorsque nous avons transmis une chaîne, TypeScript n'a vu aucun problème. Il
n'a signalé une erreur que lorsque nous avons essayé d'accéder à la propriété. Donc, nous
avons besoin d'une contrainte : nous devons dire à TypeScript que seuls les objets
doivent être acceptés, en faisant de notre type générique, , une extension de
: nom T objet
const addID = <T étend l'objet>(obj : T) => { let id =
Math.floor(Math.random() * 1000);
return { ...obj, id } ; } ;
let person1 = addID({ name: 'John', age: 40 }); let person2
= addID('Sally'); // ERREUR : L'argument de type 'chaîne' est n
L'erreur est détectée immédiatement parfait... enfin, pas tout à fait. En JavaScript,
les tableaux sont des objets, nous pouvons donc toujours nous en tirer en passant un
tableau :
Forum Faire un don
let person2
Soutenez = ac
notre ddID(['Sally',
harité et n2otre
6]); //
mPission.
asse dans
un tableau
Faites pas
un don à fdreeCodeCamp.org.
e problème
console.log(person2.name); // Erreur : la propriété 'nom' n'existe pas sur
Nous pourrions résoudre cela en disant que l'argument d'objet devrait avoir
une propriété de nom avec une valeur de chaîne :
const addID = <T étend { nom : chaîne }>(obj : T) => {
} ;
let person2 = addID(['Sally', 26]); // ERREUR : l'argument doit avoir une
Le type peut également être transmis la , comme cidessous mais ce n'est pas nécessaire
plupart du temps, car TypeScript le déduira. <T>
// Cidessous, nous avons explicitement indiqué de quel type l'argument doit être b
let person1 = addID<{ nom : chaîne ; âge : nombre }>({ nom : 'Jean', âge
Les génériques vous permettent d'avoir une sécurité de type dans les composants où le
les arguments et les types de retour sont inconnus à l'avance.
En TypeScript, les génériques sont utilisés lorsque nous voulons décrire un
correspondance entre deux valeurs. Dans l'exemple cidessus, le
le type de retour était lié au type d'entrée. Nous avons utilisé un générique pour
décrire la correspondance.
Autre exemple : si nous avons besoin d'une fonction qui accepte Faire
plusieurs
un dton
ypes,
il vaut
Forum
mieux utiliser
un générique que le type. Cidessous montre le problème Soutenez notre charité et
notre mission. Faites un don à freeCodeCamp.org. avec en utilisant : tout tout
function logLength(a : any)
{ console.log(a.length); // Pas d'erreur
retourner un ;
}
let hello = 'Bonjour le monde';
logLength(bonjour); // 11
laissez combien =
8 ; logLength(combien); // indéfini (mais pas d'erreur TypeScript sûrement nous w
Nous pourrions essayer d'utiliser un générique :
fonction logLength<T>(a : T) {
console.log(a.length); // ERREUR : TypeScript n'est pas certain que ̀a` i renvoie a ;
Au moins, nous obtenons maintenant des commentaires que nous pouvons utiliser
pour renforcer notre code.
Solution : utilisez un générique qui étend une interface garantissant que chaque argument
transmis a une propriété de longueur :
interface aLongueur {
longueur : nombre ;
}
function logLength<T étend hasLength>(a : T) {
console.log(a.length);
Forum Faire un don
retourner un ;
}
let hello = 'Bonjour le monde';
logLength(bonjour); // 11
laissez combien =
8 ; logLength(combien); // Erreur : les nombres n'ont pas de propriétés de longueur
Nous pourrions également écrire une fonction où l'argument est un tableau
d'éléments qui ont tous une propriété de longueur :
interface hasLength
{ longueur : nombre ;
}
function logLengths<T étend hasLength>(a : T[]) {
a.forEach((element) => {
console.log(element.length); });
soit arr = [
'Cette chaîne a une prop longueur',
['This', 'arr', 'has', 'length'], { material:
'plastic', length: 30 }, ];
logLengths(arr); //
29
// 4
// 30
Les génériques sont une fonctionnalité géniale de TypeScript !
Génériques avec interfaces
Lorsque nous ne savons pas à l'avance de quel type sera une certaine valeur dans
un objet, nous pouvons utiliser un générique pour transmettre le type :
Forum Faire un don
// Le type, T, sera passé dans interface Person<T>
{ nom : chaîne ; âge : nombre ;
documents : T ;
// Nous devons transmettre le type de ̀documents` un tableau de chaînes dans const person1 :
Person<string[]> = { name : 'John', age : 48,
documents :
['passport',
'bank statement ', 'visa'], } ;
// Encore une fois, nous implémentons l'interface ̀Person` et passons le type fo const person2 :
Person<string> = {
nom : 'Delia', âge :
46 ans,
documents : 'passeport, P45', } ;
Énumérations dans TypeScript
Les énumérations sont une fonctionnalité spéciale que TypeScript apporte à JavaScript.
Les énumérations nous permettent de définir ou de déclarer une collection de valeurs liées,
qui peuvent être des nombres ou des chaînes, sous la forme d'un ensemble de constantes nommées.
enum ResourceType {
LIVRE,
AUTEUR,
FILM,
DIRECTEUR,
PERSONNE,
console.log(ResourceType.BOOK); // 0
console.log(ResourceType.AUTHOR); // 1
// Pour commencer à 1
enum ResourceType {
Forum Faire un don
LIVRE = 1,
AUTEUR,
Soutenez
notre charité et notre mission. Faites un don à freeCodeCamp.org.
FILM,
DIRECTEUR,
PERSONNE,
console.log(ResourceType.BOOK); // 1
console.log(ResourceType.AUTHOR); // 2
Par défaut, les énumérations sont basées sur des nombres elles stockent les valeurs de chaîne
sous forme de nombres. Mais il peut aussi s'agir de chaînes :
enum Direction {
Haut = 'Haut',
Droite = 'Droite',
Bas = 'Bas',
Gauche = 'Gauche',
}
console.log(Direction.Droite); // Droite
console.log(Direction.Down); // Bas
Les énumérations sont utiles lorsque nous avons un ensemble de constantes liées. Pour
Par exemple, au lieu d'utiliser des nombres non descriptifs dans votre code, les énumérations rendent le
code plus lisible avec des constantes descriptives.
Les énumérations peuvent également empêcher les bogues, car lorsque vous tapez le nom de
l'énumération, intellisense apparaîtra et vous donnera la liste des options possibles pouvant
être sélectionnées.
Mode strict TypeScript
Il est recommandé d'activer toutes les opérations de vérification de type stricte dans le fichier.
Cela entraînera TypeScript à signaler plus d'erreurs,
but will help prevent many bugs from creeping into your Forum application. Faire un don
tsconfig.json Soutenez notre
charité et notre mission. Faites un don à freeCodeCamp.org.
// tsconfig.json
"strict": vrai
Discutons de quelquesunes des choses que fait le mode strict : pas de vérifications
implicites quelconques et strictes.
Aucun implicite aucun
Dans la fonction cidessous, TypeScript a déduit que le paramètre est de type. Comme
vous pouvez le voir, lorsque nous transmettons un nombre à cette fonction et essayons
d'enregistrer une propriété, aucune erreur n'est signalée. Pas
bon. n'importe quel nom
function nom_journal(a)
{ // Pas d'erreur ??
console.log(un.nom);
}
nom_journal(97);
Avec l'option activée, TypeScript signalera instantanément une erreur si nous
n'indiquons pas explicitement le type de : noImplicitAny a
// ERREUR : le paramètre 'a' a implicitement un type 'any'. function
nom_journal(a)
{ console.log(a.nom);
}
Contrôles nuls stricts Forum Faire un don
When the
Soutenez nootre
ption
is false,
charité et nTotre
ypeScript effectively
Faites uin
mission. gnores afreeCodeCamp.org.
don à nd . This
can lead to unexpected errors at
Durée. strictNullChecks null non défini
Avec la valeur true, et ont leurs propres types, et vous obtiendrez une
erreur de type si vous les affectez à une variable qui attend une valeur concrète
(par exemple, ). strictNullChecks null chaîne indéfinie
laissez whoSangThis: string = getSong();
const singles = [
{ chanson : 'touch of grey', artiste : 'grateful dead' }, { chanson :
'paint it black', artiste : 'rolling stones' }, ] ;
const single = singles.find((s) => s.song === whoSangThis);
console.log(single.artiste);
Cidessus, n'a aucune garantie qu'il trouvera la chanson mais nous avons
écrit le code comme s'il le ferait toujours. trouver des célibataires
En définissant sur true, TypeScript générera une erreur car nous n'avons pas
fait de garantie existante avant d'essayer de l'utiliser :
strictNullChecks single
const getSong = () => { return
'chanson'; } ;
laissez whoSangThis: string = getSong();
const singles = [
{ chanson : 'touch of grey', artiste : 'grateful dead' }, { chanson :
'paint it black', artiste : 'rolling stones' },
] ;
Forum Faire un don
const single = singles.find((s) => s.song === whoSangThis);
console.log(single.artiste); // ERREUR : l'objet est peutêtre 'indéfini'.
TypeScript nous dit essentiellement de nous assurer qu'il existe avant de l'utiliser. Nous
devons vérifier si ce n'est pas le cas ou d'abord : single null undefined
if (single)
{ console.log(single.artist); // pierres qui roulent
}
Limitation dans TypeScript
Dans un programme TypeScript, une variable peut passer d'un type moins précis à
un type plus précis. Ce processus est appelé rétrécissement de type.
Voici un exemple simple montrant comment TypeScript réduit le type moins spécifique
à des types plus spécifiques lorsque nous utilisons des instructions if
avec : string | type de numéro
function addAnother(val : string | number) { if (typeof
val === 'string') {
// TypeScript traite ̀val` comme une chaîne dans ce bloc, nous pouvons donc nous
renvoyer val.concat(' ' + val);
}
// TypeScript sait que ̀val` est un nombre ici return val
+ val;
}
console.log(addAnother('Woooo')); // Woooo Woooo
console.log(addAnother(20)); // 40
Forum Faire un don
Autre exemple :
Soutenez cidessous,
notre charité nous
et notre avons
mission. Fdaites
éfini u
un
n d
type appelé ,
on àd 'union
freeCodeCamp.org.
qui peut être de type ou . tousVéhicules Avion Train
interface Véhicule
{ topSpeed: nombre ;
}
interface Le train étend le véhicule {
voitures : nombre ;
}
L'avion d'interface étend le véhicule {
Envergure : nombre ;
}
type AvionOuTrain = Avion | Former;
function getSpeedRatio(v: PlaneOrTrain) {
// Ici, nous voulons retourner topSpeed/carriages, ou topSpeed/wingSp
console.log(v.carriages); // ERREUR : 'chariots' n'existe pas sur typ
}
Étant donné que la fonction fonctionne avec plusieurs types, nous avons besoin
d'un moyen de distinguer s'il s'agit . Nous pourrions le faire en donnant les deux types
d'une ou d'une propriété distinctive commune, avec une valeur
de chaîne littérale : getSpeedRatio v Plane Train
// Tous les trains doivent maintenant avoir une propriété de type égale à
'Train' interface Train extend Vehicle
{ type: 'Train';
voitures : nombre ;
}
// Tous les trains doivent maintenant avoir une propriété de type égale à
'Plane' interface Plane extend Vehicle {
tapez : 'Avion' ;
Envergure : nombre ;
}
Forum Faire un don
tapez AvionOuTrain = Avion | Former;
Maintenant, nous et TypeScript pouvons affiner le type de : v
function getSpeedRatio(v: PlaneOrTrain) { if (v.type
=== 'Train') { // TypeScript sait
maintenant que ̀v` est définitivement un ̀Train`. Il a n retour v.topSpeed / v.carriages ;
// Si ce n'est pas un train, TypeScript précise que ̀v` doit être un P return v.topSpeed /
v.wingSpan;
}
let bigTrain : Train = { type :
'Train', topSpeed :
100, wagons :
20, } ;
console.log(getSpeedRatio(bigTrain)); // 5
Bonus : TypeScript avec React
TypeScript prend entièrement en charge React et JSX. Cela signifie que nous
pouvons utiliser TypeScript avec les trois frameworks React les plus courants :
créerréagirapp (configuration TS)
Gatsby (configuration TS)
Next.js (configuration TS)
Si vous avez besoin d'une configuration ReactTypeScript plus personnalisée,
vous pouvez configurer Webpack (un bundle de modules) et le configurer vousmême.
Mais la plupart du temps, un framework fera l'affaire. tsconfig.json
Forum Faire un don
To setup up createreactapp with TypeScript, for example, simply Soutenez
notre
courir: charité et notre mission. Faites un don à freeCodeCamp.org.
npx createreactapp monapplication template typescript
# ou
fil créer réagirapp monapplication template dactylographié
Dans le dossier src, nous pouvons maintenant créer des fichiers avec des
extensions (pour les fichiers TypeScript normaux) ou (pour TypeScript
avec React) et écrire nos composants avec TypeScript. Cela sera ensuite
compilé en JavaScript dans le dossier public. .ts .tsx
Réagissez les accessoires avec TypeScript
Cidessous, nous disons que cela devrait être un composant fonctionnel React
qui accepte un objet props avec le props , qui devrait être une chaîne,
et , qui devrait être un nombre. Âge du nom de la personne
// src/components/Person.tsx import
React depuis 'react' ;
const Personne : React.FC<{ nom :
chaîne ; âge :
nombre ;
}> = ({ nom, age }) => { return (
<div>
<div>{nom}</div>
<div>{âge}</div> </
div>
);
} ;
exporter la personne par défaut ;
Forum Faire un don
But most developers prefer to use an interface to specify prop
types:
interface Props { nom :
chaîne ; âge :
nombre ;
}
personne const : React.FC<Props> = ({ nom, âge }) => {
retour
( <div>
<div>{nom}</div>
<div>{âge}</div>
</div>
); } ;
Nous pouvons ensuite importer ce composant dans . Si nous ne fournissons pas les
accessoires nécessaires, TypeScript générera une erreur. App.tsx
importer React depuis 'react' ;
importer une personne à partir de './composants/personne' ;
Application const : React.FC = () => {
retour (
<div>
<Person name='John' age={48} />
</div>
);
} ;
exporter l'application par défaut ;
Voici quelques exemples de ce que nous pourrions avoir comme types d'accessoires :
Forum Faire un don
interface PersonInfo { name:
string; Soutenez
notre charité et notre mission. Faites un don à freeCodeCamp.org. age: number;
interface Props
{ texte : chaîne ;
identifiant :
numéro ; isVeryNice ? :
booléen ; func : (nom : chaîne) =>
chaîne ; InfoPersonne : InfoPersonne ;
}
Réagissez les crochets avec TypeScript
useState()
Nous pouvons déclarer les types d'une variable d'état en utilisant des crochets angulaires. Ci
dessous, si nous avons omis les crochets angulaires, TypeScript serait
déduire que c'est un nombre. Donc, si nous voulons lui permettre d'être également nul, nous avons
à préciser : espèces
personne const : React.FC<Props> = ({ nom, âge }) => { const
[cash, setCash] = useState<nombre | nul>(1);
setCash(null);
retour (
<div>
<div>{nom}</div>
<div>{âge}</div> </
div>
);
} ;
useRef()
useRef renvoie un objet mutable qui persiste pendant toute la durée de Forum
vie du Faire un don
composant. Nous pouvons indiquer à TypeScript à quoi l'objet ref doit faire référence Soutenez notre
charité et notre mission. Faites un don à freeCodeCamp.org. à cidessous, nous disons que le prop
devrait être un : HTMLInputElement
const Person : React.FC = () => { //
Initialise la propriété .current à null const inputRef
= useRef<HTMLInputElement>(null);
retour
( <div>
<input type='text' ref={inputRef} />
</div>
); } ;
Pour plus d'informations sur React with TypeScript, consultez ces
incroyables feuilles de triche ReactTypeScript.
Ressources utiles et lectures
complémentaires
La documentation officielle de TypeScript
La série de vidéos TypeScript de Net Ninja (géniale !)
Vidéo TypeScript de Ben Awad avec React
Rétrécissement dans TypeScript (une fonctionnalité très intéressante de TS que
vous devriez apprendre)
Surcharges de fonctions
Valeurs primitives en JavaScript
Objets JavaScript
Merci d'avoir lu!
J'espère que cela a été utile. Si vous êtes arrivé ici, vous connaissez
mFaintenant
principal le un don
orum Faire
fondamentaux de TypeScript et pouvez commencer à l'utiliser dans vos projets.
Encore une fois, vous pouvez également télécharger ma feuille de triche TypeScript PDF d'une page ou commander
une affiche physique.
Pour en savoir plus sur moi, vous pouvez me trouver sur Twitter et YouTube.
Acclamations!
Danny Adams Je
suis un développeur web fullstack axé sur React, NextJS, TypeScript, Node et
PHP. Actuellement en freelance à plein temps avec WordPress.
Si vous avez lu jusqu'ici, tweetez à l'auteur pour lui montrer que vous vous souciez de lui.
Tweetez un remerciement
Apprenez à coder gratuitement. Le programme open source de freeCodeCamp a aidé plus de 40 000 personnes à
obtenir des emplois en tant que développeurs.
Commencer
PUBLICITÉ
Forum Faire un don
freeCodeCamp
Soutenez in
s
a donorsupported
otre taxexempt
charité et notre 501(c)(3)
mission. Faites charity
un don organization (United States
à freeCodeCamp.org.
Numéro d'identification fiscale fédéral : 820779546)
Notre mission : aider les gens à apprendre à coder gratuitement. Nous y parvenons en créant des milliers de
des vidéos, des articles et des cours de codage interactifs tous librement accessibles au public. Nous avons aussi
des milliers de groupes d'étude freeCodeCamp à travers le monde.
Les dons à freeCodeCamp sont reversés à nos initiatives éducatives et aident à payer les serveurs,
les services et le personnel.
Vous pouvez faire un don déductible des impôts ici.
Guides des tendances
Instruction Bash If CS contre informatique
Aligner le texte en HTML Ajout JS
JS copier un objet Sélection SQL
Tableau contre Power BI PHP éclaté
Qu'estce que rem en CSS ? Imploser PHP
Algorithme de tri rapide Qu'estce que YAML ?
Comment ouvrir des fichiers XML Qu'estce qu'un ORM ?
À quoi sert le nœud ? Principes SOLIDES
Déclarer un tableau en JS Exemple de date SQL
La chaîne Python contient Minification JavaScript
Ajouter une chaîne en Python Analyste de données vs Scientifique
Qu'estce que l'analyse de données ? Minuscule une chaîne Python
Git revient au dernier commit Échantillonnage aléatoire stratifié
Qu'estce qu'un IDE dans le codage ? Variables d'environnement Linux
Convertir Int en chaîne C++ Quel langage de programmation ?
Notre charité
Forum académique Faire un don

À propos Réseau d'anciens Boutique Open Source Support Sponsors Honnêteté
Code nootre
Soutenez f Conduct
Perivacy
charité Policy
t notre Terms
mission. of Suervice
Faites n don C
àopyright Policy
freeCodeCamp.org.

Apprenez TypeScript - Le Guide Ultime Du Débutant

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Apprenez TypeScript - Le Guide Ultime Du Débutant

Transféré par

Droits d'auteur :

Formats disponibles

Machine Translated by Google

Comment utiliser TypeScript avec React Forum Faire un don

tscw Forum Faire un don

Contrôles nuls stricts Forum Faire un don

Forum académique Faire un don

Vous aimerez peut-être aussi

Apprenez TypeScript - Le Guide Ultime Du Débutant

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Apprenez TypeScript - Le Guide Ultime Du Débutant

Transféré par

Droits d'auteur :

Formats disponibles

Machine Translated by Google

Comment utiliser TypeScript avec React Forum Faire un don

tsc­w Forum Faire un don

Contrôles nuls stricts Forum Faire un don

Forum académique Faire un don

Vous aimerez peut-être aussi

tscw Forum Faire un don