Как добавить функцию в интерфейс React Typescript

#reactjs #typescript

#reactjs #typescript

Вопрос:

У меня такая настройка:

 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.!!
}
 

Смотрите комментарий выше в Pokemon . По сути, я хочу, чтобы функция в Pokemon интерфейсе использовала type ключ для индексации в pokemonTypes const . Как я мог это сделать? Спасибо!

Ответ №1:

Просто: просто определите их как функции со стрелками следующим образом:

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

 

если вы хотите иметь разные типы в зависимости от того, какой это тип, вам нужно будет объявить его следующим образом

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

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

//...and so on

type Pokemon = WaterPokemon | FirePokemon;
 

Помните, что в typescript все ваши типы должны быть статическими и неизменяемыми, чтобы набор текста и автокоррекция работали, поскольку компилятор typescript фактически не выполняет никакого кода, а скорее проверяет соответствие типов ваших переменных и т. Д. Для этого используется статический анализ кода, но ваш объект pokemonTypes может изменяться во время выполнения.