Die Anleitung zu TypeScript Module

Was ist ein Modul?
Ideen zu Modulen vor ES6
Das Schlüsselwort export
Das Schlüsselwort import
Die Schlüsselwörter module/namespace
Verwendung von Modulen in HTML

1. Was ist ein Modul?

Beginnend mit der Spezifikation ECMAScript 2015 (ES6) hat JavaScript ein neues Konzept namens Modul. Auch TypeScript teilt dieses Konzept.

Module mit Code-Ressourcen werden nur in einem geschlossenen Bereich verwendet, nicht im globalen Bereich. Das bedeutet, dass im Modul deklarierte Variablen, Funktionen, Klassen usw. außerhalb des Moduls nicht sichtbar sind, es sei denn, sie werden explizit über den Ausdruck export exportiert. Um eine exportierte Ressource eines anderen Moduls zu verwenden, müssen Sie sie explizit über den Ausdruck import importieren.

Programmierer neigen dazu, jede Datei als Modul zu organisieren, was die Codeverwaltung vereinfacht. Obwohl Sie zwei oder mehr Module in einer Datei mit dem Schlüsselwort module oder namespace definieren können. Wenn eine Datei die Schlüsselwörter module und namespace nicht enthält, handelt es sich um ein einzelnes Modul.

2. Ideen zu Modulen vor ES6

Die Idee eines Moduls gibt es in JavaScript schon seit langem, aber erst in ES6 (2015) wurde es auf Sprachebene unterstützt, indem neue Schlüsselwörter wie import, export, module hinzugefügt wurden. Vor der Version ES6 (2015) wurden viele Modulspezifikationen wie CommonJS, AMD, UMD usw. erstellt, deren Zweck es ist, Konventionen über das Modulökosystem festzulegen. Seitdem gibt es viele Bibliotheken, die die obigen Spezifikationen implementieren.

Ein Codeausschnitt, der das Modul gemäß den CommonJS-Standards erstellt und verwendet:

// package/lib is a dependency we require
var lib = require( "package/lib" );

// behaviour for our module
function foo(){
    lib.log( "hello world!" );
}
// export (expose) foo to other modules
exports.foo = foo;

Manchmal verwirren uns alte Spezifikationen und Bibliotheken, als würden wir uns in einem Labyrinth verirren. Der folgende Artikel stellt den Modulverlauf in JavaScript vor, der Ihnen hilft, sich einen Überblick über das Modul zu verschaffen und sich vom Erlernen veralteter Bibliotheken fernzuhalten:

Die Geschichte der Module in JavaScript

3. Das Schlüsselwort export

Ähnlich wie bei JavaScript hat der Code von TypeScript standardmäßig einen globalen Gültigkeitsbereich. Wenn Sie mehrere Dateien in einem Projekt haben, können Variablen, Funktionen usw., die in einer Datei geschrieben sind, erkannt und in anderen Dateien verwendet werden. Zum einfachen Verständnis sehen Sie ein Beispiel:

file1.ts

var greeting : string = "Hello World!";

function sayHello(name: string) {
    console.log(`Hello $name`);
}

file2.ts

sayHello('Tom');
console.log(greeting);
// Set new value to greeting
greeting = 'Hi';

Im obigen Beispiel definiert die Datei file1.ts die Variable greeting und die Funktion sayHello(string), die in der Datei file2.ts erkannt und verwendet werden können. Außerdem kann die Variable greeting an beliebiger Stelle in der Anwendung ein neuer Wert zugewiesen werden, was zu Konflikten oder Fehlern für die Anwendung führen kann.

Das Schlüsselwort export

Das Schlüsselwort export wird verwendet, um den "globalen Standardbereich" von Code TypeScript zu verhindern. Verwendung: Stellen Sie das Schlüsselwort export vor die "Dinge", die auf der Top-level der Datei definiert sind.

Wir schreiben den Code in file1.ts unter Beteiligung des Schlüsselworts export neu:

file1.ts (*)

export var greeting : string = "Hello World!";

export function sayHello(name: string) {
    console.log(`Hello $name`);
}

Nach der Änderung des Codes wird file1.ts als Modul betrachtet.

Der Compiler meldet nun einen Fehler auf file2.ts:

file2.ts (*)

sayHello('Tom');  // ERROR: Cannot find name 'sayHello'.

console.log(greeting);  // ERROR: Cannot find name 'greeting'.
// Set new value to greeting
greeting = 'Hi'; // ERROR: Cannot find name 'greeting'.

4. Das Schlüsselwort import

Das Schlüsselwort import wird verwendet, um "Dinge" zu importieren, die mit dem Schlüsselwort export einer bestimmten Datei definiert wurden.

Die Syntax:

// Import multiple 'things':
import { export_name1, export_name2 } from "file_path_without_extension"

// Import only one 'thing':
import  export_name1 from "file_path_without_extension"

// Import all 'things' into a variable.
import  * as variable_name from "file_path_without_extension"

// Import with alias name:
import { export_name1 as alias_name1, export_name2 } from "file_path_without_extension"

Zum Beispiel:

file1.ts

export var greeting : string = "Hello World!";

export function sayHello(name: string) {
    console.log(`Hello $name`);
}

file2.ts

import {sayHello, greeting} from './file1';

sayHello('Tom');   
console.log(greeting);

Beispiel: Alles in eine Variable importieren:

file2b.ts

import * as f1 from './file1';

f1.sayHello('Tom');   
console.log(f1.greeting);

Beispiel: Import mit Aliasnamen:

file2c.ts

import {sayHello as hello, greeting} from './file1';

hello('Tom');   
console.log(greeting);

5. Die Schlüsselwörter module/namespace

In JavaScript ES6 wird das Schlüsselwort module zum Definieren eines Moduls verwendet. Dadurch können Sie mehrere Module in einer Datei definieren. TypeScript verwendet das Schlüsselwort namespace mit ähnlicher Syntax und ähnlichen Zwecken.

Hinweis: Sowohl die Schlüsselwörter "module" als auch "namespace" können in TypeScript mit ähnlicher Syntax und Verwendung verwendet werden. Die TypeScript Dokumentation rät jedoch von der Verwendung des Schlüsselworts "module" in TypeScript-Code ab. Es sollte nur in JavaScript-Code verwendet werden.

In TypeScript ist das Schlüsselwort "namespace" etwas stärker als das Schlüsselwort "module". Sie können ein Modul über mehrere Dateien hinweg mit dem Schlüsselwort "namespace" definieren und das Flag "--outFile" verwenden, wenn Sie möchten, dass sie zur Kompilierzeit in einer einzigen Datei gebündelt werden.

Im folgenden Beispiel definieren wir 2 Module in einer Datei.

my_common_libs.ts

export namespace MyMathLib  {
    export function minus(a: number, b: number)  {
        return a - b;
    }
    export function sum(a: number, b: number)  {
        return a + b;
    }
}

export namespace MyStringLib {
    export var LIB_INFO = "String Lib";
    var AUTHOR = 'tran'; // Use only in module.

    export function toUpperCase(s:string)  {
        return s.toUpperCase;
    }
}

In einer anderen Datei verwenden wir das obige Modul.

use_my_common_libs_ex1.ts

import {MyMathLib, MyStringLib} from './my_common_libs';

let value = MyMathLib.minus(1, 2);
console.log(`value = ${value}`);
console.log('MyStringLib info: ' + MyStringLib.LIB_INFO);

Sehen Sie den ausführlichen Artikel auf TypeScript Namespaces:

TypeScript Namespaces

6. Verwendung von Modulen in HTML

Grundsätzlich unterstützen die meisten modernen Browser Module und verfügen über einen integrierten Module Loader sodass wir keine zusätzlichen Bibliotheken verwenden müssen. Der folgende Code ist eine Möglichkeit, dem Browser mitzuteilen, dass diese JavaScript-Quelle ein Modul ist:

test.html

<html>
   <head>
      <!-- Important: type='module' -->
      <script type="module" src="./dist/file2.js"></script>
   </head>
   <body>
      <h3>To test, you need to run this file on an HTTP or HTTPS server.
         And see the results on the browser Console.
      </h3>
   </body>
</html>

Um das obige Beispiel erfolgreich zu testen, müssen Sie die Datei test.html auf einem HTTP- oder HTTPS-Server ausführen und die Ergebnisse im Ffenster Console des Browsers anzeigen.

Erstellen Sie einen einfachen HTTP-Server mit NodeJS