TypeScript не выбирает перегрузки

Question

Я относительно новичок в TypeScript, поэтому я думаю, что либо делаю что-то не так, либо что-то в моей настройке не так.

Мой код:

import Animated, { Value } from "react-native-reanimated";
import { useRef } from "react";

const useLazyRef = <T>(initializer: () => T) => {
  const ref = useRef<T>();
  if (ref.current === undefined) {
    ref.current = initializer();
  }
  return ref.current;
};

declare type Atomic = string | number | boolean;
type UseValues = {
  <V extends Atomic>(v: V): [Animated.Value<V>];
  <V1 extends Atomic, V2 extends Atomic>(v1: V1, v2: V2): [
    Animated.Value<V1>,
    Animated.Value<V2>
  ];
  <V1 extends Atomic, V2 extends Atomic, V3 extends Atomic>(
    v1: V1,
    v2: V2,
    v3: V3
  ): [Animated.Value<V1>, Animated.Value<V2>, Animated.Value<V3>];
  <V1 extends Atomic, V2 extends Atomic, V3 extends Atomic, V4 extends Atomic>(
    v1: V1,
    v2: V2,
    v3: V3,
    v4: V4
  ): [
    Animated.Value<V1>,
    Animated.Value<V2>,
    Animated.Value<V3>,
    Animated.Value<V4>
  ];
  <
    V1 extends Atomic,
    V2 extends Atomic,
    V3 extends Atomic,
    V4 extends Atomic,
    V5 extends Atomic
  >(
    v1: V1,
    v2: V2,
    v3: V3,
    v4: V4,
    v5: V5
  ): [
    Animated.Value<V1>,
    Animated.Value<V2>,
    Animated.Value<V3>,
    Animated.Value<V4>,
    Animated.Value<V5>
  ];
  <V extends Atomic>(...values: V[]): Animated.Value<V>[];
};

export const useValues = ((<V extends Atomic>(...values: [V, ...V[]]) =>
  useLazyRef(() => values.map((v) => new Value(v)))) as unknown) as UseValues;

const Yup = () => {
  const [one, two, three] = useValues([0, 0, 0]);
  return [one, two, three];
};

export default Yup;

Это длинный но баси c. Есть несколько перегрузок, но const [one, two, three] = useValues([0, 0, 0]); следует использовать третью перегрузку:

<V1 extends Atomic, V2 extends Atomic, V3 extends Atomic>(
    v1: V1,
    v2: V2,
    v3: V3
  ): [Animated.Value<V1>, Animated.Value<V2>, Animated.Value<V3>];

Я получаю два предупреждения:

1. const [one, two, three] показывает 'Тип кортежа' [ AnimatedValue] 'длины' 1 'не имеет элемента с индексом' 2 '. ts (2493) `- Это уже странно. Это относится ко второй перегрузке, которая является кортежем, и игнорирует третью перегрузку?
2. useValues ​​([0, 0, 0]) выдает предупреждение Overload 2 of 6, '(...values: Atomic[]): AnimatedValue<Atomic>[]', gave the following error. Type 'number' is not assignable to type 'string'. ts(2769) - снова это относится ко второй перегрузке

Так что я немного поигрался с этим, чтобы отладить. Мой новый код:

import Animated from "react-native-reanimated";

declare type Atomic = string | number | boolean;
declare type UseValues = {
  <V1 extends Atomic, V2 extends Atomic, V3 extends Atomic>(
    v1: V1,
    v2: V2,
    v3: V3
  ): [Animated.Value<V1>, Animated.Value<V2>, Animated.Value<V3>];
};
export declare const useValues: UseValues;

const Yup = () => {
  const [one, two, three] = useValues([0, 0, 0]);
  return [one, two, three];
};

export default Yup;

Теперь я получаю предупреждение для useValues ​​([0, 0, 0]):

const useValues: <Atomic, Atomic, Atomic>(v1: Atomic, v2: Atomic, v3: Atomic) => [Animated.Value<Atomic>, Animated.Value<Atomic>, Animated.Value<...>]
Expected 3 arguments, but got 1.ts(2554)
testing.ts(7, 5): An argument for 'v2' was not provided.

Я явно передаю массив (как следовало ожидать) с тремя числами.

ОБНОВЛЕНИЕ

Я обновил свой код, чтобы отразить, как на самом деле происходит присвоение. Извините за путаницу. Для меня это тоже в новинку.

Answer 1

Это заставляет меня думать, что useValues - это функция, возвращающая массив. И вы деструктурируете присваивание переменным один, два, три.

  const [one, two, three] = useValues([0, 0, 0]);

Мне также любопытно, что произойдет, если вы вызовете useValues ​​с 3 аргументами, например const [one, two, three] = useValues(0, 0, 0);

I я не знаком с этим синтаксисом для объявления типа. На первый взгляд, type UseValues - это объект.

declare type UseValues = {
  <V1 extends Atomic, V2 extends Atomic, V3 extends Atomic>(
    v1: V1,
    v2: V2,
    v3: V3
  ): [Animated.Value<V1>, Animated.Value<V2>, Animated.Value<V3>];
};

Где происходит присвоение useValues?

Извините за неответ. Проголосовали, чтобы узнать, смогу ли я тоже чему-нибудь научиться.