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.

Разрешены строковые или логические значения, и здесь вы не увидите никаких ошибок.

Вы можете ознакомиться с полными наборами и использованием здесь. Таким образом, каждый раз, когда вы видите эту ошибку, вы можете быть уверены, что у вас есть несколько вариантов определения данных функции, но они не подходят для определенных перегруженных интерфейсов. Очень навороченный, очень мощный. ✨

Спасибо за чтение. Ура, Лукас. Может быть, подумайте купите мне кофе.