Zum Inhalt springen
aviral gupta
Kontakt aufnehmen

// B1.3 · ca. 30 Min. · Einstieg

Eine erste tsconfig.json (strict als Standard)

Nach dieser Lektion schreiben Sie eine kleine tsconfig.json, wissen, was strict prüft, wählen die Dateien, die tsc prüft, und erklären jede Option der Kurs-tsconfig.

Lektion 3 von 5 in B1 Einrichtung und Grundlagen

Danach können Sie

  • Eine minimale tsconfig.json schreiben und sagen, was das standardmäßig eingeschaltete strict prüft
  • Mit include, exclude und noEmit festlegen, welche Dateien tsc prüft und ob es JavaScript schreibt
  • Die Optionen der Kurs-tsconfig erklären und tsc so starten, dass es die tsconfig verwendet

  1. Aufwärmen · Aufgabe 1 von 7

    Aufwärmen aus den letzten beiden Lektionen. Was trifft zu? Wählen Sie alle zutreffenden.

    Wählen Sie alle zutreffenden aus.

  2. Vorhersagen · Aufgabe 2 von 7

    Sagen Sie es vorher. main.ts enthält function greet(name) { return "Hello, " + name; } und einen Aufruf. Daneben liegt diese tsconfig.json, in der nichts steht. Was meldet npx tsc?

    {}

  3. Üben · Aufgabe 3 von 7

    Ergänzen Sie die Option, mit der tsc nur prüft und keine JavaScript-Dateien schreibt.

    {
  "compilerOptions": {
    "____": true
  }
}
    "": true

  4. Üben · Aufgabe 4 von 7

    Im Ordner liegen tsconfig.json und main.ts nebeneinander, sonst nichts. Was meldet npx tsc?

    {
  "compilerOptions": {"noEmit": true},
  "include": ["src/**/*.ts"]
}

  5. Üben · Aufgabe 5 von 7

    Ordnen Sie jeder Option der Kurs-tsconfig zu, was sie bewirkt.

  6. Denksport · Aufgabe 6 von 7

    Knobelaufgabe. Der Kursordner enthält main.ts und die tsconfig.json des Kurses. Um nur diese eine Datei zu prüfen, führen Sie npx tsc main.ts aus. Was passiert?

  7. Anwenden · Aufgabe 7 von 7

    Kleine Aufgabe auf Ihrem Rechner (TypeScript installiert wie in der letzten Lektion). Legen Sie in einem neuen Ordner main.ts in einen Ordner src und schreiben Sie Ihre eigene tsconfig.json: strict an, noEmit an und include nur "src/**/*.ts". Führen Sie npx tsc --showConfig aus, um die Einstellungen zu sehen, die tsc verwendet, dann npx tsc. Entfernen Sie noEmit, starten Sie npx tsc erneut und suchen Sie die neue Datei. Führen Sie zuletzt npx tsc src/main.ts aus und lesen Sie den Fehler.

    Prüfen Sie Ihr Ergebnis anhand dieser Liste

Selbst programmieren

Lesen Sie das ausgearbeitete Beispiel und lösen Sie dann die Übungen. Ihr Code läuft in Ihrem Browser oder auf Ihrem Computer und wird nie hochgeladen.

Ausgearbeitetes Beispiel

Was strict findet, und wie der Code damit umgeht

In der Kurs-tsconfig ist strict an; tsc weiß also, dass find undefined liefert, wenn nichts passt. Jede Stelle, die das Ergebnis verwendet, behandelt diesen Fall mit ??, das für undefined einen Ersatzwert liefert. Führen Sie npx tsc aus: keine Fehler. Dann node main.ts. Ändern Sie nun die letzte Zeile zu found.length und starten Sie npx tsc erneut: error TS18048: 'found' is possibly 'undefined'.

main.ts

// strict is on, so tsc knows that find() may return undefined.
const names: string[] = ["Ada", "Grace", "Linus"];
const found = names.find((name) => name.startsWith("G"));
const missing = names.find((name) => name.startsWith("Z"));

console.log("found:", found ?? "nobody");
console.log("missing:", missing ?? "nobody");
console.log("letters:", (found ?? "").length);

Ausführen mit

npx tsc
node main.ts

Ausgabe

found: Grace
missing: nobody
letters: 5
  • find liefert den ersten Treffer oder undefined, wenn es keinen gibt, wie missing zeigt.
  • Mit strictNullChecks, einem Teil von strict, verlangt tsc, dass Sie undefined behandeln, bevor Sie den Wert verwenden.
  • wert ?? ersatz liefert den Ersatz nur, wenn wert undefined oder null ist.
  • Mit "strict": false bestünde missing.length die Prüfung, und node main.ts stürzte dann ab, weil missing undefined ist.
Ändern und ausführen

Tab rückt ein, Umschalt+Tab rückt aus. Um den Editor mit der Tastatur zu verlassen, drücken Sie Esc und dann Tab.

Beim ersten Ausführen lädt Ihr Browser den TypeScript-Compiler herunter (bis zu 2.1 MB) und speichert ihn im Cache. Ihr Code bleibt auf Ihrem Gerät.

Übungen

Übung 1 von 2

Den Fall behandeln, den find() nicht abdeckt

firstLong soll das erste Wort mit mehr als fünf Buchstaben in Großbuchstaben liefern, oder "" (leeren Text), wenn es keines gibt. strict ist an, und tsc meldet, dass found möglicherweise undefined ist; bei einer Liste ohne langes Wort stürzt die Funktion außerdem ab. Behandeln Sie den Fall undefined in der return-Zeile.

Tab rückt ein, Umschalt+Tab rückt aus. Um den Editor mit der Tastatur zu verlassen, drücken Sie Esc und dann Tab.

Beim ersten Ausführen lädt Ihr Browser den TypeScript-Compiler herunter (bis zu 2.1 MB) und speichert ihn im Cache. Ihr Code bleibt auf Ihrem Gerät.

Hinweise
  1. Hinweis 1

    tsc meldet main.ts(3,10): error TS18048: 'found' is possibly 'undefined'. Das ist strictNullChecks, ein Teil von strict.

  2. Hinweis 2

    find liefert undefined, wenn kein Wort passt, und undefined hat kein toUpperCase.

  3. Hinweis 3

    Geben Sie zuerst einen Ersatzwert an: return (found ?? "").toUpperCase();

Eine Lösung zeigen

Ein möglicher Lösungsweg. Ihrer kann anders aussehen und trotzdem alle Prüfungen bestehen.

export function firstLong(words: string[]): string {
  const found = words.find((word) => word.length > 5);
  return (found ?? "").toUpperCase();
}
Auf dem eigenen Computer ausführen

Installieren Sie TypeScript 7.0 oder neuer. Speichern Sie diese Dateien in einem Ordner, öffnen Sie dort ein Terminal und führen Sie die Befehle unten aus.

main.ts

export function firstLong(words: string[]): string {
  const found = words.find((word) => word.length > 5);
  return found.toUpperCase();
}

main.test.ts

import {test} from 'node:test';
import assert from 'node:assert/strict';
import {firstLong} from './main.ts';

test('findet das erste lange Wort', () => {
  assert.equal(firstLong(['go', 'typescript', 'javascript']), 'TYPESCRIPT', 'firstLong(["go", "typescript", "javascript"]) sollte "TYPESCRIPT" sein');
});

test('liefert leeren Text, wenn kein Wort lang ist', () => {
  assert.equal(firstLong(['go', 'ts']), '', 'firstLong(["go", "ts"]) sollte "" sein');
});

package.json

{
  "type": "module"
}

tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "module": "nodenext",
    "lib": [
      "esnext",
      "dom"
    ],
    "types": [],
    "strict": true,
    "noEmit": true,
    "erasableSyntaxOnly": true,
    "verbatimModuleSyntax": true,
    "allowImportingTsExtensions": true
  },
  "include": [
    "**/*.ts"
  ],
  "exclude": [
    "**/*.test.ts"
  ]
}

npx tsc braucht TypeScript im Ordner: Führen Sie dort einmal npm install --save-dev typescript aus. tsc prüft die Typen; Node.js führt main.ts aus, indem es sie entfernt.

Programm ausführen:

npx tsc
node main.ts

Prüfungen ausführen (learnrun.js muss im selben Ordner liegen):

npx tsc
node --test
learnrun.js herunterladen

Übung 2 von 2

Den Standardwert von strict anwenden

strictIsOn bekommt den Wert von "strict" aus einer tsconfig: true, false oder gar nichts, wenn die Option fehlt (setting?: bedeutet, dass der Aufrufer ihn weglassen darf; dann ist er undefined). Die Funktion soll liefern, ob strict an ist, und weggelassen heißt: der Standardwert true. tsc lehnt die return-Zeile ab. Korrigieren Sie sie.

Tab rückt ein, Umschalt+Tab rückt aus. Um den Editor mit der Tastatur zu verlassen, drücken Sie Esc und dann Tab.

Beim ersten Ausführen lädt Ihr Browser den TypeScript-Compiler herunter (bis zu 2.1 MB) und speichert ihn im Cache. Ihr Code bleibt auf Ihrem Gerät.

Hinweise
  1. Hinweis 1

    tsc meldet main.ts(3,3): error TS2322: Type 'boolean | undefined' is not assignable to type 'boolean'. setting kann undefined sein, und die Funktion verspricht einen boolean.

  2. Hinweis 2

    Wenn setting undefined ist, liefern Sie den Standardwert von strict in TypeScript 7.0.

  3. Hinweis 3

    return setting ?? true; lässt false als false stehen, denn ?? ersetzt nur undefined und null.

Eine Lösung zeigen

Ein möglicher Lösungsweg. Ihrer kann anders aussehen und trotzdem alle Prüfungen bestehen.

// The value of "strict" in a tsconfig: true, false, or left out (undefined).
export function strictIsOn(setting?: boolean): boolean {
  return setting ?? true;
}
Auf dem eigenen Computer ausführen

Installieren Sie TypeScript 7.0 oder neuer. Speichern Sie diese Dateien in einem Ordner, öffnen Sie dort ein Terminal und führen Sie die Befehle unten aus.

main.ts

// The value of "strict" in a tsconfig: true, false, or left out (undefined).
export function strictIsOn(setting?: boolean): boolean {
  return setting;
}

main.test.ts

import {test} from 'node:test';
import assert from 'node:assert/strict';
import {strictIsOn} from './main.ts';

test('weggelassen heißt Standardwert: an', () => {
  assert.equal(strictIsOn(), true, 'strictIsOn() sollte true sein');
});

test('true heißt an', () => {
  assert.equal(strictIsOn(true), true, 'strictIsOn(true) sollte true sein');
});

test('false heißt aus', () => {
  assert.equal(strictIsOn(false), false, 'strictIsOn(false) sollte false sein');
});

package.json

{
  "type": "module"
}

tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "module": "nodenext",
    "lib": [
      "esnext",
      "dom"
    ],
    "types": [],
    "strict": true,
    "noEmit": true,
    "erasableSyntaxOnly": true,
    "verbatimModuleSyntax": true,
    "allowImportingTsExtensions": true
  },
  "include": [
    "**/*.ts"
  ],
  "exclude": [
    "**/*.test.ts"
  ]
}

npx tsc braucht TypeScript im Ordner: Führen Sie dort einmal npm install --save-dev typescript aus. tsc prüft die Typen; Node.js führt main.ts aus, indem es sie entfernt.

Programm ausführen:

npx tsc
node main.ts

Prüfungen ausführen (learnrun.js muss im selben Ordner liegen):

npx tsc
node --test
learnrun.js herunterladen

Häufige Fehler

Einen Wert verwenden, der undefined sein kann

const names = ["Ada", "Grace"];
const found = names.find((name) => name.startsWith("G"));
console.log(found.toUpperCase());

Was tsc oder Node.js ausgibt

main.ts(3,13): error TS18048: 'found' is possibly 'undefined'.

Warum, und die Lösung

find liefert undefined, wenn nichts passt, und strictNullChecks, ein Teil von strict, erlaubt keinen Methodenaufruf auf einem Wert, der undefined sein kann. Hier passt zwar ein Name, aber tsc prüft jeden Fall, nicht diesen einen Lauf. Behandeln Sie den Fall: (found ?? "").toUpperCase(). strict auszuschalten brächte tsc zum Schweigen, und das Programm stürzte ab, sobald nichts passt.

Ein enum, das Node.js nicht entfernen kann

enum Size {
  Small,
  Large
}

console.log(Size.Large);

Was tsc oder Node.js ausgibt

main.ts(1,6): error TS1294: This syntax is not allowed when 'erasableSyntaxOnly' is enabled.

Warum, und die Lösung

Ein enum ist TypeScript-Syntax, die zur Laufzeit Code erzeugt; Node.js kann es also nicht durch Entfernen der Typen ausführen: Auch node main.ts bricht mit einem Fehler ab. Die Kurs-tsconfig setzt erasableSyntaxOnly, also meldet tsc es zuerst. Verwenden Sie stattdessen einfache Werte, etwa const Size = {Small: 0, Large: 1};.

Nodes process ohne seine Typen verwenden

console.log("arguments:", process.argv.length);

Was tsc oder Node.js ausgibt

main.ts(1,27): error TS2591: Cannot find name 'process'. Do you need to install type definitions for node? Try `npm i --save-dev @types/node` and then add 'node' to the types field in your tsconfig.

Warum, und die Lösung

process gehört zu Node.js, und seine Deklarationen kommen aus dem Paket @types/node. Die Kurs-tsconfig setzt "types": [], also wird kein solches Paket geladen (das braucht Node.js; führen Sie es lokal aus). Wie die Meldung sagt, installiert ein Node-Projekt @types/node und trägt "node" in types ein. Der Kurs bleibt bis zu späteren Modulen bei Programmen ohne Nodes eigene APIs.

TypeScript im Browser: der Compiler von TypeScript 6.0.3, Apache-2.0, danach die eigene Engine Ihres Browsers. Lizenz und Quellcode

Abschlussquiz

5 Fragen, ohne Hinweise. Ab 80 % ist die Lektion abgeschlossen.

Erledigen Sie zuerst alle Aufgaben oben, um das Abschlussquiz freizuschalten.

Problem melden

Etwas ist falsch oder unklar? Beschreiben Sie es kurz, dann wird es geprüft und korrigiert.

#

Mindestens 20 Zeichen.

Nur, wenn Sie eine Antwort wünschen.

Kernideen

Eine tsconfig.json kennzeichnet ein Projekt

Eine tsconfig.json macht ihren Ordner zur Wurzel eines TypeScript-Projekts. compilerOptions sagt, wie geprüft wird; include und exclude sagen, welche Dateien. Jede Option, die Sie weglassen, behält den Standardwert des Compilers, also ist selbst {} eine gültige tsconfig, und npx tsc --init schreibt eine längere Vorlage mit Kommentaren. Seit TypeScript 6.0, und damit in 7.0, ist strict standardmäßig an: Schon {} meldet einen Parameter ohne Typ. strict schaltet eine Familie von Prüfungen ein, darunter noImplicitAny (kein stilles any) und strictNullChecks (ein Wert, der undefined sein kann, muss vor der Verwendung behandelt werden). "strict": false schaltet sie alle aus; eine einzelne lässt sich allein abschalten, etwa mit "noImplicitAny": false.

Welche Dateien, und was tsc schreibt

include listet die Dateien des Projekts als Muster: "**/*.ts" bedeutet jede .ts-Datei in diesem Ordner und in jedem Ordner darunter. Ohne include nimmt tsc **/*, jede Datei, die es prüfen kann. exclude entfernt Dateien aus dem, was include gefunden hat, etwa "**/*.test.ts". Passt nichts, bricht tsc mit No inputs were found in config file ab. Ohne noEmit schreibt tsc außerdem JavaScript, main.js neben main.ts, und zwar auch dann, wenn es Fehler meldet. noEmit macht tsc zum reinen Prüfer, und mehr braucht es nicht, wenn node main.ts die .ts-Datei selbst ausführt. Eine falsch geschriebene Option wird nicht übergangen: "stict" ergibt error TS5023: Unknown compiler option 'stict'.

Die Kurs-tsconfig, Option für Option

target esnext und module nodenext: modernes JavaScript, und die Dateien sind ES-Module, wie "type": "module" in package.json sagt; Importe nennen also ihre Endung. lib esnext und dom: Deklarationen der eingebauten Objekte; console ist in dom deklariert. types []: keine @types-Pakete, darum kennt tsc Nodes process nicht. strict und noEmit wie oben. erasableSyntaxOnly: nur TypeScript-Syntax, die Node.js entfernen kann, also kein enum. verbatimModuleSyntax: Ein reiner Typimport muss import type schreiben. allowImportingTsExtensions: erlaubt "./format.ts", und nur zusammen mit noEmit. Starten Sie npx tsc: npx tsc main.ts neben einer tsconfig.json bricht mit error TS5112 ab; tsc --ignoreConfig main.ts prüft stattdessen diese Datei mit Standardeinstellungen.

Quellen

Zuletzt geprüft am 30. September 2026