TypeScript Installation und Einrichtung, erste Schritte

von | Juli 20, 2024 | Blog, Typescript | 0 Kommentare

TypeScript Installation und Einrichtung, erste Schritte

Einführung

In diesem Beitrag werden wir die grundlegenden Schritte zur Installation und Einrichtung von TypeScript durchgehen. Wir richten die Entwicklungsumgebung ein, konfigurieren unser erstes TypeScript-Projekt und schreiben unser erstes TypeScript-Programm. Durch diese praktischen Schritte bekommen Sie einen klaren Überblick darüber, wie Sie TypeScript in Ihre Entwicklungspipeline integrieren können. Lassen Sie uns direkt in die TypeScript-Installation einsteigen!

Was ist TypeScript?

Bevor wir zur Installation von TypeScript übergehen, ist es wichtig zu verstehen, warum TypeScript eine wertvolle Ergänzung zu Ihrem Entwicklungswerkzeugkasten ist. TypeScript ist eine Open-Source-Programmiersprache, die auf JavaScript aufbaut und zusätzliche Funktionen wie statische Typisierung, Klassen und Module bietet. Diese Features verbessern die Lesbarkeit und Wartbarkeit des Codes und helfen, Fehler frühzeitig zu erkennen und zu beheben.

Hier kommt ihr zu den CloudDNA Büchern | Rheinwerk Verlag
CloudDNA Bücher

Warum TypeScript verwenden?

1. Statische Typisierung: TypeScript ermöglicht es Ihnen, Typen für Variablen, Funktionen und Objekte zu definieren. Dies führt zu einer besseren Lesbarkeit und Wartbarkeit des Codes.

2. Moderne Features: TypeScript bietet Unterstützung für moderne JavaScript-Features, einschließlich der neuesten ECMAScript-Standards, wodurch Sie die Vorteile der neuesten Spracheigenschaften nutzen können.

3. Skalierbarkeit: TypeScript erleichtert die Entwicklung und Wartung großer Codebasen durch klare Typdefinitionen und modulare Strukturierung.

4. Tool-Unterstützung: IDE-Unterstützung für TypeScript ist hervorragend, mit Features wie Autovervollständigung, Refactoring-Tools und Inline-Dokumentation.

Installation von TypeScript

Um TypeScript zu installieren, benötigen Sie Node.js und npm (Node Package Manager). Diese Tools sind für die Installation und Verwaltung von TypeScript und anderen Abhängigkeiten erforderlich. Wenn Sie Node.js noch nicht installiert haben, können Sie es von der offiziellen Node.js-Website herunterladen und installieren.

Nach der Installation von Node.js können Sie TypeScript global auf Ihrem System installieren. Öffnen Sie ein Terminal oder eine Eingabeaufforderung und führen Sie den folgenden Befehl aus:

npm install -g typescript

Durch diesen Befehl wird das TypeScript-Kommandozeilenwerkzeug

tsc

global auf Ihrem System verfügbar gemacht. Dies ermöglicht Ihnen, TypeScript-Code in JavaScript zu transpilen.

Überprüfen der TypeScript-Installation

Nach der Installation können Sie überprüfen, ob TypeScript korrekt installiert wurde, indem Sie den folgenden Befehl ausführen:

tsc --version

Dieser Befehl sollte die aktuell installierte Version von TypeScript anzeigen. Wenn dies der Fall ist, haben Sie TypeScript erfolgreich installiert und sind bereit, ein neues Projekt zu erstellen.

Einrichtung eines TypeScript-Projekts

Nachdem wir TypeScript installiert haben, richten wir ein neues TypeScript-Projekt ein. Gehen Sie dazu wie folgt vor:

1. Erstellen eines neuen Verzeichnisses für das Projekt:

mkdir mein-typescript-projekt
cd mein-typescript-projekt

2. Initialisieren des Projekts:

npm init -y

3. Installation der TypeScript-Abhängigkeit:

npm install typescript --save-dev

4. Erstellen einer tsconfig.json-Datei:

npx tsc --init

Die erzeugte

tsconfig.json

-Datei könnte wie folgt aussehen:

Diese Datei legt fest, dass der TypeScript-Compiler den Code auf ES5 transpiliert und CommonJS-Module verwendet. Außerdem werden strikte Typprüfungen aktiviert.

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src"]
}

Unser erstes TypeScript-Programm

Erstellen einer TypeScript-Datei

Erstellen Sie ein Verzeichnis namens

src

und darin eine Datei namens

index.ts

. Fügen Sie den folgenden Code in die

index.ts

-Datei ein:

function greet(name: string): string {
    return `Hello, ${name}!`;
}

let user = "World";
console.log(greet(user));

Kompilieren des TypeScript-Codes:

Um den TypeScript-Code in JavaScript zu transpilen, führen Sie folgenden Befehl aus:

npx tsc

Dieser Befehl kompiliert alle TypeScript-Dateien im

src

-Verzeichnis und erzeugt entsprechende JavaScript-Dateien im gleichen Verzeichnis (oder in einem anderen Verzeichnis, falls in der

tsconfig.json

angegeben)

Ausführen des generierten JavaScript-Codes:

Nach der Kompilierung finden Sie eine Datei namens

index.js

im

src

-Verzeichnis. Diese können Sie mit Node.js ausführen:

node src/index.js

Sie sollten die folgende Ausgabe sehen:

Hello, World!

Konfiguration der Entwicklungsumgebung

Für eine effizientere Entwicklungserfahrung können Sie einen Texteditor oder eine integrierte Entwicklungsumgebung (IDE) verwenden, die TypeScript unterstützt. Visual Studio Code (VS Code) ist eine beliebte Wahl aufgrund seiner umfangreichen Unterstützung für TypeScript, einschließlich Syntaxhervorhebung, Autovervollständigung und Debugging.

Visual Studio Code installieren:

Laden Sie Visual Studio Code von der offiziellen Website herunter und installieren Sie es.

Einrichten eines TypeScript-Projekts in VS Code:

Öffnen Sie Ihr Projektverzeichnis in VS Code:
code mein-typescript-projekt
Installieren Sie die erforderlichen Erweiterungen:
  • TypeScript: Diese Erweiterung bietet umfassende Unterstützung für TypeScript in VS Code.
  • ESLint: Diese Erweiterung hilft bei der Einhaltung von Code-Standards und Best Practices.
Erstellen Sie einen

.vscode

-Ordner und darin eine

launch.json

-Datei für Debugging-Konfigurationen:

Diese Konfiguration ermöglicht es Ihnen, TypeScript-Dateien direkt aus VS Code zu debuggen.

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "skipFiles": ["<node_internals>/**"],
      "program": "${workspaceFolder}/src/index.ts",
      "preLaunchTask": "tsc: build - tsconfig.json"
    }
  ]
}

Integration mit Build-Tools

TypeScript kann nahtlos in verschiedene Build-Tools und Task-Runner integriert werden. Hier sind einige gängige Beispiele:

Webpack

Webpack ist ein leistungsstarker Module-Bundler, der TypeScript unterstützen kann. Installieren Sie die erforderlichen Pakete:

npm install --save-dev webpack webpack-cli ts-loader

Erstellen Sie eine

webpack.config.js

-Datei:

const path = require('path');
module.exports = {
  entry: './src/index.ts',
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: ['.ts', '.js'],
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};
Gulp

Gulp ist ein Task-Runner, der zur Automatisierung von Entwicklungs- und Build-Aufgaben verwendet werden kann. Installieren Sie die erforderlichen Pakete:

npm install --save-dev gulp gulp-typescript

Erstellen Sie eine

gulpfile.js

-Datei:

const gulp = require('gulp');
const ts = require('gulp-typescript');

gulp.task('scripts', () => {
  return gulp.src('src/**/*.ts')
    .pipe(ts({
      noImplicitAny: true,
      outFile: 'output.js',
    }))
    .pipe(gulp.dest('dist'));
});

gulp.task('default', gulp.series('scripts'));

Fazit

Sie haben nun erfolgreich TypeScript installiert und eingerichtet sowie Ihr erstes TypeScript-Programm geschrieben und ausgeführt. Mit diesen Grundlagen sind Sie bereit, tiefer in die TypeScript-Welt einzutauchen. Die richtige TypeScript-Installation und -Konfiguration ist der erste Schritt, um die Vorteile dieser mächtigen Sprache voll auszuschöpfen.

Durch die Einrichtung einer geeigneten Entwicklungsumgebung und das Verständnis der Konfigurationsoptionen können Sie sicherstellen, dass Ihr TypeScript-Projekt von Anfang an gut strukturiert und wartbar ist. Im nächsten Blogpost werden wir uns mit den Grundlagen von TypeScript, insbesondere Typen und Interfaces, beschäftigen. Bleiben Sie dran, um mehr über die Typensysteme und deren Vorteile zu erfahren.

Ausblick

Im nächsten Beitrag dieser Serie werden wir uns mit den grundlegenden Typen in TypeScript und der Verwendung von Interfaces beschäftigen. Diese Konzepte sind entscheidend, um den Code besser zu strukturieren und Fehler frühzeitig zu erkennen. Freuen Sie sich auf praktische Beispiele und detaillierte Erklärungen, die Ihnen helfen, die Vorteile von TypeScript voll auszuschöpfen.