Maison > interface Web > js tutoriel > TypeScript : la cape de super-héros de JavaScript

TypeScript : la cape de super-héros de JavaScript

Susan Sarandon
Libérer: 2024-10-27 20:45:29
original
1051 Les gens l'ont consulté

TypeScript: JavaScript

Pourquoi ajouter des types à JavaScript ?

Imaginez ceci : vous êtes en train de coder avec plaisir en JavaScript, quand tout à coup : "Impossible de lire la propriété 'nom' de non défini". Ugh, nous sommes tous passés par là ! TypeScript, c'est comme avoir un ami qui détecte ces erreurs avant qu'elles ne se produisent.

L'histoire d'origine

JavaScript est comme Peter Parker avant la morsure d'araignée : un grand potentiel, mais sujet aux accidents. TypeScript est la morsure d'araignée qui donne des super pouvoirs à JavaScript. Il ajoute un système de type qui permet de détecter les bogues plus tôt et rend votre code plus fiable.

Votre première aventure TypeScript

Commençons par une simple fonction JavaScript et transformons-la en TypeScript :

// JavaScript
function greet(name) {
    return "Hello, " + name + "!";
}
Copier après la connexion

Maintenant, ajoutons un peu de magie TypeScript :

// TypeScript
function greet(name: string): string {
    return "Hello, " + name + "!";
}
Copier après la connexion

Tu vois ça : ficelle ? C'est TypeScript nous disant "cette fonction prend une chaîne et renvoie une chaîne". Maintenant, essayez ceci :

greet(123); // Error: Argument of type 'number' is not assignable to parameter of type 'string'
Copier après la connexion

TypeScript vient de nous sauver d'un bug potentiel ! ?

Types de base : vos nouveaux super pouvoirs

Explorons quelques types TypeScript de base :

// Basic types
let heroName: string = "Spider-Man";
let age: number = 25;
let isAvenger: boolean = true;
let powers: string[] = ["web-slinging", "wall-crawling"];

// Object type
let hero: {
    name: string;
    age: number;
    powers: string[];
} = {
    name: "Spider-Man",
    age: 25,
    powers: ["web-slinging", "wall-crawling"]
};
Copier après la connexion

Interfaces : création de vos propres types

Les interfaces sont comme des plans d'objets. Ils sont super utiles pour définir la forme de vos données :

interface Hero {
    name: string;
    age: number;
    powers: string[];
    catchPhrase?: string; // Optional property
}

function introduceHero(hero: Hero): void {
    console.log(`I am ${hero.name}, and I'm ${hero.age} years old!`);
    if (hero.catchPhrase) {
        console.log(hero.catchPhrase);
    }
}

const spiderMan: Hero = {
    name: "Spider-Man",
    age: 25,
    powers: ["web-slinging", "wall-crawling"]
};

introduceHero(spiderMan);
Copier après la connexion

Alias ​​de type : vos types personnalisés

Parfois, vous souhaitez créer vos propres combinaisons de types :

type PowerLevel = 'rookie' | 'intermediate' | 'expert';

interface Hero {
    name: string;
    powerLevel: PowerLevel;
}

const batman: Hero = {
    name: "Batman",
    powerLevel: "expert" // TypeScript will ensure this is one of the allowed values
};
Copier après la connexion

Génériques : la flexibilité ultime

Les génériques sont comme des caractères génériques qui rendent votre code plus réutilisable :

function createHeroTeam<T>(members: T[]): T[] {
    return [...members];
}

interface Superhero {
    name: string;
    power: string;
}

interface Villain {
    name: string;
    evilPlan: string;
}

const heroes = createHeroTeam<Superhero>([
    { name: "Iron Man", power: "Technology" },
    { name: "Thor", power: "Lightning" }
]);

const villains = createHeroTeam<Villain>([
    { name: "Thanos", evilPlan: "Collect infinity stones" }
]);
Copier après la connexion

Exemple concret : une application Todo

Créons une application de tâches simple avec TypeScript :

interface Todo {
    id: number;
    title: string;
    completed: boolean;
    dueDate?: Date;
}

class TodoList {
    private todos: Todo[] = [];

    addTodo(title: string, dueDate?: Date): void {
        const todo: Todo = {
            id: Date.now(),
            title,
            completed: false,
            dueDate
        };
        this.todos.push(todo);
    }

    toggleTodo(id: number): void {
        const todo = this.todos.find(t => t.id === id);
        if (todo) {
            todo.completed = !todo.completed;
        }
    }

    getTodos(): Todo[] {
        return this.todos;
    }
}

// Usage
const myTodos = new TodoList();
myTodos.addTodo("Learn TypeScript with baransel.dev");
myTodos.addTodo("Build awesome apps", new Date("2024-10-24"));
Copier après la connexion

TypeScript avec React

TypeScript et React sont comme du beurre de cacahuète et de la gelée. Voici un exemple rapide :

interface Props {
    name: string;
    age: number;
    onSuperPower?: () => void;
}

const HeroCard: React.FC<Props> = ({ name, age, onSuperPower }) => {
    return (
        <div>
            <h2>{name}</h2>
            <p>Age: {age}</p>
            {onSuperPower && (
                <button onClick={onSuperPower}>
                    Activate Super Power!
                </button>
            )}
        </div>
    );
};
Copier après la connexion

Trucs et astuces

  1. Commencez simple : commencez par les types de base et ajoutez progressivement des types plus complexes.
  2. Utilisez le compilateur : le compilateur de TypeScript est votre ami - faites attention à ses erreurs.
  3. Ne tapez pas trop : Parfois, n'importe lequel est acceptable (mais utilisez-le avec parcimonie !).
  4. Activer le mode strict : Ajoutez "strict": true à votre tsconfig.json pour une protection maximale.

Problèmes courants et comment les résoudre

// Problem: Object is possibly 'undefined'
const user = users.find(u => u.id === 123);
console.log(user.name); // Error!

// Solution: Optional chaining
console.log(user?.name);

// Problem: Type assertions
const input = document.getElementById('myInput'); // Type: HTMLElement | null
const value = input.value; // Error!

// Solution: Type assertion or type guard
const value = (input as HTMLInputElement).value;
// or
if (input instanceof HTMLInputElement) {
    const value = input.value;
}
Copier après la connexion

Conclusion

TypeScript peut sembler être un travail supplémentaire au début, mais c'est comme avoir un super pouvoir qui vous aide à détecter les bugs avant qu'ils ne surviennent. Commencez petit, ajoutez progressivement d'autres types, et avant de vous en rendre compte, vous vous demanderez comment vous avez pu vivre sans !

Rappelez-vous :

  • Les types sont vos amis
  • Le compilateur est votre acolyte
  • La pratique rend parfait

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