{"id":2501,"date":"2015-09-19T12:25:46","date_gmt":"2015-09-19T10:25:46","guid":{"rendered":"https:\/\/www.angulararchitects.io\/?p=2501"},"modified":"2023-09-03T00:15:22","modified_gmt":"2023-09-02T22:15:22","slug":"ecmascript-6-module-in-typescript-1-5-nutzen","status":"publish","type":"post","link":"https:\/\/www.angulararchitects.io\/en\/blog\/ecmascript-6-module-in-typescript-1-5-nutzen\/","title":{"rendered":"EcmaScript-6-Module In TypeScript 1.5 Nutzen"},"content":{"rendered":"
\n

In der Vergangenheit musste jede geladene Seite explizit auf s\u00e4mtliche direkt oder indirekt ben\u00f6tigte Skript-Dateien verweisen. Da das nicht nur l\u00e4stig, sondern auch Fehleranf\u00e4llig ist, haben einige Teams zur Automatisierung dieser Aufgabe auf Build-Prozesse zur\u00fcckgriffen. Diese sind u. a. in der Lage, Verweise auf JavaScript-Dateien automatisiert in die einzelnen Seiten einzuf\u00fcgen.<\/p>\n

EcmaScript 6 bietet hierf\u00fcr mit seinem Modul-System eine bessere L\u00f6sung. Es sieht vor, dass jede Datei ein eigenes Modul mit einem eigenen Namensraum repr\u00e4sentiert. Somit sind die Zeiten vorbei, in denen Deklarationen allzu leicht den globalen Namensraum \u201everschmutzt\u201c haben. Auch die Notwendigkeit f\u00fcr sich selbst ausf\u00fchrende anonyme Funktionen wird somit umgangen. Dies f\u00fchrt letztendlich zu weniger Code und somit auch zu mehr \u00dcbersichtlichkeit. <\/p>\n

Ab TypeScript 1.5 kann man dieses neue Sprach-Feature nutzen. Durch eine Kompilierung in handels\u00fcbliches EcmaScript 5 l\u00e4sst sich der damit entwickelte Code in jedem Browser ausf\u00fchren.<\/p>\n

EcmaScript-Module kompilieren<\/h2>\n

F\u00fcr das Nachbilden von Modulen in EcmaScript 5 wurden in der Vergangenheit einige Muster beschrieben. Diese definieren Module als Funktionen, sodass sie einen eigenen Namensraum bekommen, und stellen die in anderen Modulen ben\u00f6tigten Konstrukte \u00fcber eine Datenstruktur zur Verf\u00fcgung. TypeScript 1.5 unterst\u00fctzt vier dieser Muster. Dazu geh\u00f6ren die aus der Welt von NodeJS bekannten CommonJS-Module und die von Require.js unterst\u00fctzte Asynchronous Module Definition (AMD). Daneben unterst\u00fctzt es ein aus der Welt von SystemJS bekanntes Format sowie die junge Universal Module Definition (UMD), welche unter anderem das CommonJS-Format und AMD vereint. <\/p>\n

Damit TypeScript Module nach EcmaScript 5 oder 3 kompilieren kann, ist das gew\u00fcnschte Modul-Format bekanntzugeben. Bei Nutzung von Visual Studio 2015 erfolgt dies \u00fcber die Projekteinstellungen (mehr dazu hier<\/a>). Im betrachteten Fall f\u00e4llt die Wahl auf das f\u00fcr den Einsatz in Browser konzipierte AMD. <\/p>\n

Kommt Visual Studio nicht zum Einsatz, sondern ein direkter Aufruf des TypeScript-Kompilers oder ein Werkzeug, wie Visual Studio Code, kann das Entwicklungs-Team das gew\u00fcnschte Modul-Format in der Datei tsconfig.json hinterlegen. Der TypeScript-Kompiler zieht die darin enthaltenen Einstellungen standardm\u00e4\u00dfig heran, wenn er sie im aktuellen Arbeitsverzeichnis findet. Bei Nutzung von Visual Studio Code ist das das Root-Verzeichnis der Anwendung. Ein Beispiel daf\u00fcr findet sich nachfolgend. Es legt ein weiteres Mal das AMD-Format fest, definiert das Source-Maps zu erstellen sind und weist TypeScript an, nach EcmaScript 5 zu kompilieren.<\/p>\n

{\n    \"compilerOptions\": {\n        \"module\": \"amd\",\n        \"sourceMap\": true,\n        \"target\": \"ES5\"\n    } \n}\n<\/code><\/pre>\n
Konstrukte aus Modul exportieren<\/h2>\n
M\u00f6chte ein Modul anderen Modulen Klassen, Funktionen oder Variablen zur Verf\u00fcgung stellen, muss es diese Konstrukte exportieren. Ein Beispiel daf\u00fcr bietet das n\u00e4chste Listing. Es zeigt den Inhalt einer Datei flug.ts, welche \u2013 wie ab EcmaScript 6 \u00fcblich \u2013 ein Modul bildet. Darin findet sich eine Klasse Flug mit einigen Eigenschaften. Abgesehen von den von TypeScript unterst\u00fctzten Typ-Angaben handelt es sich dabei um reines EcmaScript 6. Damit die Klasse Flug auch au\u00dferhalb des Modules zur Verf\u00fcgung steht, wurde es mit dem Schl\u00fcsselwort export markiert.<\/p>\n
Eine alternative Schreibweise findet man im Kommentar am Ende des Listings. Sie verzichtet zun\u00e4chst auf das Schl\u00fcsselwort export und deklariert somit die Klasse als modul-intern. Eine alleinstehende export-Anweisung definiert im Anschluss daran, welche internen Konstrukte zu ver\u00f6ffentlichen sind. Mehrere Konstrukte k\u00f6nnen dabei Komma-getrennt angegeben werden. Auf diese Weise lassen sich s\u00e4mtliche Exporte am Ende einer Datei gesammelt definieren.<\/p>\n
\/\/ flug.ts\nexport class Flug {\n    id: number;\n    fnr: string;\n    datum: Date;\n    abflugort: string;\n    zielort: string;\n    plaetze: number;\n    plaetzeFrei: number;\n}\n\n\/\/ Alternative\n\/\/   class Flug { [\u2026] }\n\/\/   export { Flug };\n<\/code><\/pre>\n
Exportiere Konstrukte importieren<\/h2>\n
Um exportierte Konstrukte in anderen Modulen zu nutzen, sind diese dort zu importieren. Hierzu sieht EcmaScript 6 das Schl\u00fcsselwort import vor. Ein Beispiel daf\u00fcr bietet Listing 3, welches den Inhalt einer Datei flugCalculator.ts zeigt. Zun\u00e4chst nutzt es eine import-Anweisung, um die in Listing 2 exportiere Klasse Flug zu importieren. Der Name dieser Klasse findet sich in geschweiften Klammern; der Name der Datei, welche Flug exportiert, findet sich innerhalb der auf das Schl\u00fcsselwort from folgenden Zeichenkette. Dateiendungen werden weggelassen. <\/p>\n
Dateien in anderen Ordnern sind durch die Angabe von Pfaden zu referenzieren. Beispielsweise verweist 'entities\/Flug' auf die Datei Flug im Ordner entities. Damit die Suche nach einer Datei relativ zur aktuellen Datei und nicht relativ zum Root der Web-Anwendung erfolgt, ist ein Pfad mit einem Punkt einzuleiten: '.\/entities\/Flug'.<\/p>\n
\/\/ flugCalculator.ts\nimport { Flug } from 'flug';\n\nexport class FlugCalculator {\n\n    static basePrice = 300;\n\n    calcPrice(flug: Flug) {\n        var p = flug.plaetze \/ flug.plaetzeFrei;\n        if (p >= 0.75) return FlugCalculator.basePrice \/ 2;\n        return FlugCalculator.basePrice;\n    } \n\n}\n<\/code><\/pre>\n
Module laden<\/h2>\n
F\u00fcr das Laden der Module ben\u00f6tigt die aufgerufene Seite einen sogenannten Module Loader. Beispiele daf\u00fcr sind RequireJS und SystemJS. Die hier betrachteten Beispiele nutzten letzteren, zumal dieser alle g\u00e4ngigen Modul-Formate unterst\u00fctzt. Es empfiehlt sich, SystemJS gemeinsam mit dem Package Manager JSPM zu nutzen. Dieser bezieht JavaScript-Bibliotheken, wie jQuery oder AngularJS, in Form von Modulen. Dazu greift er auf verschiedene Online-Repositories, wie GitHub, zu. Zum Installieren von JSPM nutzt das Entwicklungs-Team den Package-Manager von NodeJS: npm install -g jspm<\/code>. Ein Aufruf von jspm init<\/code> im Root der Anwendung richtet eine Konfigurationsdatei ein und versorgt das Projekt mit SystemJS.<\/p>\n
Nach dem Einbinden von SystemJS kann die Seite das gew\u00fcnschte Modul mit System.import laden:<\/p>\n
<script src=\"jspm_packages\/system.js\"><\/script>\n<script>System.import('app').catch(console.error.bind(console));<\/script>\n<\/code><\/pre>\n
Das hier geladene Modul app findet sich der Vollst\u00e4ndigkeit halber im n\u00e4chsten Listing. Es referenziert die beiden anderen zuvor betrachteten Module und arbeitet mit den davon bereitgestellten Klassen.<\/p>\n
Die Funktion System.import nimmt den Namen des gew\u00fcnschten Moduls entgegen und liefert einen Promise retour. F\u00fcr den Fehlerfall empfiehlt es sich, mittels catch einen Error-Handler zu registrieren. Das hier diskutierte Beispiel zieht dazu die Funktion console.error, welche einen Fehler in die JavaScript-Konsole schreibt, heran. <\/p>\n
In der Regel reicht es, \u00fcber den Module Loader der Wahl eine einzige Datei zu laden. Diese kann \u00fcber import-Anweisungen auf andere Module referenzieren. Der Module Loader folgt diesen Anweisungen und l\u00e4dt den gesamten dadurch beschriebenen Abh\u00e4ngigkeits-Graph, sprich s\u00e4mtliche direkt und indirekt referenzierten Module.<\/p>\n
import { FlugCalculator } from 'flugCalculator';\nimport { Flug } from 'flug';\n\nvar fc = new FlugCalculator();\nvar f = new Flug();\nf.id = 17; f.plaetze = 100; f.plaetzeFrei = 90;\n\nvar preis = fc.calcPrice(f);\nalert(preis);\n<\/code><\/pre>\n<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
EcmaScript-6-Module In TypeScript 1.5 Nutzen<\/p>\n","protected":false},"author":9,"featured_media":2997,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_price":"","_stock":"","_tribe_ticket_header":"","_tribe_default_ticket_provider":"","_ticket_start_date":"","_ticket_end_date":"","_tribe_ticket_show_description":"","_tribe_ticket_show_not_going":false,"_tribe_ticket_use_global_stock":"","_tribe_ticket_global_stock_level":"","_global_stock_mode":"","_global_stock_cap":"","_tribe_rsvp_for_event":"","_tribe_ticket_going_count":"","_tribe_ticket_not_going_count":"","_tribe_tickets_list":"[]","_tribe_ticket_has_attendee_info_fields":false,"footnotes":""},"categories":[],"tags":[],"class_list":["post-2501","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry"],"acf":[],"yoast_head":"\nEcmaScript-6-Module In TypeScript 1.5 Nutzen - ANGULARarchitects<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.angulararchitects.io\/en\/blog\/ecmascript-6-module-in-typescript-1-5-nutzen\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"EcmaScript-6-Module In TypeScript 1.5 Nutzen - ANGULARarchitects\" \/>\n<meta property=\"og:description\" content=\"EcmaScript-6-Module In TypeScript 1.5 Nutzen\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.angulararchitects.io\/en\/blog\/ecmascript-6-module-in-typescript-1-5-nutzen\/\" \/>\n<meta property=\"og:site_name\" content=\"ANGULARarchitects\" \/>\n<meta property=\"article:published_time\" content=\"2015-09-19T10:25:46+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-09-02T22:15:22+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2019\/04\/blog-2355684-1280.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"853\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Manfred Steyer, GDE\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@daniel\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Manfred Steyer, GDE\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/ecmascript-6-module-in-typescript-1-5-nutzen\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/ecmascript-6-module-in-typescript-1-5-nutzen\/\"},\"author\":{\"name\":\"Manfred Steyer, GDE\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/15628efa7af4475ffaaeeb26c5112951\"},\"headline\":\"EcmaScript-6-Module In TypeScript 1.5 Nutzen\",\"datePublished\":\"2015-09-19T10:25:46+00:00\",\"dateModified\":\"2023-09-02T22:15:22+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/ecmascript-6-module-in-typescript-1-5-nutzen\/\"},\"wordCount\":918,\"publisher\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/ecmascript-6-module-in-typescript-1-5-nutzen\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2019\/04\/blog-2355684-1280.jpg\",\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/ecmascript-6-module-in-typescript-1-5-nutzen\/\",\"url\":\"https:\/\/www.angulararchitects.io\/en\/blog\/ecmascript-6-module-in-typescript-1-5-nutzen\/\",\"name\":\"EcmaScript-6-Module In TypeScript 1.5 Nutzen - ANGULARarchitects\",\"isPartOf\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/ecmascript-6-module-in-typescript-1-5-nutzen\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/ecmascript-6-module-in-typescript-1-5-nutzen\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2019\/04\/blog-2355684-1280.jpg\",\"datePublished\":\"2015-09-19T10:25:46+00:00\",\"dateModified\":\"2023-09-02T22:15:22+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/ecmascript-6-module-in-typescript-1-5-nutzen\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.angulararchitects.io\/en\/blog\/ecmascript-6-module-in-typescript-1-5-nutzen\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/ecmascript-6-module-in-typescript-1-5-nutzen\/#primaryimage\",\"url\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2019\/04\/blog-2355684-1280.jpg\",\"contentUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2019\/04\/blog-2355684-1280.jpg\",\"width\":1280,\"height\":853},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/ecmascript-6-module-in-typescript-1-5-nutzen\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.angulararchitects.io\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"EcmaScript-6-Module In TypeScript 1.5 Nutzen\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#website\",\"url\":\"https:\/\/www.angulararchitects.io\/en\/\",\"name\":\"ANGULARarchitects\",\"description\":\"AngularArchitects.io\",\"publisher\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.angulararchitects.io\/en\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#organization\",\"name\":\"ANGULARarchitects\",\"alternateName\":\"SOFTWAREarchitects\",\"url\":\"https:\/\/www.angulararchitects.io\/en\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/07\/AA-Logo-RGB-horizontal-inside-knowledge-black.svg\",\"contentUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/07\/AA-Logo-RGB-horizontal-inside-knowledge-black.svg\",\"width\":644,\"height\":216,\"caption\":\"ANGULARarchitects\"},\"image\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/github.com\/angular-architects\",\"https:\/\/www.linkedin.com\/company\/angular-architects\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/15628efa7af4475ffaaeeb26c5112951\",\"name\":\"Manfred Steyer, GDE\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/a0b59539674d8b71ea1c1f4764b11244b5f499203f1d11b40f37d8f3f90be033?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/a0b59539674d8b71ea1c1f4764b11244b5f499203f1d11b40f37d8f3f90be033?s=96&d=mm&r=g\",\"caption\":\"Manfred Steyer, GDE\"},\"sameAs\":[\"https:\/\/x.com\/daniel\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"EcmaScript-6-Module In TypeScript 1.5 Nutzen - ANGULARarchitects","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.angulararchitects.io\/en\/blog\/ecmascript-6-module-in-typescript-1-5-nutzen\/","og_locale":"en_US","og_type":"article","og_title":"EcmaScript-6-Module In TypeScript 1.5 Nutzen - ANGULARarchitects","og_description":"EcmaScript-6-Module In TypeScript 1.5 Nutzen","og_url":"https:\/\/www.angulararchitects.io\/en\/blog\/ecmascript-6-module-in-typescript-1-5-nutzen\/","og_site_name":"ANGULARarchitects","article_published_time":"2015-09-19T10:25:46+00:00","article_modified_time":"2023-09-02T22:15:22+00:00","og_image":[{"width":1280,"height":853,"url":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2019\/04\/blog-2355684-1280.jpg","type":"image\/jpeg"}],"author":"Manfred Steyer, GDE","twitter_card":"summary_large_image","twitter_creator":"@daniel","twitter_misc":{"Written by":"Manfred Steyer, GDE","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/ecmascript-6-module-in-typescript-1-5-nutzen\/#article","isPartOf":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/ecmascript-6-module-in-typescript-1-5-nutzen\/"},"author":{"name":"Manfred Steyer, GDE","@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/15628efa7af4475ffaaeeb26c5112951"},"headline":"EcmaScript-6-Module In TypeScript 1.5 Nutzen","datePublished":"2015-09-19T10:25:46+00:00","dateModified":"2023-09-02T22:15:22+00:00","mainEntityOfPage":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/ecmascript-6-module-in-typescript-1-5-nutzen\/"},"wordCount":918,"publisher":{"@id":"https:\/\/www.angulararchitects.io\/en\/#organization"},"image":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/ecmascript-6-module-in-typescript-1-5-nutzen\/#primaryimage"},"thumbnailUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2019\/04\/blog-2355684-1280.jpg","inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/ecmascript-6-module-in-typescript-1-5-nutzen\/","url":"https:\/\/www.angulararchitects.io\/en\/blog\/ecmascript-6-module-in-typescript-1-5-nutzen\/","name":"EcmaScript-6-Module In TypeScript 1.5 Nutzen - ANGULARarchitects","isPartOf":{"@id":"https:\/\/www.angulararchitects.io\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/ecmascript-6-module-in-typescript-1-5-nutzen\/#primaryimage"},"image":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/ecmascript-6-module-in-typescript-1-5-nutzen\/#primaryimage"},"thumbnailUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2019\/04\/blog-2355684-1280.jpg","datePublished":"2015-09-19T10:25:46+00:00","dateModified":"2023-09-02T22:15:22+00:00","breadcrumb":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/ecmascript-6-module-in-typescript-1-5-nutzen\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.angulararchitects.io\/en\/blog\/ecmascript-6-module-in-typescript-1-5-nutzen\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/ecmascript-6-module-in-typescript-1-5-nutzen\/#primaryimage","url":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2019\/04\/blog-2355684-1280.jpg","contentUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2019\/04\/blog-2355684-1280.jpg","width":1280,"height":853},{"@type":"BreadcrumbList","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/ecmascript-6-module-in-typescript-1-5-nutzen\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.angulararchitects.io\/en\/"},{"@type":"ListItem","position":2,"name":"EcmaScript-6-Module In TypeScript 1.5 Nutzen"}]},{"@type":"WebSite","@id":"https:\/\/www.angulararchitects.io\/en\/#website","url":"https:\/\/www.angulararchitects.io\/en\/","name":"ANGULARarchitects","description":"AngularArchitects.io","publisher":{"@id":"https:\/\/www.angulararchitects.io\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.angulararchitects.io\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.angulararchitects.io\/en\/#organization","name":"ANGULARarchitects","alternateName":"SOFTWAREarchitects","url":"https:\/\/www.angulararchitects.io\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/logo\/image\/","url":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/07\/AA-Logo-RGB-horizontal-inside-knowledge-black.svg","contentUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/07\/AA-Logo-RGB-horizontal-inside-knowledge-black.svg","width":644,"height":216,"caption":"ANGULARarchitects"},"image":{"@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/github.com\/angular-architects","https:\/\/www.linkedin.com\/company\/angular-architects\/"]},{"@type":"Person","@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/15628efa7af4475ffaaeeb26c5112951","name":"Manfred Steyer, GDE","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/a0b59539674d8b71ea1c1f4764b11244b5f499203f1d11b40f37d8f3f90be033?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/a0b59539674d8b71ea1c1f4764b11244b5f499203f1d11b40f37d8f3f90be033?s=96&d=mm&r=g","caption":"Manfred Steyer, GDE"},"sameAs":["https:\/\/x.com\/daniel"]}]}},"_links":{"self":[{"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/posts\/2501","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/comments?post=2501"}],"version-history":[{"count":1,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/posts\/2501\/revisions"}],"predecessor-version":[{"id":22284,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/posts\/2501\/revisions\/22284"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/media\/2997"}],"wp:attachment":[{"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/media?parent=2501"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/categories?post=2501"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/tags?post=2501"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}