TS2769: этому вызову не соответствует ни одна перегрузка.
Знакомый? 🤔 💭 Верно. Мы вернемся к описанию ошибки Typescript. Но сначала нам нужен необычный контекст.
Так что недавно я выпустил npm-пакет vue-use-variant. Это простой обработчик, который помогает вам работать с длинными определениями классов CSS, определяя варианты для ваших блоков стилей. Написано специально для vue.js и Tilewind. Однако его можно использовать с Bootstrap и React или любым другим сочетанием подобных инструментов.
Но, поскольку он был написан для Vue, я хочу использовать новый метод ref Composition API, который создает специальный объект со свойством value для сохранения реактивных ссылок на данные. . В то же время хотел сохранить возможность использовать обычные объекты с вариантами стилей CSS.
Объекты будут / могут выглядеть примерно так.
const variantRef = { value: { button: 'font-sm rounded' } } const variant = { button: 'font-sm rounded' }
Это означает, что если у меня есть функция, в которую я хотел бы передать аргумент с созданными объектами, мне нужно определить для нее два разных интерфейса. Это не так хорошо и эффективно. Посмотри.
Итак, как с этим бороться? Как сообщить пользователю / разработчику, что он может использовать два разных тела объекта и при этом правильно их использовать? Здесь возникает особенность перегрузки функции Typescript. Вот какое-то официальное описание.
TypeScript предоставляет концепцию перегрузки функций. У вас может быть несколько функций с одним и тем же именем, но с разными типами параметров и типом возвращаемого значения. Однако количество параметров должно быть таким же.
Это нормально, но как им пользоваться? 🤔 Вот полный пример.
Здесь вы можете увидеть три определения функций. Один для нашего обычного объекта, один для конкретного Vue и один, который их перегружает. Таким образом, пока мы будем использовать нашу функцию, мы сможем передать в качестве аргумента два разных тела объекта, но, тем не менее, мы будем в порядке с нашими типами. И в тот момент, когда мы используем, например, число в качестве значения объекта, вот так…
const variantRef = { value: { button: 44 } } const variant = { button: 44 }
… Мы получим ошибку.
TS2769: No overload matches this call.
Разрешены строковые или логические значения, и здесь вы не увидите никаких ошибок.
Вы можете ознакомиться с полными наборами и использованием здесь. Таким образом, каждый раз, когда вы видите эту ошибку, вы можете быть уверены, что у вас есть несколько вариантов определения данных функции, но они не подходят для определенных перегруженных интерфейсов. Очень навороченный, очень мощный. ✨
Спасибо за чтение. Ура, Лукас. Может быть, подумайте купите мне кофе.