TypeScript fügt die statische Typisierung in JavaScript, das verbessert die IDE Erfahrung und reduziert Fehler. Es ist leicht zu lernen, aber die überführung einer bestehenden Anwendung zur Niederschrift kann ein anstrengender Prozess sein. Wir werden diskutieren, einige der Techniken für die Arbeit mit in Ihre app.
Was Ist TypeScript?
TypeScript ist eine syntaktische Untermenge von JavaScript, fügt Unterstützung für statische Typisierung, unter anderem. Es kompiliert direkt in vanilla JS, dass laufen in jedem browser.
Vanilla JS ist dynamisch typisiert. Variablen können Typen ändern zur Laufzeit, und JS wird es akzeptieren. Dies macht es sehr flexibel, aber führt oft zu einer Verwirrung in größeren Projekten. Typoskript erzwingt geben Sicherheit—Sie können nicht übergeben wird ein int-Wert an eine Funktion, die einen string.
Allein dies hat einige große Vorteile. Da jede Funktion klar definiert, welche Argumente, die Sie nehmen, es macht die Arbeit mit Ihnen viel leichter. Typoskript integriert sich sehr gut mit IDE-Werkzeuge, die Bereitstellung von rich-AutoVervollständigen-und Typ-überprüfung, wo die Vanille JS nur die basic-syntax-highlighting.
Es macht auch eine grundlegende überprüfung Fehler einfacher für Ihre IDE zu tun. Wenn Sie fehlende argument für eine Funktion, VS Code wird Sie wissen lassen, sofort, bevor es überhaupt kompiliert.
Installation Typoskript und Webpack
Ein Hinweis, bevor wir beginnen: wenn Sie mit einem zu Reagieren Projekt erstellt mit create-reagieren-app, die Webpack config ist für Sie verarbeitet als Teil reagieren-Skripte. Wenn Sie möchten, um es zu ändern, können Sie werfen Sie die Konfiguration (nicht empfohlen, es sei denn, Sie wollen für die Abwicklung laufender Konfiguration selbst), Gabel reagieren-Skripte, oder benutzen Sie eine Bibliothek wie neu verdrahtet, es zu ändern, indirekt, ohne zu brechen updates.
Allerdings, wenn Sie ein neues Projekt beginnen, können Sie einfach erstellen-reagieren-app Typoskript-Vorlage beim erstellen eines neuen Projekts.
npx erstellen-reagieren-app –template Typoskript
Diese wird vorkonfiguriert werden zur Unterstützung der Niederschrift aus der box. Wenn dies für Sie arbeitet, können Sie überspringen den rest dieses Abschnitts. Sie können auch den übergang eines vorhandenen Projekts, um eine zu erstellen-reagieren-app Typoskript-Vorlage mit dieser Methode.
Wenn Sie nicht mit dem Reagieren, Sie müssen es manuell zu installieren. Installieren Typoskript als eine Entwicklung von Abhängigkeit für Ihr Projekt:
npm install –save-dev Typoskript
Sie wollen auch zu installieren Typoskript weltweit auf Ihre Maschine, die Ihnen erlaubt, zur Verwendung der CLI:
npm install-g typescript
Testen Sie es aus, Sie können erstellen Sie eine einfache Funktion wie die folgende:
Funktion Hello(object: string) {
console.log(`Hallo, ${object}!`);
}
Hallo(‘Welt’)
Gespeichert als test.ts. Alle TypeScript-Dateien haben sollte .ts-Erweiterung (oder .tsx für JSX). Kompilieren Sie es manuell über tsc:
tsc testen.ts
Ausgeführt wird dies mit der -w flag wird tsc-Uhr für die neuen änderungen, und bauen Sie, wenn Sie sparen, aber Sie wahrscheinlich wollen, um die Integration in Webpack als Teil des Erstellungsprozesses. Wenn Sie nicht haben, Webpack, installieren Sie es von npm:
npm install –save-dev webpack webpack-cli
Erstellen Sie eine Typoskript-Konfiguration tsconfig.json gespeichert wird, Ihre compiler-Einstellungen:
{
“Compiler-Optionen”: {
“outDir”: “./dist/”,
“sourceMap”: true,
“skipLibCheck”: true,
“noImplicitAny”: true,
“Modul”: “commonjs”,
“target”: “es6”,
“jsx”: “reagieren”
}
}
Dann werden Sie wollen zu erstellen oder zu ändern Ihr webpack.config.json-Datei, um die TypeScript-Erweiterungen und die Verwendung von ts-loader. Sie werden auch wollen, schalten Sie source-Karten für erweiterte debugging.
– Modul.Exporte = {
Modus: “Produktion”,
// Aktivieren sourcemaps für debugging-webpack s Ausgabe.
devtool: “source-Karte”,
“Entschlossenheit”: {
// Hinzufügen”.ts’ und ‘.tsx’ als auflösbaren Erweiterungen.
Erweiterungen: [“.ts”, “.tsx”]
},
Modul: {
Regeln: [
{
test: /.ts(x?)$/,
ausschließen: /node_modules/,
verwenden Sie: [
{
loader: “ts-loader”
}
]
},
// All output ‘.js ” – Dateien haben keine sourcemaps neu bearbeitet von ‘source-map-loader’.
{
durchzusetzen: “pre”,
test: /.js$/,
loader: “source-map-loader”
}
]
},
// Beim importieren ein Modul, dessen Pfad mit einer der folgenden, nur
// übernehmen, eine entsprechende Globale variable existiert und verwenden, statt.
// Dies ist wichtig, denn es ermöglicht uns, um zu vermeiden, die Bündelung aller unserer
// Abhängigkeiten, die es ermöglicht Browser-cache Bibliotheken zwischen builds.
externe Verweise: {
“reagieren”: “Reagieren”,
“reagieren-dom”: “ReactDOM”
}
};
Jetzt läuft npx webpack oder webpack-dev-server wird automatisch Griff be-Typoskript-Dateien für Sie.
Wie man Mit JS Basierte Pakete
Wenn Sie gerade installiert haben Typoskript, wechselten einige Ihrer Erweiterungen .ts, und merkte, dass alles ist jetzt on fire, keine Sorge. Viele JS-Bibliotheken nicht haben Unterstützung für Typescript out of the box, aber third-party-Typen sind in der Regel vom DefinitelyTyped, ein community-repository für die Aufrechterhaltung Testungen für die meisten gängigen Bibliotheken als separat installierbare npm-Abhängigkeiten. Beispielsweise Reagieren ist von @ – Typen/reagieren:
npm install –save-dev @Typen/reagieren @Typen/reagieren-dom
Dies wird sofort loszuwerden, die Probleme, wenn das zugehörige Paket. Wenn Sie immer compiler Fehler nach der Installation eines neuen Pakets versuchen Sie die Installation von @ – Typen/ – Paket.
Zum Glück, Typoskript noch kompilieren und die Arbeit mit nativen JS Prima—man kann sehen, einige rote kringel sage Ihnen, es ist ein problem. Wenn Sie wirklich wollen, zu beheben-Testungen für ein npm-Paket, das nicht öffentlich zugänglich Typen, Sie können schreiben Sie eine Erklärung-Datei für Sie, wahlweise durch “forking” DefinitelyTyped (und die übermittlung Ihrer neuen Testungen, um die community-repo).
Eine Erklärung-Datei sieht wie folgt aus, in der Regel gespeichert werden, als Paket.d….ts irgendwo in deinem src:
export als namespace-Paket
export = Paket
declare namespace-Package {
interface Type {
value: boolean
}
// usw…
}
Dann können Sie die Erklärung, indem Sie einen Verweis auf den Anfang einer beliebigen code mit diesem Paket:
///<reference path=” – Paket.d….ts”/>
Wie Man Legacy Code
Eingabe von legacy-code ist ein manueller Prozess, der spezifisch an Ihre business-Logik, so wird es einige Zeit dauern, abhängig von Ihrer Projektgröße. Aber die Grundidee ist nicht allzu schwer, und es einfach geht das erstellen benutzerdefinierter Schnittstellen für die Werte übergeben und zurück durch die Funktionen, die Sie implementiert haben.
Zum Beispiel, sagen, Sie haben einen Reagieren Komponente, das dauert ein paar Requisiten, und macht einige JSX:
Mit diesem können Sie eine neue Schnittstelle, um die Funktion zu verwenden. Jedes mal, wenn Sie eine Taste auf Requisiten in den code, wie Requisiten.divCustomColor hier hinzufügen, um die Schnittstelle mit den entsprechenden Typ.
Dann, wenn Sie die Nutzung dieser Funktion in einer anderen Datei, erhalten Sie eine Fehlermeldung, wenn Sie nicht definieren, Requisiten.divCustomColor, oder versuchen Sie, geben Sie einen falschen Typ. Wenn Ihre app bereits behandelt Werte in einer typsicheren Art und Weise, dass kann alles, was Sie brauchen, zu geben viele Ihrer Komponenten. Allerdings müssen Sie möglicherweise zu zwicken, einige Dinge besser zu bewältigen strikte Typisierung.
Wenn Sie wirklich am Kopf kratzen, über sowas kann man immer aufgeben, und deaktivieren TypeScript compiler-Warnungen mit den ts-ignore-flag:
//@ts-ignorieren
Oder ts-nocheck für eine ganze Datei.
Hinzufügen Von Projekt-Breiten Typen
Wenn Sie möchten, fügen Sie der benutzerdefinierten Typen Projekt-breit, werden Sie wollen, erstellen Sie eine Globale Deklaration-Datei. Zum Beispiel, wenn Sie wollten einen referenzierbaren enum speichern von app-Farben, so dass Sie direkt nach Namen, die Sie speichern können, die im folgenden als Globale.d….ts in dein src Ordner:
erklären global {
enum Farbe {
primary = “#6ca583”,
Akzent = “#9b8dab”,
}
}
export {};
Deaktivieren Implizite Prüfung, Ob Sie Wirklich Probleme
Die häufigsten Fehler, die Sie wahrscheinlich ist TypeScript beschweren sich über “Implizite Jeder.” Sie können Funktionen übernehmen jede Art der expliziten oder val: alle. Das ist in Ordnung, und während Sie sollte in der Regel machen mehr strenge-Testungen, es ist besser, manchmal zu sagen, Typoskript, um sich zu entspannen.
Standardmäßig werden alle Werte werden implizit die jede Art, die nur die Standard-JavaScript dynamische Typisierung system. TypeScript wird sich über diese Menge. Wenn Sie möchten, können Sie deaktivieren Sie die Klagen durch Einstellung noImplicitAny auf false:
{
“Compiler-Optionen”: {
“noImplicitAny”: false
}
}
Seien Sie vorsichtig mit dieser, obwohl nur dieses schweigen, die Fehler und behebt nicht das Grundproblem. Allerdings, wenn Sie wollen, aktivieren Sie diese vorübergehend, während Sie die Arbeit an der Eingabe alles raus, dies wird es ermöglichen, Ihren code zu kompilieren, in der Zwischenzeit.