web-dev-qa-db-fra.com

Quelqu'un peut-il expliquer en quoi consistent les métadonnées de réflexion es7?

Étudie ES6, JSPM et angular2 depuis une semaine maintenant et j'ai trouvé ce dépôt ES6-loader

si nous regardons l'index.html dans le script du bas, vous verrez

 System.import('reflect-metadata')
  .then(function() {
    return System.import('app/index');
  })
  .catch(console.log.bind(console));

Ceci utilise le polyfill systemjs de JSPM pour obtenir le import d'ES6.

Question: Que font réellement les métadonnées de réflexion dans cette situation? npm reflect-meta Plus je lis la documentation, moins je comprends ce qu'elle fait?

npmecmascript-6jspmsystemjsecmascript-7
25
Matthew Harwood

'reflect-metadata' est un package qui est une proposition pour ES7. Il permet d'inclure des métadonnées dans une classe ou une fonction; c'est essentiellement sucre de syntaxe .

Exemple. Angular 2 ES6:

@Component({selector: "thingy"})
@View({template: "<div><h1>Hello everyone</h1></div>"})
class Thingy{};

Comme vous pouvez le voir, il n'y a pas de point-virgule après @Component et @View. En effet, ce sont essentiellement des chaînes de (méta) données sur la classe.

Regardons maintenant ce même code dans Angular 2 mais dans ES5:

function Thingy(){}
Thingy.annotations = [
    new angular.ComponentAnnotation({
        selector: "thingy"
    }),
    new angular.ViewAnnotation({

        template: "<div><h1>Hello everyone</h1></div>"
    })
];

Comme vous pouvez le voir, le symbole @ résume beaucoup la propriété d'annotations d'une classe et en fait plus D.R.Y .

Aller plus loin Angular sait que les annotations sont un peu abstraites pour le nouvel utilisateur. De plus, l'ES5 est tout simplement trop verbeux. C'est pourquoi ils ont fait a.js ce qui améliorera l'interfaçage avec les annotations:

Vidéo pour comprendre cela

50
Matthew Harwood