Maison > Article > interface Web > Maîtriser TypeScript : Comprendre la puissance des extensions
Le mot-clé extends dans TypeScript est une sorte de couteau suisse. Il est utilisé dans plusieurs contextes, notamment l'héritage, les génériques et les types conditionnels. Comprendre comment utiliser efficacement extends peut conduire à un code plus robuste, réutilisable et de type sécurisé.
L'une des principales utilisations des extensions est l'héritage, vous permettant de créer de nouvelles interfaces ou classes qui s'appuient sur celles existantes.
interface User { firstName: string; lastName: string; email: string; } interface StaffUser extends User { roles: string[]; department: string; } const regularUser: User = { firstName: "John", lastName: "Doe", email: "john@example.com" }; const staffMember: StaffUser = { firstName: "Jane", lastName: "Smith", email: "jane@company.com", roles: ["Manager", "Developer"], department: "Engineering" };
Dans cet exemple, StaffUser étend User, héritant de toutes ses propriétés et en ajoutant de nouvelles. Cela nous permet de créer des types plus spécifiques basés sur des types plus généraux.
Le mot-clé extends est également utilisé pour l'héritage de classe :
class Animal { constructor(public name: string) {} makeSound(): void { console.log("Some generic animal sound"); } } class Dog extends Animal { constructor(name: string, public breed: string) { super(name); } makeSound(): void { console.log("Woof! Woof!"); } fetch(): void { console.log(`${this.name} is fetching the ball!`); } } const myDog = new Dog("Buddy", "Golden Retriever"); myDog.makeSound(); // Output: Woof! Woof! myDog.fetch(); // Output: Buddy is fetching the ball!
Ici, Dog étend Animal, en héritant de ses propriétés et de ses méthodes, et en ajoutant également les siennes.
Le mot-clé extends est crucial lorsque l'on travaille avec des génériques, car il nous permet de limiter les types pouvant être utilisés avec une fonction ou une classe générique.
interface Printable { print(): void; } function printObject<T extends Printable>(obj: T) { obj.print(); } class Book implements Printable { print() { console.log("Printing a book."); } } class Magazine implements Printable { print() { console.log("Printing a magazine."); } } const myBook = new Book(); const myMagazine = new Magazine(); printObject(myBook); // Output: Printing a book. printObject(myMagazine); // Output: Printing a magazine. // printObject(42); // Error, number doesn't have a 'print' method
En résumé, le mot-clé extends dans le contexte de la fonction printObject
T extends U ? X : Y
type ExtractNumber<T> = T extends number ? T : never; type NumberOrNever = ExtractNumber<number>; // number type StringOrNever = ExtractNumber<string>; // never
Ici, le type ExtractNumber prend un paramètre de type T. Le type conditionnel vérifie si T étend le type numérique. si tel est le cas, le type est résolu en T (qui est le type numérique). Si ce n'est pas le cas, le type est résolu à jamais.
Maintenant, considérons l'expression A | B | C étend A. Cela peut sembler contre-intuitif au début, mais dans TypeScript, cette condition est en réalité fausse. Voici pourquoi :
type Fruit = "apple" | "banana" | "cherry"; type CitrusFruit = "lemon" | "orange"; type IsCitrus<T> = T extends CitrusFruit ? true : false; type Test1 = IsCitrus<"lemon">; // true type Test2 = IsCitrus<"apple">; // false type Test3 = IsCitrus<Fruit>; // false
Dans cet exemple, IsCitrus
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!