TypeScript pour les débutants : un guide de 5 minutes
by Hugo Valcourt, Fondateur, Développeur front-end senior
TypeScript for Beginners: A 5-Minute Guide
TypeScript is a superset of JavaScript that adds static typing to help catch errors early during development. If you're familiar with JavaScript, learning TypeScript is a natural next step. Here’s a quick introduction!
1. Setting Up TypeScript
To start with TypeScript, you'll need to install it using Node.js and npm:bashCopy codenpm install -g typescriptOnce installed, you can write TypeScript code in .ts files and compile it to JavaScript using the TypeScript compiler (tsc):bashCopy codetsc filename.ts
2. Basic Type Annotations
TypeScript allows you to declare types for variables, function parameters, and return values. This helps prevent mistakes by ensuring variables hold the expected types.
Example:
typescriptCopy codelet message: string = "Hello, TypeScript!"; // string type let age: number = 25; // number type let isStudent: boolean = true; // boolean typeIf you try to assign a wrong type, TypeScript will throw an error:typescriptCopy codeage = "twenty-five"; // Error: Type 'string' is not assignable to type 'number'.
3. Functions and Type Checking
You can define types for function parameters and return types.
Example:
typescriptCopy codefunction greet(name: string): string {
return `Hello, ${name}!`;
}
greet("Alice"); // works fine
greet(123); // Error: Argument of type 'number' is not assignable to type 'string'.TypeScript ensures that the greet function only accepts a string and returns a string.
4. Type Inference
TypeScript can infer types even when you don’t explicitly declare them.
Example:
typescriptCopy codelet score = 100; // inferred as number score = "high"; // Error: Type 'string' is not assignable to type 'number'.
5. Interfaces
Interfaces define the structure of an object. They’re like contracts for what an object should look like.
Example:
typescriptCopy codeinterface Person { name: string; age: number; isStudent: boolean; } const user: Person = { name: "Bob", age: 22, isStudent: true, };Now, if you try to omit or add extra properties, TypeScript will throw an error.
6. Classes
TypeScript also supports object-oriented programming with classes.
Example:
typescriptCopy codeclass Car { model: string; year: number; constructor(model: string, year: number) { this.model = model; this.year = year; } displayInfo(): void { console.log(`${this.model} was built in ${this.year}.`); } } const myCar = new Car("Toyota", 2020); myCar.displayInfo(); // Toyota was built in 2020.
7. Generics
Generics allow you to create reusable components that work with different types.
Example:
typescriptCopy codefunction identity<T>(value: T): T {
return value;
}
console.log(identity<string>("TypeScript"));
console.log(identity<number>(42));The function identity can take a value of any type, and TypeScript will ensure that the returned type matches.
8. Union Types
Union types let a variable or parameter hold more than one type.
Example:
typescriptCopy codelet value: string | number; value = "Hello"; value = 123; // value = true; // Error: Type 'boolean' is not assignable to type 'string | number'.
9. Optional Properties
You can mark properties as optional using the ? operator.
Example:
typescriptCopy codeinterface User { username: string; email?: string; // optional } const user1: User = { username: "Alice" }; const user2: User = { username: "Bob", email: "bob@example.com" };
10. Compiling and Running TypeScript
You can compile TypeScript to JavaScript using:bashCopy codetsc filename.tsThis generates a .js file that you can run using Node.js or in the browser.
Conclusion
TypeScript enhances JavaScript by introducing types, making your code safer and more maintainable. In these 5 minutes, you’ve learned how to:
Use basic type annotations.
Write functions with type checking.
Use interfaces and classes.
Work with generics and union types.
Ready to dive deeper? Keep practicing!
You said:
translate in french
ChatGPT said:
TypeScript pour les Débutants : Un Guide en 5 Minutes
TypeScript est un superset de JavaScript qui ajoute le typage statique pour aider à détecter les erreurs dès le développement. Si vous connaissez déjà JavaScript, apprendre TypeScript est une étape naturelle. Voici une introduction rapide !
1. Installation de TypeScript
Pour commencer avec TypeScript, vous devez l'installer avec Node.js et npm :bashCopy codenpm install -g typescriptUne fois installé, vous pouvez écrire du code TypeScript dans des fichiers .ts et le compiler en JavaScript avec le compilateur TypeScript (tsc) :bashCopy codetsc fichier.ts
2. Annotations de Type de Base
TypeScript vous permet de déclarer des types pour les variables, les paramètres de fonction et les valeurs de retour. Cela aide à prévenir les erreurs en s’assurant que les variables ont les types attendus.
Exemple :
typescriptCopy codelet message: string = "Bonjour, TypeScript!"; // type string let age: number = 25; // type number let isStudent: boolean = true; // type booleanSi vous essayez d'assigner un mauvais type, TypeScript renverra une erreur :typescriptCopy codeage = "vingt-cinq"; // Erreur : Le type 'string' n'est pas assignable au type 'number'.
3. Fonctions et Vérification des Types
Vous pouvez définir des types pour les paramètres de fonction et les types de retour.
Exemple :
typescriptCopy codefunction saluer(nom: string): string {
return `Bonjour, ${nom}!`;
}
saluer("Alice"); // fonctionne
saluer(123); // Erreur : L'argument de type 'number' n'est pas assignable au type 'string'.TypeScript s'assure que la fonction saluer accepte uniquement un string et renvoie un string.
4. Inférence de Type
TypeScript peut inférer les types même si vous ne les déclarez pas explicitement.
Exemple :
typescriptCopy codelet score = 100; // inféré comme étant un number score = "élevé"; // Erreur : Le type 'string' n'est pas assignable au type 'number'.
5. Interfaces
Les interfaces définissent la structure d'un objet. Elles agissent comme un contrat sur ce à quoi un objet doit ressembler.
Exemple :
typescriptCopy codeinterface Personne { nom: string; age: number; estEtudiant: boolean; } const utilisateur: Personne = { nom: "Bob", age: 22, estEtudiant: true, };Maintenant, si vous essayez d'omettre ou d'ajouter des propriétés supplémentaires, TypeScript renverra une erreur.
6. Classes
TypeScript prend également en charge la programmation orientée objet avec des classes.
Exemple :
typescriptCopy codeclass Voiture { modele: string; annee: number; constructor(modele: string, annee: number) { this.modele = modele; this.annee = annee; } afficherInfo(): void { console.log(`${this.modele} a été fabriqué en ${this.annee}.`); } } const maVoiture = new Voiture("Toyota", 2020); maVoiture.afficherInfo(); // Toyota a été fabriqué en 2020.
7. Génériques
Les génériques vous permettent de créer des composants réutilisables qui fonctionnent avec différents types.
Exemple :
typescriptCopy codefunction identite<T>(valeur: T): T {
return valeur;
}
console.log(identite<string>("TypeScript"));
console.log(identite<number>(42));La fonction identite peut accepter une valeur de tout type, et TypeScript s'assure que le type de retour correspond.
8. Types Union
Les types union permettent à une variable ou un paramètre d'accepter plusieurs types.
Exemple :
typescriptCopy codelet valeur: string | number; valeur = "Bonjour"; valeur = 123; // valeur = true; // Erreur : Le type 'boolean' n'est pas assignable au type 'string | number'.
9. Propriétés Optionnelles
Vous pouvez marquer des propriétés comme optionnelles en utilisant l'opérateur ?.
Exemple :
typescriptCopy codeinterface Utilisateur { nomUtilisateur: string; email?: string; // optionnel } const utilisateur1: Utilisateur = { nomUtilisateur: "Alice" }; const utilisateur2: Utilisateur = { nomUtilisateur: "Bob", email: "bob@example.com" };
10. Compiler et Exécuter TypeScript
Vous pouvez compiler TypeScript en JavaScript avec :bashCopy codetsc fichier.tsCela génère un fichier .js que vous pouvez exécuter avec Node.js ou dans un navigateur.
Conclusion
TypeScript améliore JavaScript en introduisant des types, rendant votre code plus sûr et plus facile à maintenir. En 5 minutes, vous avez appris à :
Utiliser des annotations de type de base.
Écrire des fonctions avec vérification de type.
Utiliser des interfaces et des classes.
Travailler avec des génériques et des types union.
Prêt à aller plus loin ? Continuez à pratiquer !