Partagez une bonne question d'entretien TS (comprenant 3 niveaux) et voyez à quel niveau vous pouvez répondre !-js tutoriel-php.cn

Partagez une bonne question d'entretien TS (comprenant 3 niveaux) et voyez à quel niveau vous pouvez répondre !

Je suis récemment tombé sur une bonne question d'entretien TS et j'aimerais la partager.

Cette question comporte 3 niveaux, examinons-les un par un.

Les exigences de la première couche sont les suivantes :

Implémentez une fonction zip pour fusionner les éléments de deux tableaux dans l'ordre, par exemple, lors de la saisie de [1,2,3], [4,5,6], Renvoie [[1,4], [2,5],[3,6]]

Cette couche prend à chaque fois un élément de deux tableaux, le fusionne et le place dans le tableau, puis continue de traiter le suivant one. Effectuez ce processus de manière récursive jusqu'à ce que le tableau soit vide.

function zip(target, source) {
  if (!target.length || !source.length) return [];

  const [one, ...rest1] = target;
  const [other, ...rest2] = source;

  return [[one, other], ...zip(rest1, rest2)];
}

Copier après la connexion

Le résultat est bon :

Le premier niveau est relativement simple, regardons ensuite les exigences du deuxième niveau :

Définissez le type ts pour cette fonction zip (deux façons d'écrire)

fonction Il existe deux formes de définition :

Déclarer une fonction directement via function :

function func() {}

Copier après la connexion

et déclarer une fonction anonyme et l'attribuer à une variable :

const func = () => {}

Copier après la connexion

Les types de paramètres et les valeurs de retour sont tous deux des tableaux, mais les spécifiques le type n'est pas connu, vous pouvez donc écrire inconnu[ ].

Donc les définitions des deux types de fonction sont comme ceci :

Il s'agit également directement d'une fonction déclarant le type de fonction et d'une interface déclarant le type de fonction puis de l'ajouter au type de variable.

Le type d'élément spécifique n'étant pas connu, inconnu est utilisé.

Vous pouvez demander ici la différence entre any et inconnu :

Tous deux any et inconnu peuvent recevoir n'importe quel type :

Mais any peut également être attribué à n'importe quel type, mais inconnu ne le peut pas.

Ceci est simplement utilisé pour recevoir d'autres types, donc l'inconnu est plus approprié et plus sûr que n'importe quel autre.

Ce niveau est également une syntaxe ts relativement basique, et le troisième niveau devient plus difficile :

Utilisez la programmation de type pour obtenir des astuces de type précises, telles que passer des paramètres dans [1,2,3], [4,5, 6 ], alors le type de la valeur de retour doit indiquer [[1,4], [2,5],[3,6]]

Le type de valeur de retour doit être précis ici, et nous devons le déterminer en fonction du type du paramètre. Générez dynamiquement des types de valeurs de retour.

C'est tout :

Déclarez deux paramètres de type Target et Source, et la contrainte est inconnue[], qui est un type de tableau de n'importe quel type d'élément.

Ces deux paramètres de type sont les types des deux paramètres transmis.

La valeur de retour est calculée via Zip.

Ensuite, nous devons implémenter le type avancé de Zip :

Les paramètres de type transmis sont deux types de tableaux, et nous devons également en extraire chaque élément et les fusionner ensemble.

La correspondance de modèles peut être utilisée pour extraire des éléments :

Ce type peut donc être défini comme ceci :

type Zip<One extends unknown[], Other extends unknown[]> =
    One extends [infer OneFirst,...infer Rest1]
      ? Other extends [infer OtherFirst, ...infer Rest2]
        ? [[OneFirst, OtherFirst], ...Zip<Rest1, Rest2>]
        : []
      : [];

Copier après la connexion

Extraire respectivement le premier élément des deux tableaux et construire un nouveau tableau. Faites ensuite cela de manière récursive pour le tableau restant jusqu'à ce que le tableau soit vide.

Cela permet d'obtenir le type avancé que nous souhaitons :

Mais si vous l'ajoutez comme valeur de retour à la fonction, une erreur sera signalée :

Parce que vous ne savez pas quels sont les paramètres lorsque vous déclarez la fonction, naturellement La valeur de Zip ne peut pas être calculée, il y aura donc une incompatibilité de type ici :

Que devons-nous faire ?

Peut être résolu avec la surcharge de fonctions :

ts prend en charge la surcharge de fonctions. Vous pouvez écrire des définitions de type pour plusieurs fonctions portant le même nom, et enfin écrire l'implémentation de la fonction, de sorte que lorsque cette fonction est utilisée, elle est utilisée. sera basé sur le type du paramètre pour correspondre aux types de fonctions.

La fonction que nous utilisons pour la programmation de types ne signalera pas d'erreur si elle est écrite de cette manière.

Jetons un coup d'oeil :

Pourquoi le type de valeur de retour est-il incorrect ?

En fait, le type de fonction correspondant est correct pour le moment, mais celui déduit n'est pas un type littéral.

Vous pouvez ajouter comme const à ce moment.

Mais ajouter as const déduira readonly [1,2,3]

Les types ne correspondront pas, vous devez donc ajouter readonly:

à la déclaration des paramètres de type

Mais le type de fonction Zip ne correspond plus.

Devrions-nous ajouter en lecture seule à tous les endroits où ce type est utilisé ?

Pas besoin, pouvons-nous simplement supprimer la modification en lecture seule ?

Typescript a un type avancé intégré en lecture seule :

Vous pouvez ajouter une modification en lecture seule à chaque index du type d'index :

Mais il n'y a pas de type avancé qui supprime la modification en lecture seule. Nous pouvons implémenter. nous-mêmes :

Construisez un nouveau type d'index en utilisant la syntaxe du type de mappage et ajoutez -readonly pour supprimer la modification en lecture seule.

Certains étudiants peuvent se demander : le type tableau est-il également un type index ?

Oui, le type index est un type qui regroupe plusieurs éléments, donc les objets, les tableaux et les classes le sont tous.

On peut donc naturellement l'utiliser sur des tableaux :

(Pour être précis, ça s'appelle un tuple. Un tuple est un tableau avec un nombre fixe d'éléments)

Ensuite, il suffit d'utiliser Just Remove readonly from Mutable :

Réessayez :

Terminé ! Le type de valeur de retour est désormais correct.

Mais il y a un autre problème. Si le littéral n'est pas transmis directement, le type littéral ne peut pas être déduit. Cela semble être faux :

Mais n'avons-nous pas tous déclaré des types surchargés ?

Si le type littéral ne peut pas être déduit, il devrait correspondre à celui-ci :

Mais en fait, il correspond au premier :

À ce stade, changez simplement l'ordre des deux types de fonctions. Maintenant :

La situation des paramètres littéraux est toujours correcte à l'heure actuelle :

Pourquoi ?

Parce que les types de fonctions surchargées correspondent de haut en bas. Tant qu'une correspond, elle sera appliquée.

Dans le cas de valeurs non littérales, le type est number[], qui peut correspondre au type d'inconnu[], de sorte que le type de fonction prend effet.

Dans le cas des littéraux, readonly [1,2,3] est déduit, avec readonly pour qu'il ne corresponde pas à unknown[].

De cette façon, le type de fonction approprié est appliqué dans les deux cas.

Le code entier est comme ceci :

type Zip<One extends unknown[], Other extends unknown[]> = One extends [
  infer OneFirst,
  ...infer Rest1
]
  ? Other extends [infer OtherFirst, ...infer Rest2]
    ? [[OneFirst, OtherFirst], ...Zip<Rest1, Rest2>]
    : []
  : [];

type Mutable<Obj> = {
  -readonly [Key in keyof Obj]: Obj[Key];
};

function zip(target: unknown[], source: unknown[]): unknown[];

function zip<Target extends readonly unknown[], Source extends readonly unknown[]>(
  target: Target,
  source: Source
): Zip<Mutable<Target>, Mutable<Source>>;

function zip(target: unknown[], source: unknown[]) {
  if (!target.length || !source.length) return [];

  const [one, ...rest1] = target;
  const [other, ...rest2] = source;

  return [[one, other], ...zip(rest1, rest2)];
}

const result = zip([1, 2, 3] as const, [4, 5, 6] as const);

const arr1 = [1, 2, 3];
const arr2 = [4, &#39;5&#39;, 6];

const result2 = zip(arr1, arr2);

Copier après la connexion

ts playground 地址