Die progressive Einführungsstrategie von TypeScript für Front-End-Projekte

Die Strategie der schrittweisen Einführung von TypeScript in Front-End-Projekten umfasst normalerweise:

Einführung in TypeScript

Wenn wir ein einfaches JavaScript-Modul utils.js haben, das eine Funktion zum Berechnen der Summe zweier Zahlen enthält:

// utils.js
export function add(a, b) {
    return a + b;
}

Zuerst ändern wir die Dateierweiterung in .ts und beginnen Schritt für Schritt mit dem Hinzufügen von Typanmerkungen:

// utils.ts
export function add(a: number, b: number): number {
    return a + b;
}

tsconfig.json einrichten

Erstellen Sie eine tsconfig.json im Projektstammverzeichnis, um den TypeScript-Compiler zu konfigurieren:

{
// Specify the target ECMAScript version for compilation
"target": "es6",

// Specify the module system
"module": "esnext",

// Output directory, where the compiled files are stored
"outDir": "./dist",

// Whether to include source map files for debugging
"sourceMap": true,

// Enable strict type checking options
"strict": true,

// Allow default imports from modules that do not set default exports
"esModuleInterop": true,

// Ignore type checking for libraries
"skipLibCheck": true,

// Ensure consistent case for file names
"forceConsistentCasingInFileNames": true,

// Which files to include for compilation
"include": [
    "src/**/*.ts",
    "src/**/*.tsx" // If TypeScript's JSX is used in the project
],

// Which files or directories are excluded from compilation
"exclude": [
    "node_modules",
    "**/*.spec.ts" // Exclude test files
]
}

Erweiterte Konfigurationselemente

Pfade: Wird für die Pfad-Alias-Konfiguration verwendet, um die Pfadverwaltung beim Importieren von Modulen zu erleichtern.

"paths": {
    "@components/*": ["src/components/*"]
}

baseUrl: Legen Sie das Basisverzeichnis des Projekts fest. Bei Verwendung mit Pfaden kann ein präziserer Importpfad bereitgestellt werden.

    "baseUrl": "./src"

resolveJsonModule: Ermöglicht den direkten Import von JSON-Dateien.

    "resolveJsonModule": true

lib: Gibt die im Projekt verwendete Bibliotheksdateisammlung an, z. B. ECMAScript, DOM usw.

    "lib": ["es6", "dom"]

jsx: Wenn das Projekt JSX-Syntax verwendet, muss diese Option festgelegt werden.

    "jsx": "react-jsx"

Geerbte Konfiguration

Wenn Ihre Projektstruktur komplex ist, benötigen Sie möglicherweise unterschiedliche Konfigurationen in verschiedenen Verzeichnissen. Sie können die Eigenschaft „extends“ verwenden, um eine grundlegende tsconfig.json:
zu erben

// tsconfig.app.json in a subdirectory
{
    "extends": "../tsconfig.json",
    "compilerOptions": {
    // You can override or add application-specific compilation options here
    },
    // You can add or modify include and exclude here
}

Integrieren Sie TypeScript in den Build-Prozess

Die Integration von TypeScript in den Build-Prozess erfordert normalerweise eine Anpassung der Konfiguration des Build-Tools (z. B. Webpack, Rollup oder Parcel). Und Hinzufügen von TypeScript-Verarbeitungsregeln in der Konfigurationsdatei.

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

webpack.config.js配置文件

const path = require('path');

module.exports = {
  entry: './src/index.ts', // Your entry file, usually index.ts
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx'], // Add .ts and .tsx extensions
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/, // Exclude the node_modules directory
      },
    ],
  },
  devtool: 'source-map', // Generate source map for easy debugging during development
};

Stellen Sie in tsconfig.json sicher, dass Sie das richtige outDir konfiguriert haben, das mit dem Ausgabeverzeichnis von Webpack übereinstimmt:

{
  // ...
  "outDir": "./dist",
  // ...
}

Jetzt können Sie den Erstellungsprozess starten, indem Sie den folgenden Befehl über die Befehlszeile ausführen:

npx webpack

Dadurch wird der TypeScript-Quellcode mithilfe von Webpack und ts-loader in JavaScript kompiliert und im dist-Verzeichnis ausgegeben.

Wenn Sie npm-Skripte verwenden, können Sie package.json ein Build-Skript hinzufügen:

{
  "scripts": {
    "build": "webpack"
  }
}

Dann führen Sie den Build über npm run build aus.

Verwenden von Typdefinitionen

Wenn Sie in Ihrem Projekt Bibliotheken von Drittanbietern verwenden, stellen Sie sicher, dass Sie die entsprechenden Typdefinitionspakete installieren, z. B. @types/lodash. Für Bibliotheken ohne offizielle Typdefinitionen können Sie die von der Community bereitgestellten Definitionen ausprobieren oder Ihre eigenen Deklarationsdateien schreiben.

1. Installieren Sie Typdefinitionspakete:

Die meisten gängigen Bibliotheken verfügen über entsprechende Typdefinitionspakete, die sich normalerweise im @types-Namespace befinden. Wenn Sie beispielsweise lodash in Ihrem Projekt verwenden, können Sie den folgenden Befehl ausführen, um seine Typdefinitionen zu installieren:

// utils.js
export function add(a, b) {
    return a + b;
}

Oder verwenden Sie Garn:

// utils.ts
export function add(a: number, b: number): number {
    return a + b;
}

2. Automatische Typinferenz

Nach der Installation von Typdefinitionen erkennt und verwendet der TypeScript-Compiler diese Typdefinitionen automatisch. Sie müssen sie nicht explizit in Ihren Code importieren, sondern verweisen einfach wie gewohnt auf die Bibliothek in Ihrem Projekt.

3. Benutzerdefinierte Typdefinitionen

Wenn Sie eine Bibliothek verwenden, die keine offiziellen Typdefinitionen hat oder die offiziellen Typdefinitionen unvollständig sind, können Sie Ihre eigene Typdeklarationsdatei (.d.ts) schreiben. Normalerweise sollte diese Datei am selben Speicherort wie die JavaScript-Datei der Bibliothek oder im Verzeichnis „types“ oder „@types“ abgelegt werden.

Angenommen, es gibt eine Bibliothek namens „customLib“ und ihre Hauptdatei ist „customLib.js“. Sie können eine Datei „customLib.d.ts“ erstellen, um deren Typen zu deklarieren:

{
// Specify the target ECMAScript version for compilation
"target": "es6",

// Specify the module system
"module": "esnext",

// Output directory, where the compiled files are stored
"outDir": "./dist",

// Whether to include source map files for debugging
"sourceMap": true,

// Enable strict type checking options
"strict": true,

// Allow default imports from modules that do not set default exports
"esModuleInterop": true,

// Ignore type checking for libraries
"skipLibCheck": true,

// Ensure consistent case for file names
"forceConsistentCasingInFileNames": true,

// Which files to include for compilation
"include": [
    "src/**/*.ts",
    "src/**/*.tsx" // If TypeScript's JSX is used in the project
],

// Which files or directories are excluded from compilation
"exclude": [
    "node_modules",
    "**/*.spec.ts" // Exclude test files
]
}

TypeScript erkennt und verwendet dann in Ihrem Code diese Typen.

4. Community-Typdefinitionen

Manchmal stellt die Community inoffizielle Typdefinitionen bereit. Sie finden es im DefinitelyTyped-Repository (https://github.com/DefinitelyTyped/DefinitelyTyped) oder suchen Sie auf GitHub nach @types/library-name.

5. Einschränkungen von Typdefinitionen

Während Typdefinitionen zur Verbesserung der Codequalität hilfreich sind, stellen nicht alle Bibliotheken vollständige Typdefinitionen bereit, oder sie stimmen möglicherweise nicht vollständig mit dem tatsächlichen Verhalten der Bibliothek überein. In diesem Fall müssen Sie möglicherweise den Kommentar „any type“ oder // @ts-ignore in Ihrem Code verwenden, um bestimmte Typprüfungen zu überspringen.

IDE-Integration

Stellen Sie sicher, dass in Ihrer IDE (z. B. VSCode) das TypeScript-Plugin installiert ist, um Codevervollständigung, Typprüfung und andere Funktionen zu erhalten.

Migrieren Sie nach und nach andere Module

Im Laufe der Zeit können Sie nach und nach andere JavaScript-Module in TypeScript umwandeln. Angenommen, es gibt eine app.js, die auf ähnliche Weise in app.ts konvertiert werden und Typanmerkungen hinzufügen kann.

• App.js in app.ts umbenennen. Dieser Schritt markiert, dass das Modul offiziell in die TypeScript-Umgebung eingetreten ist.

• Öffnen Sie app.ts und beginnen Sie mit dem Hinzufügen von Typanmerkungen zu Variablen, Funktionsparametern, Rückgabewerten usw. Dies hilft dem TypeScript-Compiler, Typprüfungen durchzuführen und potenzielle Typfehler zu reduzieren.
  

// utils.js
export function add(a, b) {
    return a + b;
}

• Erwägen Sie bei komplexen Datenstrukturen die Verwendung von Schnittstellen (Schnittstelle) oder Typaliasen (Typalias), um Typen zu definieren und die Lesbarkeit und Wartbarkeit des Codes zu verbessern.

// utils.ts
export function add(a: number, b: number): number {
    return a + b;
}

Stärken Sie die Typprüfung

Sobald sich Ihr Team an TypeScript gewöhnt hat, können Sie schrittweise strengere Typprüfungsoptionen in tsconfig.json aktivieren, wie z. B. strictNullChecks.

Das obige ist der detaillierte Inhalt vonDie progressive Einführungsstrategie von TypeScript für Front-End-Projekte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!