reactjs - Hvordan man tilføjer en funktion i en interface React Typescript

Jeg har en opsætning som denne:

enum PokemonType {
    Dark = "DARK"
    Light = "Light"
}

const pokemonTypes: {[key: string]: PokemonInfo} = {
    "DARK": {
        info: "Dark is bad",
        color: "black"
    },
    "Light": {
        info: "Light is good",
        color: "white"
    }
}

interface Pokemon {
    type: PokemonType,

    // !!Some kind of function here to use type
    // to index into pokemonTypes.!!
}

Se kommentaren ovenfor i Pokemon. Grundlæggende vil jeg have en funktion i Pokemon-grænsefladen til at bruge type-nøglen til at indeksere i pokemonTypes-konstanten. Hvordan kunne jeg gøre dette? Tak!

Svar #1

Nem: Definer dem bare som pilfunktioner sådan her:

interface Pokemon {
  type: PokemonType;
  attack: () => void;
  eat: (food: Food) => {liked: boolean, health: number};
  isType: (type: PokemonType) => boolean;
}

hvis du vil have forskellige typer afhængigt af, hvilken slags type det er, skal du erklære det på denne måde

interface WaterPokemon {
 type: PokemonType.WATER;
 squirt: () => void;
}

interface FirePokemon {
 type: PokemonType.LIGHT;
 spewFire: () => void;
}

//...and so on

type Pokemon = WaterPokemon | FirePokemon;

Husk, at i TypeScript skal alle dine typer være statiske og uforanderlige for at typning og autokorrektion kan fungere, eftersom TypeScript-kompileren faktisk ikke udfører nogen kode, men i stedet tjekker, at typerne af dine variabler osv. er konsistente. Den bruger statisk kodeanalyse til at gøre det, men dit pokemonTypes-objekt er foranderligt ved køretid.

Relaterede artikler