# Comment traverser correctement un objet dans Ts

Comment traverser correctement un objet dans Ts

Article publié pour la première fois sur un blog personnel

Ceci est un court essai...

Javascript

Avant d'expliquer comment parcourir un objet avec Ts, parlons de la façon de l'implémenter dans Js, for...in, Object.keys, un exemple simple :

// for...in
const obj = {
  name: 'itsuki',
  address: 'hangzhou',
};
for (const key in obj) {
  console.log(key, obj[key].toUpperCase());
}
// Object.keys
Object.keys(obj).forEach(key => {
  console.log(key, obj[key].toUpperCase());
});

// 输出
// name ITSUKI
// address HANGZHOU
复制代码

Manuscrit

pour... dans

Mais dans TypeScript, si vous l'utilisez directement, vous trouverez une erreur.

type Person = {
  name: string;
  address: string;
};
const obj: Person = {
  name: 'itsuki',
  address: 'hangzhou',
};
function print(obj: Person) {
  for (const key in obj) {
    // ❌
    // key:string 不能分配给 { name:string; age:number }类型
    console.log(key, obj[key].toUpperCase());
  }
}
print(obj)
复制代码

Ce que nous savons for...inet Object.keysobtenons est la clé de l'objet, et toutes les clés de l'objet sont des chaînes, il ne peut donc pas être attribué Personà name, address.

Mais nous pouvons keyofrésoudre ce problème.

function print(obj:Person){
  let key: keyof Person;
  for (key in obj) {
    // ✅
    console.log(key, obj[key].toUpperCase());
  }
}
复制代码

Object.keys

Lorsqu'il est utilisé Object.keys, nous pouvons utiliser des asopérateurs pour résoudre.

function print(obj: Person) {
  Object.keys(obj).forEach((k) => {
    // ✅
    console.log(k, obj[k as keyof Person].toUpperCase());
  });
}

复制代码

Nous pouvons résumer cela dans une fonction :

function getKeys<T>(obj: T) {
  return Object.keys(obj) as Array<keyof T>;
}

getKeys(obj); // (keyof Person)[]
复制代码

Objet.entrées

Nous pouvons également utiliser Object.entries()pour itérer sur des objets.

Object.entries(obj).forEach(([k, v]) => {
  console.log(k, v);
});
复制代码

pense

Ce qui suit est ma propre pensée, si je me trompe, corrigez-moi s'il vous plaît

Ce que je veux Object.keys()retourner en est un string[]car il est déterminé au moment de l'exécution et nous savons que TypeScriptc'est juste une vérification de type statique, même si nous utilisons keyof Personreturn name | address, mais nous ne pouvons pas être sûrs qu'il s'agit des deux champs au moment de l'exécution.

Par exemple:

const obj2 = {
  name: 'itsuki',
  address: 'hangzhou',
  age: 20,
};

print(obj2)
// 编译时: ✅, 因为它有name、address属性
// 运行时: ❌, 因为age字段是number, 没有toUpperCase方法
复制代码

Puis j'ai trouvé cette phrase dans le numéro Github :

Les types dans TS sont ouverts. Par conséquent, keysofil peut y avoir moins que toutes les propriétés obtenues lors de l'exécution.

Cela m'a fait comprendre encore plus pourquoi il en keys()renvoyait un string[]au lieu d'un (keyof Person)[].