Eine kurze Analyse der Verwendung von Typescript in Laravel

Wie verwende ich Typescript in Laravel? Der folgende Artikel wird Ihnen die Verwendung von Typescript in Laravel vorstellen. Ich hoffe, er wird Ihnen hilfreich sein!

Immer mehr PHP- und insbesondere Laravel-Entwickler haben damit begonnen, stärker typisierten Code zu schreiben, während Full-Stack-Entwickler dazu neigen, nicht die gleichen Praktiken auf ihren Front-End-Code anzuwenden. Unter diesen gilt TypeScript als eine „andere“ Art, Front-End-Komponenten zu schreiben. [Verwandte Empfehlungen: Laravel-Video-Tutorial]

Die meisten Missverständnisse über TypeScript bestehen darin, dass es für Back-End-Entwickler zu komplex ist und nur die Größe des Codes vergrößert, ohne einen Mehrwert zu bieten.

Eigentlich zwingt Sie TypeScript nicht dazu, Typen zu deklarieren. Hier ist der wichtige Teil: TypeScript ist eine Obermenge von JavaScript, mit der Sie Dinge hinzufügen können, aber jedes gültige JS ist auch ein gültiges TS.

Die praktische Auswirkung davon besteht darin, dass Sie die Datei von .js in .ts umbenennen und nach und nach Typen hinzufügen oder mit der Verwendung von Typen in der neuen Datei beginnen können. Ihre Codebasis muss nicht über eine 100-prozentige Typabdeckung verfügen. Sie können TypeScript nach Ihren Wünschen verwenden. .js 重命名为 .ts，并逐渐添加类型或开始在新文件中使用类型。你的代码库不必达到 100% 的类型覆盖率。你可以根据自己的选择使用 TypeScript。

为什么使用 TypeScript

TypeScript 提供了可选的静态类型，它允许你在编译阶段构建和验证你的代码。它还带来了 IDE 自动完成和验证支持以及代码导航功能。简而言之，TypeScript 增强了代码的可读性并改进了调试过程。

为你的 Laravel 项目添加 TypeScript 支持非常简单，只需几分钟，但可以提升你的前端体验。让我们用 Vue 3 重新安装 Laravel Breeze 来回顾一下这个过程。

1. 安装依赖

让我们从安装 TypeScript 编译器和相应的 Webpack 加载器开始。

npm install ts-loader typescript --save-dev
# 或者
yarn add ts-loader typescript -D

2. 设置 TypeScript 配置

TypeScript 编译器需要一个包含所需选项的配置文件。适当的 IDE 自动完成也是可取的。

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "es2020",
    "moduleResolution": "node",
    "baseUrl": "./",
    "strict": true,                 // Enable strict type-checking options
    "skipLibCheck": true,           // Skip type checking of declaration files
    "noImplicitAny": false          // Bypass raising errors on `any` type
  },
  "include": ["resources/js/**/*"]  // 前端路径模式
}

3. 配置 Laravel Mix

初始 Laravel 安装带有一个 JavaScript 入口示例，需要将其转换为 TypeScript。您只需将 .js 重命名为 .ts。

-resources/js/app.js
+resources/js/app.ts

然后，让 Mix 知道它应该将 JavaScript 代码作为 TypeScript 处理。 Laravel Mix 带有内置的 TypeScript 支持。

webpack.mix.js

-mix.js('resources/js/app.js', 'public/js')
+mix.ts('resources/js/app.ts', 'public/js')

你还需要告诉编译器和 IDE，组件的代码必须被视为 TypeScript。将 lang="ts" 部分附加到组件脚本部分。

<script lang="ts">
import { defineComponent } from "@vue/runtime-core";

export default defineComponent({
    ...
});
</script>

你都准备好了吧！你可以继续按照以前的方式编写代码，并利用一些 TypeScript 功能并改善你的前端体验。

示例用法

TypeScript 允许你使用简单类型和复杂结构来类型提示变量和方法。由于我们主要关注与后端交互，让我们看一下与模型交互的示例。

让我们创建一个包含所有必要类型声明的文件 —— resources/js/types.d.ts。

假设你有一个模型用户，你可以从前端与之交互。这是默认用户模型的基本 TypeScript 表示。它描述了一个对象可以具有哪些属性以及这些属性应该是什么类型。

resources/js/types.d.js

declare interface User {
    id: number;
    name: string;
    email: string;
}

现在，你可以在分配变量或从方法返回值时使用此接口。

let user = <User>{ id: 1, name: &#39;Taylor Otwell&#39; }

function getUser(): User {
    ...
}

因此，当你访问 user

Warum TypeScript verwenden?

TypeScript bietet optionale statische Typisierung, mit der Sie Ihren Code während der Kompilierungsphase erstellen und überprüfen können. Es bietet außerdem Unterstützung für die automatische Vervollständigung und Validierung der IDE sowie Code-Navigationsfunktionen. Kurz gesagt: TypeScript verbessert die Lesbarkeit des Codes und verbessert den Debugging-Prozess.

Das Hinzufügen von TypeScript-Unterstützung zu Ihrem Laravel-Projekt ist einfach, dauert nur wenige Minuten, kann aber Ihr Front-End-Erlebnis verbessern. Sehen wir uns den Vorgang an, indem wir Laravel Breeze mit Vue 3 neu installieren.

1. Abhängigkeiten installieren

Beginnen wir mit der Installation des TypeScript-Compilers und des entsprechenden Webpack-Loaders.

rrreee

2. TypeScript-Konfiguration einrichten

Der TypeScript-Compiler benötigt eine Konfigurationsdatei mit den erforderlichen Optionen. Wünschenswert ist auch eine entsprechende IDE-Autovervollständigung.

🎜tsconfig.json🎜🎜rrreee

🎜3. Konfigurieren von Laravel Mix🎜

🎜Die Erstinstallation von Laravel enthält ein JavaScript-Eingabebeispiel, das in TypeScript konvertiert werden muss. Sie müssen lediglich .js in .ts umbenennen. 🎜rrreee🎜Dann teilen Sie Mix mit, dass es den JavaScript-Code als TypeScript verarbeiten soll. Laravel Mix verfügt über integrierte TypeScript-Unterstützung. 🎜🎜🎜webpack.mix.js🎜🎜rrreee🎜Sie müssen dem Compiler und der IDE außerdem mitteilen, dass der Code der Komponente als TypeScript behandelt werden muss. Hängen Sie den Abschnitt lang="ts" an den Abschnitt mit dem Komponentenskript an. 🎜rrreee🎜Ihr seid alle bereit! Sie können weiterhin wie zuvor Code schreiben, einige TypeScript-Funktionen nutzen und Ihr Front-End-Erlebnis verbessern. 🎜

🎜Beispielverwendung🎜

🎜TypeScript ermöglicht Ihnen die Eingabe von Variablen und Methoden mithilfe einfacher Typen und komplexer Konstrukte. Da wir uns hauptsächlich auf die Interaktion mit dem Backend konzentrieren, schauen wir uns ein Beispiel für die Interaktion mit dem Modell an. 🎜🎜Erstellen wir eine Datei, die alle notwendigen Typdeklarationen enthält – resources/js/types.d.ts. 🎜🎜Angenommen, Sie haben einen Modellbenutzer, mit dem Sie über das Frontend interagieren können. Dies ist eine grundlegende TypeScript-Darstellung des Standardbenutzermodells. Es beschreibt, welche Eigenschaften ein Objekt haben kann und welchen Typ diese Eigenschaften haben sollten. 🎜🎜🎜resources/js/types.d.js🎜🎜rrreee🎜Jetzt können Sie diese Schnittstelle verwenden, wenn Sie Variablen zuweisen oder Werte von Methoden zurückgeben. 🎜rrreee🎜Wenn Sie also auf die Variable user zugreifen, schlägt Ihre IDE die entsprechenden Objekteigenschaften vor. Außerdem werden Sie darüber informiert, wenn ein Typfehler auftritt, bevor Sie Ihren Code kompilieren. 🎜🎜Das Schreiben von Schnittstellen für alle Modelle und deren Synchronisierung mit dem Backend-Code erfordert zusätzliche Zeit. Möglicherweise möchten Sie die Verwendung der Erweiterung „laravel-typescript“ in Betracht ziehen, mit der Sie Laravel-Modelle in TypeScript-Deklarationen konvertieren und diese mit Ihren Migrationen synchron halten können. 🎜🎜🎜Originaladresse: https://laravel-news.com/typescript-laravel🎜🎜Übersetzte Adresse: https://learnku.com/laravel/t/67586🎜🎜🎜Weitere Programmierkenntnisse finden Sie unter: 🎜 Programmiervideo 🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonEine kurze Analyse der Verwendung von Typescript in Laravel. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!