TypeScript : la cape de super-héros de 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 + "!";
}

Maintenant, ajoutons un peu de magie TypeScript :

// TypeScript
function greet(name: string): string {
    return "Hello, " + name + "!";
}

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'

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"]
};

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);

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
};

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" }
]);

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"));

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>
    );
};

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;
}

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!